Twentyfifteenには、あらかじめGenericonsというwebフォントが組み込まれています。
内容もデザインもベーシックなものが揃っているので、どんなジャンルのサイトにも使えると思いますが、残念ながら自分が必要としているアイコンがなかったので、別のwebフォントに変えることにしました。
まずGenericonsの提供元サイトを確認すると、汎用性の高い176個のwebフォントが用意されています。
それぞれのアイコンをクリックするとCSSやHTMLタグが簡単に取得できます。
提供元はAkismetやJetpackと同じAutomatticで、ライセンスはGPLです。
で、このリストにはない自分が使いたいアイコンというのが、feedlyでした。
RSSのアイコンをつけておけば事足りるんですが、なんとなくfeedly愛を主張したかったのでｗ
ところが、世界のwebフォントを探しても、feedlyのアイコンが用意されているものって、あんまりないんですね。
やっと見つけたのがコチラ。
登録されているアイコン数は2075個！ これでfeedlyがなければおかしい！って数。
この膨大なアイコンをwebフォントとして利用することもできますし、PNGファイルとしてダウンロードすることもできます。
ライセンスはwebフォントがSIL Open Font License（個人・商用利用可）、PNGファイルがCC3.0（表示-非営利）でトップページへのリンク要です。
2075個もあればイロイロあります。 のようなベーシックなもの、グラフィックソフトやExcelなどのツールバーで見かけるアイコンもあれば、 とか のようなどことなくデジャヴュ感のある面白系もあります。
こちらのページでは上部にbootstrapのwebフォントと同名にしているアイコン、下部にその他のアイコンのリストがあります。
一見、アルファベット順になってますが、zの後にも追加されたらしきアイコンがあり、さらにダウンロードするとこれ以外にも追加されたものがあって混沌としてますｗ
あまりにもアイコンが増えすぎて整頓を挫折したっぽい。 
でもfeedlyアイコンを使いたいのでこのwebフォントを導入することにしました。
まずトップページからwebフォントをダウンロードして、テーマフォルダ直下に格納。
functions.phpで設定されているwebフォントを変更します。
|
1 |
add_editor_style( array( 'css/editor-style.css', 'genericons/genericons.css', twentyfifteen_fonts_url() ) ); |
これを
|
1 |
add_editor_style( array( 'css/editor-style.css', 'whhg-font/css/whhg.css', twentyfifteen_fonts_url() ) ); |
webフォントの設定場所はもう1箇所あります。
|
1 |
wp_enqueue_style( 'genericons', get_template_directory_uri() . '/genericons/genericons.css', array(), '3.2' ); |
以下のように変更。
|
1 |
wp_enqueue_style( 'whhg', get_template_directory_uri() . '/whhg-font/css/whhg.css', array(), '3.2' ); |
そうすると、いままでGenericonsのアイコンを表示していた箇所が無効になってしまうので、styles.cssに新しいフォントを入れていきます。
webフォントの指定は項目2.0 – Genericonsにあるので、ここにあるfont-familyを変更。
|
1 |
font-family: "Genericons"; |
|
1 |
font-family: "webhostinghub-glyphs"; |
あとはwebフォントを1個1個入れ替えます。例えば投稿日のカレンダーアイコンの場合は、
|
1 2 3 |
.posted-on:before { content: "\f307"; } |
と指定されています。
入れ替えたいアイコンをwhhgフォルダの中のexample.htmlから見つけ、アイコン名をコピーしたらwhhg.cssで検索をかけます。すると、
|
1 |
.icon-calendarthree:before{content:'\f4d0'} |
となっているのでf4d0を既存の番号と入れ替えます。
|
1 2 3 |
.posted-on:before { content: "\fd40"; } |
この作業を全部のアイコンで行いました。
疲れました。 
なお、CSSの設定は上記のように面倒ですが、記事やウィジェットのアイコンなどは以下のように指定すれば表示されます。記事内のiにCSSを指定すれば、このサイトのように表示色やサイズを一定にできます。
|
1 |
<i class="icon-feedly"></i> |
とはいえ2075個からいちいち探すのは面倒なので、今はサイトで使うであろうアイコンのみをリストアップしてコピペで使えるようにしています。
こんなのもリストに入れてはいるけど、使うことあるんかなぁ．．．