Is there a way to use Phosphor Icons in the menu bar?

Hosting on Micro.blog
1

I’m currently happily using mnml theme by @jimmitchell1 with Phosphor Icons insides my pages.

I’ve tried to add the same icons in the menu bar adding the following code, but as I expected Hugo doesn’t render them properly.

For example when using:

<i class="ph ph-megaphone"></i>

Hugo renders the code in the menu bar and not the appropriated Phosphor Icon. :rofl:

Even looking at the Hugo Forum didn’t help me (there were some old topics about this issue that confused me)… :disappointed:

For the moment I ended up using standard emojis for the menu bar, but it is not a “state of the art” solution in my opinion.

Any idea on how to proceed?

2

Can you link to your blog? I want to peek at the source to see if anything stands out.

3

sure: https://prealpinux.com

4

@prealpinux From my experience, Micro.blog does not allow raw html code as part of page titles.

I can understand why @manton does this since page titles are stored in a database and html code could be crafted for malicious intent…but we’ll let Manton confirm that.

The only real way to do it is hard code your main menu in the theme’s “header.html” partial or create a new one as a plugin maybe.

But then, if I update the theme–which is likely to happen–your changes get overwritten (maybe not with a custom plugin). Sadly, I don’t know (or haven’t figured out) a way around this yet.

1 Like
5

Yes this seems right. I actually think Hugo itself doesn’t let HTML in titles. And if your menu is constructed by iterating over page titles, that’s what you’ll get.

My own menu is a custom hybrid-- my config contains:

 "menu": [
      { "name": "Books", "url": "/books" },
      { "name": "Now", "url": "/now" },
      { "name": "Style Guide", "url": "/style-guide" },
      { "name": "Archive", "url": "/archive" }
    ],

Which I then reference like so:

 {{ with site.Menus.main }}
      {{ range . }}
        <li>
          <a class="{{ if eq .URL $url }}active{{ end }}" href="{{ .URL }}">
            {{ .Name }}
          </a>
        </li>
      {{ end }}
    {{ end }}

    {{ range $menuitem := .Site.Params.Menu }}
		  <li>
        <a class="{{ if eq .URL $url }}active{{ end }}"
           href="{{ index $menuitem "url" }}">
          {{ index $menuitem "name" }}
        </a>
		  </li>
		{{ end }}
1 Like