テーマ更新

閲覧数: 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閑話, 公開タグ,
ページナビのテキスト
2021年4月1日

記事ページの下部に前後の記事(投稿)へのリンクが表示される仕様なのだが、「カテゴリーに制限」をかけて  続きを読む

閲覧数まとめ
blank
2021年3月25日

閃きついでに総合計と週合計をフラグで制御する方式に変更してみた。これまではベタに関数をまるまるコピー  続きを読む

閃きは大事だw
blank
2021年3月23日

このサイトは、あくまでもCMSであるWordPressの構築やクラウドであるAWSの運用ノウハウ取得  続きを読む

ElasticPress 3.5.6
blank
2021年3月19日

マイナーバージョンアップにも関わらず、検索スコアリングのパラメータが微調整された結果、期待する検索結  続きを読む

管理画面を制限する
blank
2021年2月22日

このサイトではネット上のさまざまな攻撃からの防御のため、Wordfenceプラグインの無料版を使用し  続きを読む

検索精度を高める
blank
2020年11月1日

検索ネタを連発するのはElasticsearchやElasticPressがバージョンアップした時の  続きを読む

スポンサーリンク

コメントを残す

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