How to add fontawesome icon to title in front matter?

support
1

I’m not a web dev, I have just started a blog. I wondered what’s the best way to add a fontawesome icon to the title of a post in front matter? Something like this maybe?

---
title: ":(fas fa-exclamation-triangle fa-fw): Careful with this dangerous thing"
subtitle: "It might bite you"
date: 2021-03-16T13:41:54Z
lastmod: 2021-03-16T13:41:54Z
draft: true
---

I’m using the LoveIt theme and my blog source code is here GitHub - markallisongit/blog: my blog

Thanks for any pointers.

2

It is possible to do exactly what you are asking, but I wouldn’t. You are polluting the actual title with information about the title (metadata). Instead, I would do something like:

title: "My Title"
warning: true

Then in the template(s), do something like:

{{ if .Params.warning }}
  <i class='fas fa-exclamation-triangle fa-fw'></i>
{{ end }}
{{ .Title }}
4 Likes
3

or even more flexible:

title: "my title"
icon: "exclamation-triangle"

in template:

{{ with .Params.icon }}
  <i class='fas fa-{{ . }} fa-fw'></i>
{{ end }}
{{ .Title }}

leave the icons out and none is printed, else the one you choose is printed.

2 Likes
4

Or use an emoji :warning:

1 Like
6

If we pretend we are talking about the sidebar in the Docsy theme and I want to switch from Font Awesom to mdi, what templates would I need to change or create to do this? Ideally I could just visit: Templates | Hugo and there would be a section called “Sidebar templates”. But there isn’t. The closest thing I can find is: Partial templates | Hugo
That documentation suggests I duplicate an existing partials file for the sidebar from docsy:

Use partials in your templates

All partials for your Hugo project are located in a single layouts/partials directory. For better organization, you can create multiple subdirectories within partials as well: