とつぜんですが、Hタグをすこし飾り付けしてみようと思いましてアイコンフォントのfontawesoneを設定しました。

fontawesone


　設定方法は、「超」がつくほど簡単と言いたいところですがテンプレートをゴソゴソ変更しているとそう簡単にはうまく行かないこともありますよね。

設定方法は、英語の練習くらいに考えてオリジナルサイトを読んでみると良いんじゃなかしら。

リンク： Font Awesone

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

１行追加するだけなので変更自体は簡単ですけど、うまく行かない時が大変なんですよねぇ。

うまく行かない時は


<head>セクションにlinkをコピペしてね・・・と書いてあるのですけど、</head>の直前にいれると動かないこともありました。


<head>直後に入れると確実に動作するとおもいますが、表示速度に影響があるかもしれないので、読み込みテストをするかGoogle Page SpeedやGTmetrixでチェックするといいと思います。

ただし、bloggerですのであまり速度は気にしないほうがいいと思いかも。

<i class="fa fa-flag"></i>

アイコンは、上記のタグで確認ができますので、<link>が読み込まれているかどうかをチェックできると思います。


サンプル


ところで、たくさんアイコンをちりばめるとザワザワした感じになりますので、シンプルにH3とH4タグにだけアイコンフォントをつけました。

H3の例


チェックマークのアイコンフォントをボーダーに換えて配置してみました、色味は朱色っぽく。

H4の例


H4はブルーで鉛筆マークで・・・あわないかも。。。