テーマ MH Magazine Lite の更新で、
投稿記事内のメタ情報やタグ部分にアイコンが表示されるようになったなあ、
とぼんやり思っていたのだが、カスタマイズを見直していて、
それがアイコンフォントの定番？ Font Awesome の組み込みによっていることに気付いた。
HTMLで直接挿入
Font Awesome は人気のフリーWebフォント。組み込み自体そう難しくはなさそうだけれど、前準備も何もなしにいきなり利用できる、というのは楽だ。使い方の解説は山ほどあるし。
超簡単！アイコンフォント Font Awesomeの使い方
フォントアイコンの使い方 (FontAwesome)
なるほど、公式サイトのリストにあるタグを一行いれるだけか。簡単簡単…。
テーマカスタマイズの記事ネタに、SNSのフォローボタンを作ってみた。ウィジェットの［テキスト］への書き込みで問題なく表示される。で、そのことを記事に書いている際、エディターをテキストからビジュアルに切り替え、またテキスト表示に戻ると、れれれ？？？書き込んだタグがごっそりと消えている。
最初はspanタグが消えるWordPress（tinymce）の仕様かと思い、functions.php に回避タグを書き込んでみたりしたが、いっかな効かない。では i タグが問題？ と調べていてやっと理由が分かった。
HTMLでは、たとえばフォート（砦）アイコンはこう書けとある。
<i class="fa fa-fort-awesome"></i>これで何が問題かというと、i タグ（でもspanでも同じだ）がコンテンツを含んでいない空要素であること。 なので、以下のように改行なしのスペースコードをいれればOK。
<i class="fa fa-fort-awesome"> </i>CSSで特定の部分に表示させる
アイコンフォントではプラグインを入れていたこともあった。ビジュアルエディタのリストから挿入できてなかなか便利ではあった（Virtueではデフォルトでこれが可能）。今にして思えば、たぶんあれも Font Awesome を拡張するプラグインだったのだろう。
プラグインを外してしまったのは、これらのアイコン、記事の本文中にあれこれ挿入するかというと、そうは使わないからであった。このたびもよく考えたら、せいぜい見出しやリスト、外部リンクの修飾程度だろう、というのが結論。
であるならば、CSSで設定してしまえば以後HTMLコードを書き込む手間もなくなる。
「Font Awesome」のUnicodを 「:before」「:after」に挿入する
WebフォントのFont AwesomeをCSSでアイコンとして利用する
早速やってみた。h6とli ではすんなりいった。content に各フォントのユニコードを指定する。ユニコードの頭にはバックスラッシュ\(￥と表示される場合も）を入れ、””で囲む。
.entry-content ul { list-style-type: none!important; }
.entry-content ul li:before {
content: "\f0da";
font-family: FontAwesome;
color: #8f7c6d;
margin-right: 4px;
}
.entry-content h6:before {
content: "\f054";
font-family: FontAwesome;
olor: #e5a5a8;
margin:0 3px 0 2px;
}が、リンク a:before がなぜか反映されず、頭を抱えた。解決は偶然覗いた英語サイト（いつもは日本語しか検索しないのに）にあった。position:relative;を指定しておくべし、というのでやってみたらOKとなった。
.entry-content a[target="_blank"] {
position:relative;
}
.entry-content a[target="_blank"]:before {
content: "\f101";
font-family: FontAwesome;
font-weight: normal;
margin-right: 4px;
}
コメント