『LION MEDIA』テキストリンクの先頭にFont Awesome導入でアイコン表示する方法

こんにちは、トッド（Todd）(@ThreeFrogblog)です。

WordPressテーマ『LION MEDIA』には、デフォルトで16種の【IcoMoon】のアイコンが含まれています。

僕は、アイコンの追加を試みましたが上手くいきませんでしたので、Font Awesomeを使う事にしました。

今回は、「Font Awesome」を導入してテキストリンクにアイコンを付けてみたので良ければ参考にしてください。

Font Awesomeを読み込み導入

Font Awesomeのアイコンを使用する方法はいくつかありますが

今回は、読み込んで使えるようにしたいので、まずはWordpress管理画面から「外観」→「カスタマイズ」→「高度な設定」に進んで下さい。

すると、【〈/head〉直上の自由記述エリア】と書かれているところがあるので、以下のコードをコピペしてください。

HTML

<link href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet">

2018年8月現在、Font Awesomeのバージョンはv5.2.0です。

変わっている場合があるのでバージョンに合わせて上記コード内の部分を変更してください。

以上で導入は完了です。

使い方は簡単で、

今回は『LION MEDIA』の記事内にあるテキストリンクに装飾を施していきたいと思います。

完成イメージはこの記事内で使われているテキストリンクの装飾と同じになります。

CSS

.content a{
	color:#ffbf69;
	text-decoration:none;
}
.content a:before {
	font-family:"Font Awesome 5 Free";
	content: "\f0c1";
	font-weight: bold;
}

基本的には▲このコードをコピペすることで反映されます。

色やアイコンの種類を変更して使ってみてください。

Font Awesomeのサイトのところで

たくさんのアイコンを見比べる事が出来るのでそっちで精査してください。→アイコンデモページ

「IcoMoon」からアイコンを追加するよりも、「Font Awesome」の方が簡単なのでオススメです。

font-family: “Font Awesome 5 Free”;とcontent:”????”;を使えばどこにでもアイコンをつけることが出来るので良いです。

最後まで読んでいただき有難うございました

Fin.