STINGER8 Webフォント（Font Awesome）でアイコン

2017年5月17日2021年4月19日WordPress

stinger6からstinger8へ変更して「あれ」って思うことがありました。それは、投稿記事の日付アイコンは「カレンダー」なのに、一覧表示の投稿日の日付アイコンは「時計」になっていることに気づいたからです。

早速、stinger6の時の一覧表示のアイコンはどうなっていたか確認しました。時計でした。

「今まで何で違いに気づかなかったんだろう。」 まっ、気にしないとこんなもんかなってことですね。

それぞれアイコンの個所を見てみると、 “fa fa-clock-o"　と　"fa fa-calendar"　となっていたので書き換えてみたらうまいこと変更できました。

Webフォントの使い方など知らないので調べみると、 All Aboutサイトの次のページに詳しく解説されていました。

解説ページ：
「アイコンをWebフォントで表示！ Font Awesomeの使い方」

PR

クラウド型高速レンタルサーバー【スターサーバー】

レンタルサーバーの【スターサーバー】は、高速・格安のクラウド型レンタルサーバーです。オールSSD＆n ...

 https://www.star.ne.jp/post-2542/?ref=NA62x59m/

で、要点のみメモ。

1配布サイト：Font Awesome

から「No thanks,just download Font Awesome」を選択してダウンロード。
stinger8は「Font Awesome」をすでに使っているので、わざわざダウンロードして設定などしなくても使える。

2 ダウンロードした「font-awesome-4.7.0.zip」を展開すると、
css（フォルダ）
fonts（フォルダ）
less（フォルダ）
scss（フォルダ）
HELP-US-OUT.txt
に展開される。cssとfontsフォルダーを自分のサイトへアップロード。
cssフォルダーの中のファイルは「font-awwsome-min.css」だけでいい。

3 「Font Awesome」を使いたいHTMLのhead要素内に <link rel="stylesheet" href="./css/font-awesome.min.css"> と記述。
stinger8はfunctions.php内で設定済み。ただ、バージョンが違うので書き換えが必要。

4 アイコンのclass名は「Font Awesome」サイトの「Icons」をクリック。

5 任意のカテゴリーをクリック。

6 使いたいアイコンをクリック。

7 class名が表示される。