No icons spacing after I deployed the site to netlify

After I deploying my site to netlify, the word-spacing I gave between the icons is not working. (Working while in development server)

Development Server :

After Deployment :


The first Icons are svg icons and the footer ones are of favicons.
P.S - I tried   which worked with footer icons, but I want to use word-spacing

Here’s the CSS of footer icons

.icons {
  /* display: block !important; */
  font-size: 20px;
  color: var(--icons-color);
  line-height: 1.6em;
  display: inline-block;
  word-spacing: 10px;
}

HTML FILE -

<footer class="footer">
  <div class="icons">
    <a href="https://github.com/raghav4" target="blank" id="githubLogo"><i class="fab fa-github github"></i></a>
    <a href="http://linkedin.com/in/rsx" target="blank"><i class="fab fa-linkedin"></i></a>
    <a href="https://twitter.com/@4raghav" target="blank"><i class="fab fa-twitter"></i></a>
    <a href="#"><i class="fab fa-medium-m" target="blank"></i></a>
    <a href="{{ "index.xml" | absURL }}"><i class="fas fa-rss feed"></i></a>
  </div>
  <div id="copyright">
      <span>&copy; {{ now.Year }} <a href="{{ "" | absURL }}"></a></span>
      <span>&middot;</span>
      <span><a href="#" rel="noopener" target="_blank">Raghav Sharma</a></span>
  </div>
</footer>

You most possibly have minify options at netlify enabled. Which removes spaces. If you require spaces for design (BAD!!! BAD!!! TOTALLY BAD!!!111One) then use &nbsp; as one space.

3 Likes

What should I do then? Should I remove minify option?
Here’s the netlify.toml file

[build]
  command = "hugo --gc --minify -b $URL"
  publish = "public"

[build.environment]
  HUGO_VERSION = "0.62.1"
  HUGO_ENABLEGITINFO = "true"

[context.production.environment]
  HUGO_ENV = "production"

[context.deploy-preview]
  command = "hugo --gc --minify --buildFuture -b $DEPLOY_PRIME_URL"

[context.branch-deploy]
  command = "hugo --gc --minify -b $DEPLOY_PRIME_URL"  

Should I remove --minify option from all 4 of it?

Also, I’ve used margin-right for giving right spacing? Is it good? :sweat_smile:

With minify - just make sure you’re only using one minification: either via hugo (as per your netlify.toml) or through the netlify dashboard.

But since the spacing is via css word-spacing, which shouldn’t be effected by minification, I’m guessing the problem is somewhere else.

Have you checked with the word-spacing value is in your deployed CSS?

Can you provide a link to both your git repo and your site?

1 Like

Think about people on mobile phones. I would not do a margin to space it right on the screen, I would add padding to all the icons. So if someone tapps on the icons (they are linked) the space around them will work as link too.

.icons a {
padding: 10px;
}

As a sample only. This way minification will do it’s job (make the filesize smaller) and the look is saved.

1 Like

So I don’t need to remove --minify flag with padding?

keep it :slight_smile:

1 Like

OMG! It worked! Thank you so much! :slight_smile: :slight_smile:

Thank you for helping!

either via Hugo (as per your netlify.toml) or through the netlify dashboard.

I don’t know how is it done in Hugo. I’ve removed word-spacing, it was still an issue. But thank you so much, it got fixed after I added padding (Solution).

What I meant was using the command hugo --minify, which you’re already doing. However, in the Netlify dashboard, you can also run some optimisations, including minification, which is redundant (and may cause problems) if you’re already optimising in Hugo.

But either way, good to hear your problem is fixed.

1 Like

Thanks for your help @funkydan2 :hugs: