テーマ更新

閲覧数: 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閑話, 公開タグ,
ElasticPress 3.5.6

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

管理画面を制限する
blank

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

閃きは大事だw
blank

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

緊急事態宣言で外出自粛になり...
blank

せっかくのゴールデンウィークなのに、2年連続で緊急事態宣言下となり、外出自粛中。暇なので小ネタで遊ぶ  続きを読む

ページナビのテキスト
blank

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

検索精度を高める
blank

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

スポンサーリンク

コメントを残す

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