【STINGER5】見出しh3タグ先頭にアイコンフォントを設定する方法

STINGER5に標準で使用されている「Font Awesome」を利用して、h3タグの先頭にアイコンフォントを設定する方法を紹介します。

カスタマイズ後のh3タグは、こんな感じ。 h3tag-iconfont_01 このカスタマイズは「キャリコ」さんの記事を参考にさせて頂きました。

ありがとうございます!

スポンサーリンク

style.cssにコードを追加する

.post h3:before {
content: "\f046";
font-family: FontAwesome;
font-size: 24px;
color: #4682B4;
position:relative;
top:2px;
margin-right:5px;
}

表示するアイコンフォントを変更したい場合は、「content: “\f046”;」の「f046」の英数字を変更します。アイコンのコードは公式ウェブサイトで調べて下さい。  

 

h3tag-iconfont_02 Font Awesome のサイトを開き、「Icons」をクリック。

 

使用したいアイコンを選択

h3tag-iconfont_03 使用したいアイコンを選択しクリック。  

 

Unicodeの4桁の英数字を確認

h3tag-iconfont_04 アイコンフォントの大きさは「font-size」の数字を変更。

色を変えたい場合は「color: #4682B4;」の「#4682B4」のカラーコードを変更。

位置の調整は「position:relative;」の「top」「margin-right」のpx数を変更。

それぞれ、デザインに合わせて調整して下さい。  

スポンサーリンク

プロフィール

iMacと猫が好きな完全インドア派。

2 件のコメント

  • はじめまして!

    http://nobuyukioishi.com/

    でブログを書いております、のぶゆきと申します。

    Stinger5のH3が少し見づらかったので、何か参考になるページは無いかな?と思って調べていたところ、こちらのページにたどり着きました。

    さて、コチラのソースですが↓

    .post h3:before {
    content: “f046”;
    font-family: FontAwesome;
    font-size: 24px;
    color: #4682B4;
    position:relative;
    top:2px;
    margin-right:5px;
    }

    こちらのコード、ありがたく使わせていただいております!

    …しかし、contentの部分がこのままでは”f046″という文字がそのまま表示されてします。

    “\f046″ (環境によっては”¥f046”)

    であれば、問題なく表示されるようでしたので、一応ご報告させていただきます。

    よろしくお願いいたします。

    • こちらの記述漏れでしたので、早速修正しました。
      間違いの指摘ありがとうございます。

      ブログ拝見いたしました。
      まだブログを始めたばかりみたいですね!ブックマークしておきました!

  • コメントを残す