テーマ更新
obliqueテーマを最新版(2.0.11)にアップデートしたところ、アイコンに使っている「Fontawesome」が4.7から5.0へ変更されていて、これまでの指定ではアイコンが表示されなくなってしまった。直後にバージョン2.0.12がリリースされたので、さらに更新してみたが、結果は変わらず。そもそもFontawesome 5.0ではこれまで使っていたアイコンが使えなくなっているし、どうやらフォント指定そのものが上手くいっていないのか、アイコンが表示されない。修正されるのを待つのも一つの手だが、子テーマ側で対応することも可能なので、ここでは子テーマでの対応方法について説明。
子テーマでフォント指定する方法はいくつかあるが、このサイトでは以下の指定方法を使っている。
@font-face { font-family: 'Fontawesome'; src: url('./fonts/fontawesome-webfont.eot'); src: url('./fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), url('./fonts/fontawesome-webfont.woff2') format('woff2'), url('./fonts/fontawesome-webfont.woff') format('woff'), url('./fonts/fontawesome-webfont.ttf') format('truetype'), url('./fonts/fontawesome-webfont.svg') format('svg'); font-weight: 400; font-style: normal; }
フォント自体は子テーマの「oblique-child/fonts」フォルダにダウンロードコピーしておく必要がある。Fontawesome公式サイトから過去バージョンをダウンロードする。対象ファイルは以下の通り。
-rw-r--r-- 1 apache 134808 4月 16 11:47 2018 FontAwesome.otf -rw-r--r-- 1 apache 165742 4月 16 11:47 2018 fontawesome-webfont.eot -rw-r--r-- 1 apache 444379 4月 16 11:47 2018 fontawesome-webfont.svg -rw-r--r-- 1 apache 165548 4月 16 11:47 2018 fontawesome-webfont.ttf -rw-r--r-- 1 apache 98024 4月 16 11:47 2018 fontawesome-webfont.woff -rw-r--r-- 1 apache 77160 4月 16 11:47 2018 fontawesome-webfont.woff2
これで以前の指定のまま、各種アイコンが表示されるようになる。テーマの「追加CSS」では以下のように指定することが出来る。
.widget_meta li::before { font-family: Fontawesome; font-size: 15px; margin-right: 5px; content: "\f204"; } .widget_meta li:hover::before { font-family: Fontawesome; font-size: 15px; margin-right: 5px; content: "\f205"; }
この設定はサイドメニューのメタ情報エリア、リスト要素前のアイコン指定。