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=”fa fa-twitter“></i>かうたっく</a>

表示かうたっく

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

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

Font AwesomeのTwitterアイコン画面

参考FontAwesome|Twitter

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

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

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

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

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

実装方法は、下記。

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

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

表示つぶやく

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

参考FontAwesome|Examples

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

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

つぶやく

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

.tw:before {
    font-size: 3.4em;
}
.fa-5x {
    font-size: 5em;
}

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

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

コメント

トップへ戻る