blogging

Hexo Custom Theme - Using FontAwesome Icons

FontAwesome provides a lot of icons you can use in your website instead of including image logos of various sizes. There are icons for twitter, linkedin, Github and RSS feeds. Using these icons keeps your website fast on any device or network.

I’ll explain how I configured the standard Hexo Landscape theme to add icons in my blog website navigation bar, each icon linking to the developer related sites I use such as Github and Twitter.

FontAwesome icons are awesome

FontAwesome is a font that has a wide range of icons, including logos from common websites such at Twitter, Github, LinkedIn, etc. Using a font for these logos is more efficient when it comes to load times of your website, as you only need to include one font which scales to different sizes.

Adding Icons Styles to the CSS

The Hexo theme already had two CSS ID’s defined in the header styles, providing icons for the RSS feed and search button. I simpy copied these style definitions for the addtional icons I wanted, giving each icon its own unique CSS ID.

To get the correct code for the FontAwesome icon I wanted, I refered to this list of CSS content values.

I updated the source/css/_partial/header.styl file to include the additional icon styles.

source/css/_partial/header.styl
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#nav-rss-link
  &:before
    content: "\f09e"

#nav-twitter-link
  &:before
    content: "\f099"

#nav-linkedin-link
  &:before
    content: "\f0e1"

#nav-googleplus-link
  &:before
    content: "\f0d5"

#nav-github-link
  &:before
    content: "\f113"

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

Adding Icons to the header layout

Now the icon style are defined, we need to include them in the navigation bar layout. This navigation bar layout is defined in the file layout/_partial/header.ejs, see lines 3,4,and 5 below:

layout/_partial/header.styl
1
2
3
4
5
6
7
8
9
10
<nav id="sub-nav">
  <a id="nav-github-link" class="nav-icon" href="https://github.com/jr0cket" target="_blank"></a>
  <a id="nav-linkedin-link" class="nav-icon" href="https://uk.linkedin.com/in/jr0cket" target="_blank"></a>
  <a id="nav-twitter-link" class="nav-icon" href="https://twitter.com/jr0cket" target="_blank"></a>
  <a id="nav-googleplus-link" class="nav-icon" href="https://plus.google.com/117080433375668558463" target="_blank"></a>
  <% if (theme.rss){ %>
    <a id="nav-rss-link" class="nav-icon" href="<%- theme.rss %>" title="RSS Feed"></a>
  <% } %>
  <a id="nav-search-btn" class="nav-icon" title="Search"></a>
</nav>

The finished result

As soon as both files are saved, I can see the results as soon as I refresh the browser as I am running hexo server.

My navigation bar now has more icons displayed, each icon linking to my other developer websites

The navigation bar has a link for my Github, LinkedIn, Twitter and Google plus profile pages.

Thank you
@jr0cket

This work is licensed under a Creative Commons Attribution 4.0 ShareAlike License, including custom images & stylesheets. Permissions beyond the scope of this license may be available at @jr0cket
Creative Commons License