hexoのthemeでよく目にするアイコン

hexoで作ったこのブログのテーマを色々探していると下のようなアイコンをよく目にした。

hexoのテーマは中国人の方が作ったものが多く、上記に加え weibo とかいう謎サービスのアイコンも陳列していることが多い。（ちなみに検索バーもあっち系の検索サイトになっていたので Google 検索に変更した。）

今回、テーマ変更にあたって、メールアイコンをツイッターアイコンに変えたいと思いソースを調べた。するとだいたいこんな感じ。

<ul class="my-socials">
    <li>
        <a class="github" target="_blank" href="https://github.com/***">
            <i class="fa fa-github"></i>
        </a>
    </li>
    <li>
        <a class="email" title="Email Me" target="_blank" href="mailto: ***">
            <i class="fa fa-envelope"></i>
        </a>
    </li>
</ul>

最近のブラウザは要素解析機能があって便利だなー、と思いつつ調べていて徐々に焦り始める。

• んー・・・あれ？画像ないぞ。。ははーん、CSSに埋め込んでるやつね。どれどれ、、
• CSSにもないぞ・・・？！　選択する要素間違えてるかな〜、、いや、間違えてない・・・

散々CSSとHTMLとcloneしたテーマのリポジトリ内調べて、どうにも該当する画像が見つからなかったところで、まさかな、と思ってた可能性だけが残る。・・・これ特殊文字フォント？？

調べてみると、そのまさかであった。Font Awesome という、素晴らしいフォントが使われていたことが判明。使い方は簡単で、font-awesome.css をHTMLソース内にリンクして、使いたいフォントの文字のコードを調べ、以下のように設置する。

<i class="fa fa-github"></i>

まさに要素解析で行き当たったソースのそれであった。

ここまでくれば後はただの作業である。ツイッターの文字コードを調べて、以下で設置できる模様。

<i class="fa fa-twitter"></i>

ただ、social.ejs を見ると上記リストの””で囲まれる部分は動的に指定してるっぽいので、結局 header.styl に以下を追記するだけであった。

.twitter
  background-color: #55acee