ウサヲです。

サイドバーのカテゴリ一覧の左端に、リストのポッチンマーク「・」に代わり、Font Awesomeツールで見つけたウェブフォントを使いたくってウサヲが試した方法です。完成品はこんな感じ↓。

やりたいこと

1. wp_list_categories()を使ってカテゴリーリストを表示します。
2. そのリストの前にFont Awesomeツールで見つけた画像を擬似要素として表示したいのです。

やったこと

<i>Font Awesomeツールのクラス</i>をソースに挿入したかったのですが、それをするにはwp_list_categories()のソースコードを解析せねばならず、その気力がなく途中で断念。

そこで、Font Awesomeツールの擬似要素とクラスに展開されるcssを拾ってきて、それを自分のstyle.cssにぶち込んでみた。

以下、参考css。

#sidebar .listItem li:before {
 content: "\f115";
 margin-left: -.65em;
 padding-right: 3px;
 font: normal normal normal 14px/1 FontAwesome;
 font-size: inherit;
 text-rendering: auto;

 

ウサヲが本当にやりたかったことはコチラ

ウェブフォントの<i>タグをソースの<a>タグの内部にぶち込んで、ウェブフォントも一挙まとめてリンク先に指定したかった・・。でもでもできなかった・・。ウサヲ、撃沈。

結局は・・

ウェブフォント自体も<a>で囲むことができなかったので、この作業自体をやめることにしました・・。

結局今のウサヲブログのサイドバーをご覧の通り、サイドバーのタイトルにだけウェブフォントを使うことで収まりました。デザインもこちらの方がすっきりしているようで・・。費やした時間は糧になったと信じて書きました。