行き着く先はあんこ

Font Awesomeの導入と使い方[Blogger]

font-awesome-blogger

画像を使わなくても、ブログに簡単なアイコンを表示できるようになるWebフォント。その中でも有名なのはFont Awesome。

もちろんBloggerでも使うことができます。そこで今回はFont Awesomeの導入から使い方までを紹介していきます。

スポンサーリンク

500個以上のアイコン使い放題

前置きにFont Awesomeとはどんなものか(詳しいことは分かりませんので)簡単に紹介します。

まず、Font Awesomeを導入するとなアイコンが使い放題になります。

また、フォントデータを保存するサーバーなんてのも準備する必要がないため、外部サーバーのないBloggerでも使えます。

しかも画像ではなくフォントであるため、拡大しても綺麗なままで表示されます。もちろん色を変えることも可能。ほんと至れり尽くせりです。

導入前に比べると、ブログの表示速度が若干遅くなるようですが、導入するメリットのほうが大きいようには感じます。

Font Awesomeの導入はこれだけ

Webフォントと聞くと難しく聞こえますが、Font Awesomeの場合は驚くほど簡単です。

まずBloggerの「テンプレート」→「HTMLの編集」を開いて、「</head>」を探します。検索は「Control」+「F」同時押しでできます。

次に「</head>」より前に下のコードをコピペします。

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

イメージはこんな感じです。

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

</head>

これで準備完了です。

使い方はかなり自由

Font Awesomeの準備ができたら、公式サイトから使いたいアイコンを探してきます。
Font Awesome

上部の「Icon」から目的のアイコンを見つけます。

Font Awesomeのサイトのiconタブは上部にあります。

クリックするとアイコンのコードが表示されるので、このコードをそのまま使いたい場所にコピペするだけです。

アイコンのコードが表示されます。

Bloggerの記事中に使いたい場合は、記事編集画面の「HTML」の状態でペーストしてください。「作成」だと使えませんのでご注意を!

Bloggerの記事での使用は必ず「HTML」の状態でペーストする。

こんな使い方もできるよ

Font Awesomeには標準でサイズ変更や回転といった効果を付けられるようになってます。

サイズを変更する

標準サイズ、2倍、3倍、4倍、5倍にサイズ変更できます。タグの中にfa-1g、fa-2x~fa-5xを加えるだけ。

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>

アイコンと文字の間隔を広げる

特に何もしなければアイコンと文字がくっ付いた状態になります。
行き着く先はあんこ

<a href="https://ikisakianco.com/"><i class="fa fa-external-link"></i>行き着く先はあんこ</a>

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

行き着く先はあんこ

<a href="https://ikisakianco.com/"><i class="fa fa-external-link fa-fw"></i>行き着く先はあんこ</a>

リスト表示のとき

「ul」に「fa-ul」クラスを指定して、「li」に「fa-li」を加えるとリスト表示にも対応します。

  • fa-apple fa-li
  • fa-android fa-li
  • fa-windows fa-li
<ul class="fa-ul">
  <li><i class="fa fa-apple fa-li"></i>fa-apple fa-li</li>
  <li><i class="fa fa-android fa-li"></i>fa-android fa-li</li>
  <li><i class="fa fa-windows fa-li"></i>fa-windows fa-li</li>
</ul>

アイコンの回りを囲む

「fa-border」を加えるとアイコンをボーダーで囲みます。

<i class="fa fa-quote-left fa-3x fa-border"></i>

アイコンを回転させる

「fa-spin」を加えるとくるくる回ります。

<p><i class="fa fa-spinner fa-spin fa-2x"></i></p>
<p><i class="fa fa-circle-o-notch fa-spin fa-2x"></i></p>
<p><i class="fa fa-refresh fa-spin fa-2x"></i></p>
<p><i class="fa fa-cog fa-spin fa-2x"></i></p>

アイコンの向きを90度ごとに変える

「fa-rotate-X」でアイコンが90度ごとに傾きます。

normal

fa-rotate-90

fa-rotate-180

fa-rotate-270

<p><i class="fa fa-shield"></i> normal</p>
<p><i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90</p>
<p><i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180</p>
<p><i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270</p>

アイコンを重ねる

2つのアイコンを重ねて新たなアイコンを作ることができます。

<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-flag fa-stack-1x fa-inverse"></i>
</span>
<span class="fa-stack fa-lg">
<i class="fa fa-camera fa-stack-1x"></i>
<i class="fa fa-ban fa-stack-2x text-danger"></i>
</span>

さいごに

長くなってしまったのですが、主な使い方はこんな感じです。

一応公式の解説サイトはこちらです。
Font Awesome Examples

Font Awesomeはとても簡単に導入できますので、ぜひ挑戦してみてください。きっとかっこいいブログができます!

では!

スポンサーリンク

スポンサーリンク

コメントを残す