👋 I followed this concise blog post¹ about embedding font awesome in hugo. Of course, I expected everything to work flawlessly in my environment as well. And of course, this presumption was wrong again.

Neither simply adding {{< fa bath >}} to the footer key in config.toml nor as content into any org-mode file will work.

This post shall show how to circumvent that flaws, use fontawesome in hugo’s footer section and overall in your blog’s content using ox-hugo.

Directory path and completeness

In contradiction to the instructions², I put the fontawesome directory not in the static but in the assets directory. I had to create it first.

Furthermore I put the complete fontawesome directory, not only a particular file. Filepaths in fa.html³, pointing to subdirectories, made me skeptic about picking only particular files.

Thus, after following the instruction steps about downloading and adding the fa.html, the siteroot/assets directory tree should look like:

tree -d -L 2

.
└── fontawesome
    ├── css
    ├── js
    ├── less
    ├── metadata
    ├── scss
    ├── sprites
    ├── svgs
    └── webfonts

10 directories

config.toml

The js key is documented in my theme’s repository⁴. You might encounter other ways for your particular theme in order to customize css/js assets.

[params]
js = ["/fontawesome/js/all.js"]
footer = '''
<a href="https://instagram.com/rida.ayed"><div class="fab fa-fab fa-instagram"></div></a>
<a href="https://github.com/RidaAyed"><div class="fab fa-fab fa-github"></div></a>
'''

Now the footer contains links with icons. Namely and

Usage of the icons with ox-hugo shortcodes in content

Although being documented⁵, I rather show the shortcode usage in ox-hugo again and specifically.

For example:

Lorem @@hugo:{ {< fa bath >}}@@ ipsum

Only by chance, I noticed that surrounding the shortcode with the equal sign “=” works as well.

For example:

Lorem ={ {< fa bath >}}= ipsum

You must delete that first space between the curly brackets from my upper examples. So {{ instead of { {
Both examples result in: Lorem ipsum

Conclusion

I showed how to extend the icon usage into the footer section of a hugo website. Furthermore you should be able to use the icon shortcodes in a org file considering ox-hugo as blog platform.