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 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.
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.
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:
As soon as both files are saved, I can see the results as soon as I refresh the browser as I am running
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.
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