I’m using the hello-friend-ng theme to construct a personal website. I’ve just got one final customisation that I would like to make but I’m struggling to get it to work.
I would like to add an icon next to each of the items in the top menu and I’ve been following the steps put in this guide. As the guide suggested, I’ve created the feather.min.js file in layouts/ and I’ve created script.html to call upon the .js file. However, I feel the reason it’s not working is due to how I’ve introduced .Pre in menu.html:
<nav class="menu">
<ul class="menu__inner">
{{- $currentPage := . -}}
{{ range .Site.Menus.main -}}
{{ $icon := printf "<i data-feather=\"%s\"></i>" .Pre }}
<li><a href="{{ .URL | absLangURL }}">{{ .Name }}</a></li>
{{- end }}
</ul>
</nav
and perhaps how script.html is included in baseof.html:
<!DOCTYPE html>
<html lang="{{ .Site.Language }}">
<head>
{{ partial "head.html" . }}
</head>
<body class="{{ if ne $.Site.Params.defaultTheme "light" -}} dark-theme {{- end -}}">
<div class="container">
{{ partial "header.html" . }}
<div class="content">
{{ block "main" . }}{{ end }}
</div>
{{ block "footer" . }}
{{ partial "footer.html" . }}
{{ end }}
</div>
{{ partial "script.html" . }}
{{ partial "javascript.html" . }}
</body>
</html>
As it stands, including a menu item in config.toml like this:
[[menu.main]]
weight = 1 # Dictates ordering from left to right
identifier = "about"
name = "readme"
url = "/about"
pre = "tag"
produces the menu item but not icon next to it:
If you can point out where I could amend the above, I’d be very grateful.