Font AwesomeをWordPressで使う方法

ブログ作成

皆さまごきげんよう。ブログを製作しているとサイドバーや本文などにアイコンを入れたくなったりしますよね。そんな時にオススメなサイトがFont Awesomeです。こちらのサイトはフリー(無料)でなんと1557種類、有料のPROをゲットすると7722種類(年間99💲)のアイコンが使用出来ます。しかもWordpressでのテーマCocoonではFont Awesomeが標準装備されているので設定もラクラク!それではWordPressでのFont Awesomeの使い方を説明いたします。



 

Font Awesome をWordpressで使う方法

 

バージョンアップのFont Awesome5を設定

ダッシュボードのCocoon設定で全体をクリック

 

画面を少し下へスクロールすると出てくるサイトアイコンフォントでFont Awesome5を設定

 

 

 

Font Awesomeからアイコンを選ぶ

Font Awesome のサイトからIconをクリックし、好きなアイコンを選ぶ (有料のPROを使いたい方はPROを購入してください)

Font Awesome  ←こちらかどうぞ

 

 

 

アイコンのHTMLをコピー

投稿記事の本文に入れたい場合はテキストに切り替えコピーしたHTMLを添付します。

 

 

サイズや色などカスタマイズしたい時はコピーしたHTMLのアイコン名の後にそれぞれのコードを足します。

<i class=”fas fa-spider □□□□”></i>  ← こんな風に

 

サイズ変更

一番小さなものは何もコードを足さない。から、fa-2x, fa-3x とお好きなサイズを足すだけでございます。

<i class=”fas fa-spider fa-2x“></i> という感じに

 

 

 

色を変更

HTMLでmy-color (colorの部分にblue,red,yellowなど入れる)を足し、投稿編集ページを下にスクロールをするとカスタムCSSの枠があるので、そこに.my-red{color :#AA0000} とCSSのカラーコードを入れます。

 

 

HTMLは<i class=”fas fa-spider my-red fa-2x“></i> とういう感じに (こちらのコードでは大きさのコードが足されています。)

でも、

これだとwordpressに空タグを自動的に削除するというシステムがあるのでこのコードが削除されてしまいます。 <i class=”fas fa-spider my-red -2x”>ここ</i>の部分に何も入力がないのでミスと判断されてしまうのです。(私はこれで何時間もつまづいてしまいました💧)なのでここに空白のコードを入れます。すると削除されなくなります。

<i class=”fas fa-spider my-red fa-2x”>&nbsp;</i> という感じに

 

   

 

サイドバーカテゴリーにアイコンを入れる場合

外観からカスタマイズをクリックすると追加CSSの枠があるのでそこにコードを入れます。

ウェジットのカテゴリの前にアイコンを入れる→ widget_categories ul li a::before{                                                   フォンとのサイト名→  font-family: “Font Awesome 5 free”;                                             アイコンのunicode→  content: “\f281”;                                        色をつけたい時は選んだカラーコードを入れる→   color: #880000;                                                                         アイコン右のスペース幅→ margin-right: 0.3em;
フォントの→ font-weight: 900;                                                                                     }

アイコンのunicodeはアイコンのページの左上あたりのここにあります。

 

フォントサイズの大きさは決まっていてFreeやSolid の場合は900BrandsやRegularの場合は400と設定しなければダメなようです。

FreeやBrandsの見分け方はここを見ます。

 

 

 

 

ブログに装飾したい時にとても簡単につけられるFont Awesomeのアイコンぜひ活用してみてください。

 

 

 

スポンサーリンク
スポンサーリンク
スポンサーリンク
スポンサーリンク
スポンサーリンク
スポンサーリンク
ブログ作成
voyageえむをフォローする
Voyageえむ
タイトルとURLをコピーしました