テーマ更新

閲覧数: 15(0)

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";
}

この設定はサイドメニューのメタ情報エリア、リスト要素前のアイコン指定。

カテゴリーIT閑話, 公開タグ,
関連記事
パンくずリスト詳細
2020年5月12日

テーマの「マイナーチェンジ」に伴って「パンくずリスト」の仕様を若干変更しました。一つ前のテーマではパ  続きを読む

カテゴリーを制限する
blank
2020年5月11日

過去に何度も書いた「カテゴリー制限」の話、元はと言えば初期に書かれた「非公開」の記事が原因です。トッ  続きを読む

マイナーチェンジ
blank
2020年3月23日

かれこれ一年近くほったらかしだったので、気合をいれて「テーマ変更」と思っていたのですが、、、いろいろ  続きを読む

6月の検索ワードまとめ
blank
2019年6月30日

6月の検索ワードのまとめです。 意外なところで「zabbixダウングレード」が複数回検索され、単独の  続きを読む

アクセシビリティ対策
blank
2019年6月23日

テーマカスタマイズの一環で、トップページに一覧表示されている「写真を左右交互に表示する」ようにした際  続きを読む

dockerとproxy
blank
2019年6月18日

dockerやdocker-composeをプロキシ環境下で使うのに苦労したので忘れないようにメモし  続きを読む

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください