2016/10/27

WordPressなどCMSでFont Awesomeアイコンフォントを超簡単に導入!タグ前にCSSで書く方法+追加された最新アイコンが表示しない原因と解決方法

テーマにアイコンフォントFont Awesomeを導入してないとき、簡単に導入できる方法として、リンクタグを入れる方法をWordPressを例に紹介しています。

これで要素a・hタグの前にCSSでアイコンを設置して装飾も超簡単です!またバージョンアップで追加されたアイコンフォントが表示しない原因と解決方法も同時に見ていきましょう^^

スポンサーリンク

WordPressのheader.phpを編集する。

外観テーマの編集より、header.phpの<head>内にの<meta …>というmetaタグの下に、linkタグ<link …>があります。

Font Awesomeのlinkを置く場所

Font Awesomeのlinkを置く場所

そこに下記のコードを埋め込んでください。

超簡単に設置完了しましたっ^^

※この方法はCMSというブログサービスで使えますが、使えなかったらCMSではないってことですね。。

アイコンフォントFont AwesomeをCSSで表示させる

気に入ったアイコンフォントをCSSで指定して使うのも簡単です。アイコンフォント|Font Awesomeから好きなアイコンを選んで、例えばハートをクリック!すると、f004と文字あがりますよね。

アイコンフォントのCSSのコードの見つけ方

例えばリンクaの前:beforeにハートを入れるなら \f004コードを入れてください。f004の前にBackSpaceキー横の円マーク\バックスラッシュをいれてフォントファミリーを下記のように指定すればOKです。

hタグなどはたくさんあるので、クラス属性で名前付けて指定すれば、他のhタグとが反映することがないので良いですね^^

※フォントの大きさや色などなど、ココで変更可能です。

HTMLタグは<h2 class="icon">としてCSSのセレクタは.icon:beforeですね。クラス名の書きかた関連は、下記をどうぞ^^

LINKHTMLの要素!属性、属性値とは!?class名を複数設定するHTMLの書き方

Font Awesomeがバージョンアップしたときの対処

ときどきFont Awesomeはバージョンアップしてアイコンを追加します。2016年10月24現在はバージョンが4.6.3。

追記2016/10/26確認したらバージョン4.7に変更してますが、最新版のアイコンフォントを使用しない場合は4.6.3を指定すれば表示されますよ^^

<a href="http://fontawesome.io/" target="_blank">Font Awesomeトップページ</a>:Versin4.6.3と確認できる

Font AwesomeのトップページでVersin4.6.3と確認できる

私のは以前4.4.0だったので、リンクタグ内にあるアドレスの数字を4.4.0から、4.6.3に変更しました。今後のバージョンアップのときの参考まで^^

最新のアイコンフォントが使えない原因

最新のアイコンフォントが表示されない場合があります。それはバージョンが古いと表示されません。上述のように最新のバージョンの数字を入れたら反映されて解決です!

なぜ表示されない!?と思ったら、最新のものにバージョンを変更してくださいね^^

さいごに

アイコンフォントをCSSで簡単に装飾するCSSの書きかたと、超簡単な導入方法でした。アイコンフォントを使って、ブログをほんのり個性的に、ユーザーさんにも解りやすくカスタマイズしてください^^

では、かうたっくでした。

書いた人:かうたっく

何も知らない初心者ですが、WordPressでブログを始めました。 ブログの技術系でつまずいたエラーを経験したことからエラー関連を、初心者が初心者に向けて分かりやすい言葉で書いてます★子どもの喘息様気管支炎や、幼い子どもとの生活ページなどよく読まれる雑多ブログを運営中^^♪ご意見、感想、質問はお問い合せよりお待ちしています。

Twitterフォロー