Use a custom icon alongside with font awesome

support
1

Dear Hugo fans,

One month ago I wasn’t able to read or write HTML5 and CSS. Now, thanks to Hugo, I understand the basics of coding and now I am creating my own fast website, thanks! ( Using and learing Vim, who needs school nowadays :slight_smile: )

On topic now:

The website template I use is Blackburn. Blackburn has a file called config.toml. In this file you can change the menu icons and calls the the font awesome style like:

[[menu.main]] name = "Blog" pre = "<i class='fa fa-list fa-fw'></i>" weight = 2 identifier = "post" url = "/post/"
My wish: I would like to load my home made logo without spending money on premium services like font awesome.

I designed a beautiful logo using Inkscape and saved it as an SVG. I use this logo successfully on my website title, pointing to title-logo- partial.html. This html file contains <path></path>, and use css to style. It looks really crisp and loads fast.

The question: How do I call my own custom logo in a proper way. Can I still use the <i></> in the config.toml file?

Best, Brainsalad

2

This is not a Hugo problem, but let me google that for you: :slight_smile:

Use SVG icons for button instead of utilizing font awesome
Coloring SVGs in CSS Background Images

1 Like
3

Thanks! I am wondering, if I create an .ico file and safe it locally at /static/img, how to call this icon in the config.toml. In short: what do I need to write inbetween the icon operators? <i></i>