テーマにアイコンフォント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を置く場所
上記あたりにアイコンフォントのコードを埋め込んでください。
<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の場合
上記リンク先より、以下のコードをコピペ！
<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と文字あがりますよね。
例えばリンク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の表示例
アイコンフォントをHTMLで実装
たとえばツイッターのアイコンをWordPress投稿画面よりツイッターリンクに表示する方法を書いてみますね。
WordPressテキスト画面に下記をコピペしてください。
<a href=”https://twitter.com/kautakku” target=”_blank” rel=”nofollow”><i class=”fab fa-twitter“></i>かうたっく</a>
表示かうたっく
ピンクの部分はあなたのアドレス・表示させたい名前。
赤の部分は下記のコードを。
上記画像class属性faは前のバージョン：新バージョンの場合は以下をどうぞ。
LINKFont AwesomeのTwitterマークが□四角になり消えた！最新版に対応させ表示させた方法
アイコンフォントの文字を大きくしたい場合
アイコンのフォントを大きくしたい時はタグ内に、fa-3x・fa-4xなどを打ち込みます。
このようにfa-3xやfa-5xなど、タグ内に付けるとフォントの大きさが変わりますよ。
アイコンフォントの大きさ変更
実装方法は、下記。
<i class=”fab fa-twitter fa-3x“></i>
など赤字を追加して大きなアイコンを指定します。
表示つぶやく
このコードを書いてるページは下記です。
さらにメチャクチャ大きくしたい場合、需要はないでしょうけど、こんな感じ。
<a href=”ここにツイートしたいリンク” target=”_blank” rel=”nofollow”><i class=”fab fa-twitter fa-5x tw”></i><span class=”b”>つぶやく</span></a>
ムチャクチャですけどサイゼリヤ平日ランチページで実装してますｗ
.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を指定すれば表示されますよ＾＾
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へ
最新のアイコンフォントが使えない原因
最新のアイコンフォントが表示されない原因は、バージョンが古いので表示されません。上述のように最新のバージョンの数字を入れたら解決！
最新のアイコンフォントが使えない場合 #Gush4 親のheader.phpの
<link rel=”stylesheet” href=”https://t.co/I7vBqooGnW“>
数字4.6.3に変更すれば使えるよぉ♪https://t.co/OR2Ua7zKNY
— かうたっくyade@ビバ★りずむ (@kautakku) 2016年10月18日
さいごに
アイコンフォントをCSSで簡単に装飾するCSSの書きかたと、超簡単な導入方法でした。アイコンフォントを使って、ブログをほんのり個性的に、ユーザーさんにも解りやすくカスタマイズしてください＾＾
それでは、かうたっくでした。
Comments
テーマ：twentyseventeenでどうやってもFont Awesomeが表示できなかったんですが、かう様の方法だと上手くいきました。
いつもいつもお世話になっています。
ありがとうございました。
TM_BBさまに❦
実は、けっこうシンプルな方法ですよね。上手くいったようで良かったです＾＾
いつもイロイロ、お疲れさまです！