BloggerでアイコンWEBフォントを使ってみた

Bloggerでアイコンを使う際、いちいち画像を作るのが面倒くさい場合などにアイコンフォントを使用してアイコンを自由に使える方法があります。

「Font Awesome」というWEBフォントを使用することです。

画像ではなく、あくまでもフォントのため拡大してもきれいなままで、色も変えることができます。

設定方法

1. テンプレートからHTML編集にて下記コードを</head>より前に追加

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

2. 「Font Awesome」のサイトにアクセスして、上部メニューの「Icons」をクリックしフォントの見本を表示させる。
3. 使いたいフォントをクリックすると、コードが表示されるので表示させたい部分に貼り付ける。

使用例

1. サイズの変更

fa-android fa-1g

fa-android fa-2x

fa-android fa-3x

fa-android fa-4x

fa-android fa-5x

<p><i class="fa fa-android fa-1g"></i>fa-android fa-1g</p>
<p><i class="fa fa-android fa-2x"></i>fa-android fa-2x</p>
<p><i class="fa fa-android fa-3x"></i>fa-android fa-3x</p>
<p><i class="fa fa-android fa-4x"></i>fa-android fa-4x</p>
<p><i class="fa fa-android fa-5x"></i>fa-android fa-5x</p>

2. アイコンとフォントの間隔を広げる

何もしない場合
ホーム

<p><i aria-hidden="true" class="fa fa-home"></i>ホーム</p>

コード内に「fa-fw」を加えるとアイコンと文字の間隔が広くなる
ホーム

<p><i aria-hidden="true" class="fa fa-home fa-fw"></i>ホーム</p>

3. 色を変える

　黄色に変えてみました

<span style="color: yellow;"><i class="fa fa-camera-retro fa-lg"></i></span>

その他につきましては

　http://fontawesome.io/examples/

にいろいろと例が載っています。（サイトは英語ですがなんとなくわかると思います。）


以上、参考にしていただけたら幸いです。

• 
• list ツイート