stingerにwebフォントアイコンをつけてみた

公開日: CSS 

閲覧所要時間: 約 2

stinger3にwebフォントアイコンをつける方法
そもそもstinger5にはwebフォントアイコンが付いているけど私の使ってるstinger3には無かったので少し寂しそうだからつけちゃいました。
どんなものかと言うと↓な感じですwww
20150626084417

つけ方はとても簡単で色んなやり方や種類もあると思いますが今回は細かい説明も省略で最も簡単につける方法の覚え書きです!

アイコンWebフォントのFont Awesomeを使います。

Font Awesome
Font Awesome, the iconic font and CSS framework

使い方は
1、head 要素内に下記コードを入れます。
バージョンが変わるので最新のものはここでチェック出来ます。

Bootstrap CDN #Font Awesome

2、表示させたい箇所に下記のコードを入れます。(使いたいアイコンはFont Awesomeのサイトで選びます)

たったこれだけで使えるようになります。
実際にこのブログで使った例として書き残しておきます。
singre.phpの編集

stinger3の元のソースは以下


上の元のソースを以下のように書き換えれば出来上がりです。

今回はこれだけですけど表示の仕方(大きさ・色変え・回転)なんかも出来ます。

今日は時間があまり取れなかったので時間のある日にもう少し詳しく書き足ししたいと思います。
今日の天気は曇りだけど雨降りそうです。

CSSのカテゴリで本日よく読まれてる記事

  1. お洒落で即使えそうなCSS その1

 関連記事-こちらもどうぞ

 タグ関連記事

関連する記事は見当たりません…

ブログ管理者などによく売れてる本です

コメントを残す

更新情報

ご挨拶  更新日: 11月05日
20180121041301.jpg
simplicity2のグローバルメニューにアイコンを入れる方法

simplicity2に簡単コピペで出来るサンプルをザックと書き残

20180114005419.jpg
WordPressテーマ国産品の無料テーマchameleonの紹介

chameleonの特徴 1、シンプル なデザイン 2、ヘ

PAK58_kiokuyorikiroku_TP_V.jpg
エックスサーバーでSimplicityをカスタマイズしても反映されない

久々にwordpressテーマSimplicityのカスタマイズを

74281b8770b9cc5360dbb3bb37f84352_s.jpg
グローバルメニューをスクロール固定する【Simplicity2】

グローバルメニューをヘッダーの一番上に固定する方法を紹介したいと思い

b27a471af36017d6c98acf63487003b3_s.jpg
LiteSpeed CacheをONにするとアフィリエイト広告が表示されない現象

アフィリエイト広告を貼り付けても広告が表示されない現象 問題は

→もっと見る


スポンサードリンク