WordPressテーマ変更!SimplicityからCocoonへ
スポンサーリンク

WordPress・CMSでFont Awesomeアイコンフォントを導入!最新アイコンが表示しないとき、バージョンアップ方法付き

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

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

スポンサーリンク

Font Awesomeアイコンフォントの導入方法

Font Awesomeを一番かんたんに導入する方法は、アイコンフォントのリンクをヘッダーに挿入するだけなので、WordPress初心者も超簡単に導入できます。

  • 実装方法は、WordPressのダッシュボード、外観よりテーマの編集をクリック

右側にheader.phpがあるので、選択します。子テーマを使っていてない場合は、親テーマのheader.phpを編集してください。

更新が沢山あるテーマのばあい、FTPソフトで親テーマのheader.phpをダウンロードして、子テーマのheader.phpにアップロードすれば、管理画面に現れます。

header.phpの場所が不明なら、下記をチェックしてくださいね。

LINK簡易的バックアップ!初心者用WordPressファイル内説明と、5秒で復元する方法

下記のように<head>内の<meta …>というmetaタグの下に、linkタグ<link …>があります。

Font Awesomeのlinkを置く場所

Font Awesomeのlinkを置く場所

上記あたりにアイコンフォントのコードを埋め込んでください。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">

これで設置完了^^

※この方法はCMSというブログサービスWordPressなどで使えます。

Font Awesome新バージョン:v5.0.2の場合

LINKFont Awesome Free

上記リンク先より、以下のコードをコピペ!

<script defer src="https://use.fontawesome.com/releases/v5.0.2/js/all.js"></script>

head内に貼り付けます。貼り付け場所は、<link rel="stylesheet"のあたりでOK!

アイコンフォントをCSSで指定しブログに表示

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

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

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

a:before {
	content: "\f004";
	font-family: FontAwesome;
}
h:before {
	content: "\f004";
	font-family: FontAwesome;
}

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

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

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

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

LINK内部リンクを見分けるマークを付けたい!記号・アイコンフォント・画像を表示するカスタマイズ、CSSのコード

Font Awesome新バージョン:v5.0.2の場合

新バージョン5.0.2のときは、font-family: FontAwesome;では反映しません。

font-familyは、Font Awesome 5 Freeと指定してください。

font-family: "Font Awesome 5 Free";

指定例は以下の通りAppleの場合は\f179新聞の場合は\f1eaと上記:今まで通りの方法でOK!

#h-top .snsp:before {
	font-family: "Font Awesome 5 Free";
	content: "Follow \f1d8:";
	font-size: 1.6em;
	vertical-align: super;
	color: #ff8ab3;
}

上記CSSの使用例

PCビューの大画面版、TOPの右側に置いてます。

上記CSSの表示例

LINKFont Awesome 5 Freeのアイコン

アイコンフォントをHTMLで実装

たとえばツイッターのアイコンをWordPress投稿画面よりツイッターリンクに表示する方法を書いてみますね。

WordPressテキスト画面に下記をコピペしてください。

<a href=”https://twitter.com/kautakku” target=”_blank” rel=”nofollow”><i class=”fab fa-twitter“></i>かうたっく</a>

表示かうたっく

ピンクの部分はあなたのアドレス・表示させたい名前。

赤の部分は下記のコードを。

Font AwesomeのTwitterアイコン画面

参考FontAwesome|Twitter

上記画像class属性faは前のバージョン:新バージョンの場合は以下をどうぞ。

LINKFont AwesomeのTwitterマークが□四角になり消えた!最新版に対応させ表示させた方法

アイコンフォントの文字を大きくしたい場合

アイコンのフォントを大きくしたい時はタグ内に、fa-3x・fa-4xなどを打ち込みます。

FontAwesomeのもじを大きくするタグ

このようにfa-3xやfa-5xなど、タグ内に付けるとフォントの大きさが変わりますよ。

アイコンフォントの大きさ変更

実装方法は、下記。

<i class=”fab fa-twitter fa-3x“></i>

など赤字を追加して大きなアイコンを指定します。

表示つぶやく

このコードを書いてるページは下記です。

参考FontAwesome|Examples

さらにメチャクチャ大きくしたい場合、需要はないでしょうけど、こんな感じ。

<a href=”ここにツイートしたいリンク” target=”_blank” rel=”nofollow”><i class=”fab fa-twitter fa-5x tw”></i><span class=”b”>つぶやく</span></a>

つぶやく

ムチャクチャですけどサイゼリヤ平日ランチページで実装してますw

.tw:before {
    font-size: 3.4em;
}
.fa-5x {
    font-size: 5em;
}
ポイント

ちなみにAMP対応(検索からスマホで閲覧)している場合は□で表示されます。

現在はWordPressテーマCocoonの指定方法にてicomoonを利用し表示中❦

LINKテーマCocoonで記事内に入れたFont AwesomeのTwitterアイコンがAMPで表示しないので対応させた方法

<a href="ここにツイートしたいリンク" target="_blank" rel="nofollow" class="kau"><span class="icon-twitter b">つぶやく</span></a>

css

.kau {
	text-decoration: none;
}
.kau .icon-twitter:before {
	font-size: 13em;
}

表示はこんな感じで、スマホ検索流入のAMPページでも表示されます^^

つぶやく

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に変更しました。今後のバージョンアップのときの参考まで^^

/font-awesome/4.4.0/css/font-awesome.min.css
          ↓
/font-awesome/4.6.3/css/font-awesome.min.css

Font Awesome新バージョン:v5.0.2の場合は目次2.1へ

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

最新のアイコンフォントが表示されない原因は、バージョンが古いので表示されません。上述のように最新のバージョンの数字を入れたら解決!

さいごに

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

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

この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
カスタマイズ
フォローする
スポンサーリンク
スポンサーリンク
ビバ★りずむ

Comments

  1. TM_BB より:

    テーマ:twentyseventeenでどうやってもFont Awesomeが表示できなかったんですが、かう様の方法だと上手くいきました。
    いつもいつもお世話になっています。
    ありがとうございました。

  2. かうたっく かうたっく より:

    TM_BBさまに❦

    実は、けっこうシンプルな方法ですよね。上手くいったようで良かったです^^

    いつもイロイロ、お疲れさまです!

個人情報の取り扱いについてはリンク先をご確認ください。

ご了承・ご理解いただいた上でコメントお待ちしております?

トップへ戻る
タイトルとURLをコピーしました