FontAwesomeのIconを追加する

本ブログのテーマである joyceim/hexo-theme-apollo では Font Awesome が使われていました。

【保存版】Font Awesomeの使い方:Webアイコンフォントを使おう

ただし、デフォルトでは検索ボタンとRSSリンクしかありません。
今回は3ステップで、TwitterとGithubのアイコンを追加します。

default

  1. まずは _config.yml にURLを追加。

    # Header
    menu:
    Home: /
    Archives: /archives

    ###ここから###
    twitter: https://twitter.com/yours
    github: https://github.com/yours
    ###ここまで###

    rss: /atom.xml
  2. 次に header.ejs に項目を追加。
    既存のRSS同様 _config.yml に設定があればアイコンを表示するようにします。

    <ul>
    <% for (var i in theme.menu){ %>
    <li><a href="<%- theme.menu[i] %>"><%= i %></a></li>
    <% } %>
    <li><a id="nav-search-btn" class="nav-icon" title="Search"></a></li>

    <!-- ここから -->
    <% if (theme.twitter){ %>
    <li><a href="<%- theme.twitter %>" id="nav-twitter-link" class="nav-icon" title="twitter"></a></li>
    <% } %>
    <% if (theme.github){ %>
    <li><a href="<%- theme.github %>" id="nav-github-link" class="nav-icon" title="github"></a></li>
    <% } %>
    <!-- ここまで -->

    <% if (theme.rss){ %>
    <li><a href="<%- theme.rss %>" id="nav-rss-link" class="nav-icon" title="RSS Feed"></a></li>
    <% } %>
    </ul>
  3. 最後に header.styl にアイコンのスタイルを追加します。
    “twitter” や “github” で 検索してお好みなアイコンのUnicodeを指定します。

    #nav-rss-link
    &:before
    content: "\f09e"

    #nav-search-btn
    &:before
    content: "\f002"

    // ここから
    #nav-twitter-link
    &:before
    content: "\f099"

    #nav-github-link
    &:before
    content: "\f09b"
    // ここまで

このようになりました!
after

無事にTwitterとGithubのアイコンを追加することができました。
Stylusは触ったことがなかったので、これから勉強していきたいと思います。