テーマを「SANGO」に変更しました。

【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数を変更。

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

2 Comments

のぶゆき

はじめまして!

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”)

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

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

返信する
nekonotesou

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

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

返信する

コメントを残す