Font Awesomeでフリー版のアイコンを指定しているのにちゃんと表示されるアイコンとされないアイコンが有る場合の原因と対策について覚書。
発生した問題
WordPressのテーマにCocoonを使用していてスキンに「Silk」を設定したら、スキン指定を「なし」にしていたときにはきちんと表示されていたFont Awesomeのアイコンの一部が表示されない状態になった。
もちろんフリー版で表示できるアイコンを指定している。
こんな感じ。
本当は、こんな感じにしたい。
Font Awesomeが表示されないときの確認事項
Font Awesomeが表示されないとか、四角い豆腐アイコンで表示される場合などで私が記憶していた基本的なチェック事項は以下の通りです。
- 使用するFont Awesomeのバージョンが正しいか
- フリー版のFont Awesomeのアイコンを指定しているか
※ font-family の指定と content の指定がフリー版を正しく指定しているか
Cocoonは、Font AwesomeのVersion 4とVersion 5のどちらを使うかを設定の[全体]で指定できます。
今回はVersion 5を指定しており、他のCocoonを使って同じカスタマイズをしているサイトでは問題なく表示されています。
指定しているアイコンもすべてフリー版なので、上記2つの確認点は問題ないはず。
今回の原因
きちんと表示されているサイトと表示されないサイトとの違いは、スキンの指定をしていることだけです。
表示されないサイトはスキンに「Silk」を指定しています。
スキンの指定を「Silk」から「なし」に変更するときちんと表示されるようになることから「Silk」のCSSに原因があることがわかります。
「Silk」スキンは、サイドバーのCSSが以下のように設定されています。
.sidebar h2,
.sidebar h3 {
padding: 0.4em;
background: repeating-linear-gradient(
-45deg,
rgba(187, 187, 187, 0.1),
rgba(187, 187, 187, 0.1) 3px,
rgba(221, 221, 221, 0.1) 3px,
rgba(221, 221, 221, 0.1) 6px
);
text-align: center;
font-size: 1.05em;
font-weight: 500;
border-width: 2px 0 0 0;
border-style: solid;
border-radius: 2px;
}今回のカスタマイズは、「Silk」スキンのほとんどのカスタマイズを変更した上で、サイドバーのタイトルの前にFont Awesomeのアイコンを表示したいので以下のようなCSSを設定しています。
#sidebar h3 {
border-bottom: 5px solid #E7E7E7;
border-top:0px;
text-align: left;
padding: 5px 0;
position: relative;
background: #FFFCF9;
color: #484848;
}
#sidebar h3:after {
content: "";
display: block;
line-height: 0;
overflow: hidden;
position: absolute;
left: 0;
bottom: -5px;
width: 25%;
border-bottom: 5px solid #1BABEC;
}
#search-4 h3:before {
font-family: "Font Awesome 5 Free";
margin-right:10px;
font-size:120%;
color:#37A5CC;
content:"\f002";
}原因を探るために「Silk」スキンのサイドバーのH3のCSSの指定をchromeのデベロッパーツール(F12)を使って一つ一つ指定を無効化していきます。
すると font-weight の指定を無効化した瞬間Font Awesomeのアイコンが正しく表示されるようになりました。
結果的に原因は、 font-weight の指定がFont Awesomeが表示される値になっていなかったことでした。
Font Awesomeで指定するフリー版のアイコンは、表示できる font-weight の指定が決まっているようです。
以下変更後のCSS
#sidebar h3 {
border-bottom: 5px solid #E7E7E7;
border-top:0px;
text-align: left;
padding: 5px 0;
position: relative;
background: #FFFCF9;
color: #484848;
font-weight: bold;
}ということで、CSSに font-weight の指定を追加して正しく表示されるようになりました。
ちなみにサイドバーのH3の before の中で指定しても良いです。
#search-4 h3:before {
font-family: "Font Awesome 5 Free";
margin-right:10px;
font-size:120%;
color:#37A5CC;
content:"\f002";
font-weight: bold;
}フリーで使えるアイコンとPro版でないと使えないアイコンの判別
Font Awesome のアイコンは、同じアイコンでも複数のデザインが存在する場合があります。
例えばハートマーク(f004)であれば、フリーで使えるのは左の2つのスタイル、塗りつぶしと塗りつぶしなしのハートになります。
画面上4つのスタイルが表示されているのになぜフリーは左2つのスタイルかというと、以下のように右の2種類をクリックするとボタンの文字列が「Start Using This Icon」から「Start Using This Pro Icon」に変わるため、これはPro版でないと使えないということがわかります。
下の画面のようにFont Awesomeの検索画面で条件に「Free」を付けて検索して表示されたアイコンでもスタイルによってはPro版でないと使えないものがあることに注意してください。
使用するアイコンの指定について
ハートマークについて4つのスタイルがあって、そのうち2つのスタイルがFree版として使えるという話をしましたが、どちらを使うかは、font-weight の指定で使い分けができます。
500までは塗りつぶしなし、600以上の指定をすると塗りつぶしのハートになります。
font-weight: bold; の指定は、font-weight: 700; と同じです。
まとめ
Font Awesomeがうまく表示されない場合は、以下の3つを確認しましょう。
- 使用するFont Awesomeのバージョンが正しいか
- フリー版のFont Awesomeのアイコンを指定しているか
- font-weight の指定がFont Awesomeが表示できる指定になっているか
コメント