このサイト「プログラミング備忘録」はwordpressテーマ「Cocoon 」を使っているのだが別のサイトでは「Luxeritas」を使っている。
その「Luxeritas」を使っているサイトで最近気が付いたのがfont awesomeの表示がおかしいこと。
具体的には[page-top]の矢印フォントが正常に表示されていない。
今回はこれを解決する。
どんな状態か？
スマホで自分のサイトをチェックしていて「あれ、おかしい？」と気づいたのはこの「ページトップボタン」。
↓本来ならこう表示されるのだ。
最初
なんか矢印じゃなく変な柄になってる〜
と思ったんだけどよ〜く見ると[F062]と表示されている。
この矢印のフォントはfont awesomeを使っている。
font awesomeが正しく読み込めていないのだろうか？
iPadで見ると変な表示ではなく表示自体がされていない。
font awesomeとは
font awesomeについて軽く説明しておきます。
わかっている方は読み飛ばしてください。
font awesomeとは
↑このようなアイコンをアイコンフォントという文字として使うことができるツール。
文字扱いなのでフォントsize、フォントweight、フォントcolorなどが自由に指定出来るわけです。
膨大な数のアイコンフォントが用意されていて無料で使えます。
有料にするとさらに大量のアイコンフォントが使えるようになります。
font awesomeのサーバーから読み込んで表示させるのでアイコンフォントをダウンロードする必要もありません。
読み込みは自分で設定したりwordpressのプラグインを使ったりするのですが、Luxeritasではfont awesomeの読み込みや設定をやってくれます。
今回のページトップボタンにアイコンフォントを使う場合もLuxeritasカスタマイズパネルで操作出来てしまいます。
Luxeritasの設定
話は戻ります。
このページトップボタンのfont awesomeはLuxeritasで設定している。
設定を調べよう。
wordpressの管理画面サイドバーからLuxeritasカスタマイズ（外観）を開く。
ページトップボタンの設定は「細部の見た目」という項目で設定する。
ここでページトップボタンに表示するテキストとアイコンが設定出来る。
特に問題はないみたい。「fa-arrow-up」が設定されている。
font awesomeのバージョン
ページのソースを調べて該当するCSSを見ても原因がわからない。
ネットで調べていると「font awesomeのバージョンが4から5に上がったときに表示がおかしくなる」という情報を見つけた。
それによるとCSSで「font-weight」を設定してやらないと正常に表示されないらしい。
じゃ試してみるか！
Luxeritas追加CSS
LuxeritasではCSSの追加が簡単に出来る。
再びLuxeritasカスタマイズ（外観）を開く。
一番下の「追加CSS」を開く。
ページトップボタンのフォントはid要素[page-top]内の[i]要素で設定されている。
その[i]要素に対してCSSを書く。
[font-weight:900]としてやればいいらしい。
・・・なんも変わらん
う〜ん、わからん。
自分のサイトで他にLuxeritasを使っているサイトを見てみた。
問題なくページトップボタンのフォントは表示されている。
CSS設定を調べると[font-weight:900]が設定されている。
同じLuxeritasでもバージョンが違うのかもしれない。
今回の表示がおかしいLuxeritasサイトとは該当するCSSが違う。
[font-weight:900]の他に
[font-family: ‘Font Awesome 5 Free]
という記述もあった。
Luxeritas追加CSSに戻って[font-family: ‘Font Awesome 5 Free]を足してみる。
出来た！
だがしかし何故か「イタリック」になっている。
フォントが斜体になっているのだ。
CSSを見るとユーザーエージェントの設定で[i]要素に対して
font-style:italic
斜体が設定されている。
細かい事は後回しでとにかくfont-style:italicを解除しよう。
またLuxeritas追加CSSに戻って
font-style:normal
を書き足す。
完璧！
とりあえず解決です。
原因がなんだったのかはわかりません。
推測するとLuxeritasの古いバージョンを使っていたためにfont awesomeのバージョンが4から5に上がった事への対策がされていなかったため、こういう事かなと思います。
Luxeritasを使っている別サイトでは問題なくfont awesomeが表示されているし、CSSを見るとちゃんと
[font-weight:900]
[font-family: ‘Font Awesome 5 Free]
この二つが記述されているのでやはりLuxeritasの古いバージョンのせいなのでしょう。
追記
Font Awesomeのバージョンは6になるようですね。
Luxeritas対応してくれっかな？
以上「Luxeritasでfont awesomeの表示がおかしくなった件」の解決策でした。