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のカテゴリで本日よく読まれてる記事

まだデータがありません。

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

まだデータがありません。

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

 タグ関連記事

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

コメントを残す

更新情報

Simplicity2.4安定版が出ました  更新日: 12月13日
STINGER8が出ました  更新日: 12月13日
20170719235441
Simplicityの固定ページにショートコードを使って特定のカテゴリを表示する方法

今から紹介する方法はSimplicityのテーマじゃなくても動きま

20170719095238
WordPressの固定ページでカテゴリーやタグを使えるようにする方法

今まで使う機会がなかったのですがちょいと入り用が出来たので固定ペー

20170711084633
Simplicityのカスタマイズ時にスタイルシートが反映されない時の注意

Simplicityで良くハマることがスマホ用のスタイルシートが反

20170602170051
Simplicityで使えるスキンの「m-tomato」が凄く良い

Simplicityではスキンと言う機能があり スタイルシートの

20170520130242
無料テーマの「Numinous」の紹介

Numinous はクリーンでエレガントなマガジンタイプの Wor

→もっと見る


まだデータがありません。

  • レスポンシブをサクッと解除する方法へのコメント (レスポンシブデザインを解除してスマホでもPC表示にする方法 - 週間後藤隊長より[06/18]) […] 参考サイト […]
  • Shortcodes Ultimateをどこにでも表示出来るようにするへのコメント (優香より[02/17]) お返事遅くなり申し訳ございませんでした。 wordpress popular p…
  • そのままでは危ないWordPressの設定へのコメント (【重要】WordPress4.7と4.7.1の人は4.7.2にすぐにアップデートしましょう! | 時代は変わる(PCやネット関連)より[02/12]) […] そのままでは危ないWordPressの設定マメにWordP…
  • Shortcodes Ultimateをどこにでも表示出来るようにするへのコメント (HYより[02/09]) この記事大変参考になりました。 すみません。一つご質問があります。 「Wor…
  • wordpressテーマのGushにしたらwp-jquery-lightboxが動かないへのコメント (優香より[03/01]) Elloraさん こちらこそよろしくお願いします。 ありがとございました。

    スポンサードリンク