Twenty Seventeen、Font Awesome をセットアップ

“Font Awesome”とは

“Font Awesome”は、オープンソースのアイコンフォントで、←こういうアイコンをフォントとして使用できます。

2017年7月9日現在、version 4.7.0で、675アイコンが利用できます。詳しくは「The Icons

導入方法はいろいろですが、私はこのブログではCDNを利用、テスト用ブログではプラグイン「Better Font Awesome」を使用しています。この他、ダウンロードして使用する方法があるみたいです。リストは→「Font Awesome, Get Started」をご参照くださいませ。

CDNのセットアップ

テーマによっては、初めから使える状態になっている場合もあるみたいですが、Twenty Seventeenでは、残念ながら初期状態では使用できないので、追加が必要でした。

↓検索すれば、もっとシンプルな方法が見つかります。

私は、「Font Awesome, Get Started」にて、e-mailにコードを送付し、届いたメールの指示に従い、head部分に初期コードを貼り付けた後、Font Awesomeでアカウントを取得し、そこで得られたCDNコードをhead部分に差し替える方法で使用しています。

初期状態では、java scriptのコードになっていますので、管理画面でCSSを選択して、CSS用のコードを取得しました。

※繰り返しですが、ネット上にはもっとシンプルな方法が転がっていましたよ。

色を変更したい場合

初期値のアイコンは、白黒ですが、タイトルのワードプレスマークなどのように色を付けたいときは、アイコンのページでクラス名を調べて、下記のようにCSSで追記できます。Color:#xxxxxx;のxの部分は、色見本などで選んでくださいね。

オレンジ部分 Font Awesome のクラス名
ワードプレスロゴのclass名は、fa-wordpress
.fa-wordpress {
	color: #0087be;
}

その他、”Font Awesome”利用メモ

私の利用法は下記のとおりです。

  1. ”外部リンク”と内部リンクのアイコンの自動化」に利用
  2. 見出し(h1~h6)のデザイン」に利用

コメントを残す

メールアドレスが公開されることはありません。