Adding an icon next to menu item

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.

you just need to call the $icon variable.

<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 }}">{{ $icon | safeHTML }}{{ .Name }}</a></li>
        {{- end }}
    </ul>
</nav

@pamubay Thanks for the response.

I’ve just amended the html script to call on the $icon variable as you kindly pointed to but I’m afraid the menu item still doesn’t appear with an icon. Is there anything else which may need revising?

as long as the feather.min.js script loaded correctly and at the bottom of page feather.replace() executed, the icons should appears.

FWIW, the feather.min.js file is now populated with the following:

!function(e,n){"object"==typeof exports&&"object"==typeof module?module.exports=n():"function"==typeof define&&define.amd?define([],n):"object"==typeof exports?exports.feather=n():e.feather=n()}("undefined"!=typeof self?self:this,function(){return function(e){var n={};function i(l){if(n[l])return n[l].exports;var t=n[l]={i:l,l:!1,exports:{}};return e[l].call(t.exports,t,t.exports,i),t.l=!0,t.exports}return i.m=e,i.c=n,i.d=function(e,n,l){i.o(e,n)||Object.defineProperty(e,n,{configurable:!1,enumerable:!0,get:l})},i.r=function(e){Object.defineProperty(e,"__esModule",{value:!0})},i.n=function(e){var n=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(n,"a",n),n},i.o=function(e,n){return Object.prototype.hasOwnProperty.call(e,n)},i.p="",i(i.s=61)}([function(e,n,i){var l=i(20)("wks"),t=i(11),r=i(1).Symbol,o="function"==typeof r;(e.exports=function(e){return l[e]||(l[e]=o&&r[e]||(o?r:t)("Symbol."+e))}).store=l},function(e,n){var i=e.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=i)},function(e,n){var i=e.exports={version:"2.5.6"};"number"==typeof __e&&(__e=i)},function(e,n){var i={}.hasOwnProperty;e.exports=function(e,n){return i.call(e,n)}},function(e,n,i){e.exports=!i(27)(function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a})},function(e,n,i){var l=i(13);e.exports=function(e){if(!l(e))throw TypeError(e+" is not an object!");return e}},function(e,n,i){var l=i(5),t=i(56),r=i(55),o=Object.defineProperty;n.f=i(4)?Object.defineProperty:function(e,n,i){if(l(e),n=r(n,!0),l(i),t)try{return o(e,n,i)}catch(e){}if("get"in i||"set"in i)throw TypeError("Accessors not supported!");return"value"in i&&(e[n]=i.value),e}},function(e,n,i){var l=i(6),t=i(12);e.exports=i(4)?function(e,n,i){return l.f(e,n,t(1,i))}:function(e,n,i){return e[n]=i,e}},function(e,n,i){"use strict";Object.defineProperty(n,"__esModule",{value:!0});var l=o(i(35)),t=o(i(33)),r=o(i(32));function o(e){return e&&e.__esModule?e:{default:e}}n.default=Object.keys(t.default).map(function(e){return new l.default(e,t.default[e],r.default[e])}).reduce(function(e,n){return e[n.name]=n,e},{})},function(e,n,i){var l=i(20)("keys"),t=i(11);e.exports=function(e){return l[e]||(l[e]=t(e))}},function(e,n){e.exports={}},function(e,n){var i=0,l=Math.random();e.exports=function(e){return"Symbol(".concat(void 0===e?"":e,")_",(++i+l).toString(36))}},function(e,n){e.exports=function(e,n){return{enumerable:!(1&e),configurable:!(2&e),writable:!(4&e),value:n}}},function(e,n){e.exports=function(e){return"object"==typeof e?null!==e:"function"==typeof e}},function(e,n){e.exports=function(e){if(void 0==e)throw TypeError("Can't call method on "+e);return e}},function(e,n){var i=Math.ceil,l=Math.floor;e.exports=function(e){return isNaN(e=+e)?0:(e>0?l:i)(e)}},function(e,n,i){var l;

There seems to be some errors within that chunk - does this elude to the call not being made properly?

it’s correct , it’s minified javascript file.

Do you have any repo you can share? it’s easier to solve your problem.

Of course - here is the repo: https://github.com/davidptclark/full_site.

Thanks again.

replace your partials/menu.html with this:

<nav class="menu">
    <ul class="menu__inner">
        {{- $currentPage := . -}}
        {{ range .Site.Menus.main -}}
            {{- $icon := printf "<i data-feather=\"%s\"></i>" .Pre -}}
            {{- $text := print $icon " " .Name | safeHTML -}}
            <li><a href="{{ .URL | absLangURL }}">{{ $text }}</a></li>
        {{- end }}
    </ul>
</nav>

then put feather.min.js file into static/js/feather.min.js

1 Like

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.