WordPressテーマSANGOの質問

有料版FontawesomeのCSS記載が表示されない

マチノタケオ

2019/12/06

有料版のFontawesomeを導入し、ヘッダー部分に必要な記述を記載しました。
以下の記載をし、ボックス内のタイトルにつけるアイコンを有料のアイコンに変更しようとしたところ、エラーになり□が表示されている状況です。

.box29 .box-title:before {
padding-right: 4px;
font-family: “Font Awesome 5 pro”;
font-weight: 900;
content: “\f762”;
animation: flash 2s linear infinite;

SANGOにデフォルトでヘッダーに記載されている
Fontawesomeを読み込むコードを削除する必要があるのかな？
と推測していますが、いかがでしょうか？

header内を見ても、SANGOにFontawesomeに関する記述が見つからないので、
記載のあるファイルを教えていただきたくお願いいたします。

SANGOでFontAwesome4.7から5へと切り替える方法と注意点

コメントへの回答

サルワカくん

2019/12/06

なるほど、
SANGOで有料版のFontAwesomeを使う場合には、以下の2点を行うと良いと思います。

①SANGOのFontAwesomeデータの読み込みの解除
解除しなくてもおそらく動きますが、二重読み込みはパフォーマンス的によろしくないので、解除しておくのが良いと思います。
SANGO v1.8.7以降をお使いの場合は、以下のコードを子テーマのfunctions.phpに追加すれば読み込みを解除できます。

function sng_font_awesome() {
  return;
}

②デフォルトのfont-family: "Font Awesome 5 free";を上書き
CSSの疑似要素でアイコンを表示している箇所については、デフォルトでfont-family: "Font Awesome 5 free";が適用されています。この指定がfont-family: "Font Awesome 5 Pro";より適用の優先順位が高くなってしまっていることが今回の問題の原因かと思います。
（もともとSANGOはFontAwesome4.7に対応しており、5へと互換性を保ちつつ移行した関係でCSSが強く利くようになってしまっています）

以下のCSSを［外観］⇒［カスタマイズ］⇒［追加CSS］に貼り付けることで、疑似要素アイコンをfont-family: "Font Awesome 5 Pro";に切り替えられると思います。

/* override style.css */
.fa5 .has-fa-before:before,
.fa5 .has-fa-after:after,
.fa5 #breadcrumb li:after,
.fa5 #breadcrumb li:first-child a:before,
.fa5 .divheader__btn .raised:before,
.fa5 time.updated:before,
.fa5 time.pubdate:before,
.fa5 .entry-content blockquote:before,
.fa5 .widget ul li ul li a:before,
.fa5 #reply-title:before,
.fa5 .footer .widget ul:not(.my-widget) li a:before,
/* override entry-option.css */
.fa5 .hh30:before,
.fa5 .hh31:before,
.fa5 .hh32:before,
.fa5 .hh34:before,
.fa5 .box23:before,
.fa5 .box23:after,
.fa5 .box26 .box-title:before,
.fa5 .box27 .box-title:before,
.fa5 .box29 .box-title:before,
.fa5 .box30 .box-title:before,
.fa5 .li-chevron li:before,
.fa5 .li-check li:before,
.fa5 .li-yubi li:before,
.fa5 .li-niku li:before,
.fa5 .entry-content .quote_silver:after,
.fa5 .reference .refttl:before,
.fa5 .memo_ttl:before,
.fa5 #toc_container .toc_title:before,
.fa5 .ez-toc-title-container:before,
.fa5 .cstmreba .kaerebalink-link1 a:before,
.fa5 .booklink-link2 > div a:before,
.fa5 .follow_btn .Feedly:before,
.fa5 .follow_btn .Website:before,
/* override sango-gutenberg css */
.sgb-acc__title {
  font-family: "Font Awesome 5 Pro" !important;
}

よろしくお願いします。