How to easily use fontawesome icons with Hugo

support
1

I’m using Hugo 0.66.0 and I’ve spent well over an hour trying to have font awesome icons turn up on my site/site’s pages.

This works just fine and displays (from config.toml)

[menu]

[[menu.main]]
identifier = “about”
# name = “About” # Material Icons are displayed as block so use the icon only
url = “/about/”
weight = 10
# pre = “speaker_notes” # Material Icons
pre = “” # FontAwesone has more love :wink:

But I don’t understand why it works and why there’s no obvious doc on how to bring in fa icons, either with the kit from font awesome (where does the line go, for example? And is there anything else to do to make the icons show up?

I’ve looked at partials and all sorts of tutorials and nothing has worked for me so far. Ideally I’d like to have them on a CDN and pull them from there.

My “About Page” has this:

title: “About”
date: 2020-03-07T19:23:19+11:00
draft: true
description: “About James”
menu: “main”
tags:

  • “about”

This page is about me, James Young, a programmer in Armidale, New South Wales,
Australia. As well as being a programmer, I’m an information security
consultant and husband and father and uncle and so on. I promise not to
bother you with those details.

Built with by James with Hugo

I just can’t figure out how I can get the programmer’s tagline "Build with [heart icon] by [me] with Hugo.

Any help please? I’m a newbie here and I am struggling :frowning:

2

Hi there,

It’s difficult to say why it’s working or not without seeing your site code. Have a read about Requesting Help to see what you can do to make it easier to get help here.

Fontawesome icons are not specific to Hugo and we don’t provide support to questions about general web dev, which is what this would fall under.

You might want to have a look at how themes have implemented fontawesome: here and here.

2 Likes
3

I looked at the code in the theme and found the following code:

    {{ range .Site.Menus.main }}
        <li>
            <a href="{{ .URL }}">
                {{ .Pre }}
                <span>{{ .Name }}</span>
                {{ .Post }}
            </a>
        </li>
    {{ end }}

If you look at Menu entry properties, you’ll see a variable called .Pre, which ‘typically contains a string representing HTML’.

I did my menu in this way—removed the name and used only pre:

  [[menu.main]]
  identifier = "about"
  pre = "<i class='fas fa-info'></i>"
  title = "About"
  url = "/about/"
  weight = 4

Hope this helps. :slight_smile:

2 Likes