FontAwesomeのIconを追加する

#hexo

本ブログのテーマである 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
  1. 次に 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>
  1. 最後に 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は触ったことがなかったので、これから勉強していきたいと思います。

← Posts