Introduction
Eevee is a theme for Pelican, based on Google’s Material Design specification that I released in June 2016.
Eevee allows configuring menu links in the header and footer of a template — including social links.
Eevee also includes Font Awesome by default, at time of release and writing of this article it provides Font Awesome version 4.6.3.
Because the links are totally customisable, it means you can inject HTML directly in to a link name and — because Font Awesome is included by default — you can inject Font Awesome icons in to link names using HTML.
Using icons in links
Menu’s in Eevee are controlled by Pelican’s configuration, for information on how to modify menu’s please see the Eevee documentation.
Imagine you have a list of links to social websites in your menu, similar to the list below.
SOCIAL = (('Github', 'https://github.com/'),
('Twitter', 'https://twitter.com/'),
('Facebook', 'https://facebook.com/'),
('Instagram', 'https://instagram.com/'),
('LinkedIn', 'https://linkedin.com/'))
Adding the relevant icons to these links is very simple.
SOCIAL = (('<i class="fa fa-github aria-hidden="true"></i> Github',
'https://github.com/'),
('<i class="fa fa-twitter aria-hidden="true"></i> Twitter',
'https://twitter.com/'),
('<i class="fa fa-facebook aria-hidden="true"></i> Facebook',
'https://facebook.com/'),
('<i class="fa fa-instagram aria-hidden="true"></i> Instagram',
'https://instagram.com/'),
('<i class="fa fa-linkedin aria-hidden="true"></i> LinkedIn',
'https://linkedin.com/'))
Turning a rather dull menu, in to a more pleasing menu.
