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
  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は触ったことがなかったので、これから勉強していきたいと思います。

← Blog