人気ブログやサイトなどで、アイコンフォントと呼ばれる , , , , などのアイコンが使われていることを良く目にします。 アイコンフォントは、サイトのコンテンツのちょっとしたアクセントにもなります。
アイコンフォントは、無料で手軽に利用することができます。WordPressでは、Font Awesomeなどを利用するプラグインがあり、それらで手軽に利用可能です。
Blogger等の無料ブログでも、Font Awesomeを始めとして、アイコンフォントを簡単に導入することができます。
[post_ads]
Font Awesomeをブログに導入する方法
アイコンフォントのリーディングサプライヤーのFont Awesome のBloggerでの導入手順を以下に紹介します。事前準備
上記コードを設置する前に、テンプレートのソースコード内を"fontawesome"で検索して、スクリプトコードが設置されているか事前に確認します。
高機能のテンプレートの多くは、Font Awesomeのアイコンフォントを標準でサポートしています。既にスクリプトコードが設置されている場合は、スクリプトコードの設置は必要ありません。
高機能のテンプレートの多くは、Font Awesomeのアイコンフォントを標準でサポートしています。既にスクリプトコードが設置されている場合は、スクリプトコードの設置は必要ありません。
備考：
Blogger MagOneテンプレートは、標準でFont Awesomeをサポートしています。スクリプトコードの設置は必要ありません。
Blogger MagOneテンプレートは、標準でFont Awesomeをサポートしています。スクリプトコードの設置は必要ありません。
スクリプトコードの設置
Font Awesomeのアイコンフォントを読み込むための以下のスクリプトコードをコピーして、サイトの<head>タグ内に貼り付けます。[<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>]設定は以上です。上の一行を加えるだけで、アイコンフォントが使えるようになります。
Font Awesomeの使い方
Font Awesomeは、インライン エレメント（<i>タグ）を使用して記事内に設置します。記事内でアイコンフォントを加える場合は、編集モードをHTMLにして、アイコンフォントを加える場所に入力します。以下はコードの例です。サイズを大きくしたり、小さくしたり、色を付けることができます。[<i class="fa fa-coffee"></i>
<i class="fa fa-coffee" style="font-size:48px;"></i>
<i class="fa fa-cofee" style="font-size:60px;color:red;"></i>]
備考：
<head>タグ内に設置するスクリプトコードのバージョンで、クラス(class)の設定が若干異なります。
ここで紹介する例は、バージョン4を使用しています。"<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">"を設置した場合です。MagOneでの使用例です。上で紹介したスクリプトコード（バージョン5）の場合は、"<i class="far fa-coffee"></i>"になります。
<head>タグ内に設置するスクリプトコードのバージョンで、クラス(class)の設定が若干異なります。
ここで紹介する例は、バージョン4を使用しています。"<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">"を設置した場合です。MagOneでの使用例です。上で紹介したスクリプトコード（バージョン5）の場合は、"<i class="far fa-coffee"></i>"になります。
上記は使用の一例です。アイコンフォントは色々な使い方ができます。使用方法について詳しくは、Font Awesome のページをご参照下さい。
コメント