My navbar looks different after deployment

support
1

I’ve just added some fontawesome icons to my navbar using the LoveIt theme in the pre section in config.toml like this:

[[menu.main]]
    identifier = "tags"
    pre = "<i class='fas fa-tags fa-fw'></i>"
    post = ""
    name = "Tags"
    url = "/tags/"
    title = ""
    weight = 2

When I run hugo server locally it looks like this:

image
image1309×238 33.1 KB

However when I push my changes to netlify the deployed site looks like this. Looks like the space between the icon and text has been removed. Any ideas how to get it to look like local?

image
image1309×225 28.1 KB

Website source code is here GitHub - markallisongit/blog: my blog

2

Can you try to disable minification and see if that “fixes it”?

And please report back, because this looks like an ugly minifier bug.

1 Like
3

Thanks @bep, yes it’s “fixed” now after I removed --minify from netlify.toml. Thanks :+1:

4
1 Like
5

Great support thanks, I’m a bit late to the party, but I’m absolutely loving Hugo!

1 Like
6

This has been fixed upstream! But please be aware that it is bad practice to rely on whitespace in your design! I’ve added a fix because it is such a popular problem, but the fix should really be in adding padding to the <i> tag (or an explicit space using &nbsp;).

1 Like
7

Thanks for the quick fix.

I don’t think it’s a minifer’s role to have strong opinions about this. Also, a regular space is as explicit as &nbsp; – it’s a space with different semantics.

There are plenty of situations where using a space is the more practical approach – this is especially true with third-party content where editing it isn’t practical or possible.

I also don’t see much space-saving with being on the conservative side when removing this, either, as it should compress nicely gzipped.

But again, thanks for the quick fix, appreciated.

8

So &nbsp; is the proper way?
Is there a way to force a space in a minified build? - HUGO (gohugo.io)

9

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