Adding Share Icons after each Article in Hugo!

tips & tricks
1

This is not something new but instead of going for 3rd party solutions I decided to do something myself!

This is the end product!

2

Why do you put the non-breaking spaces in-between the list items?

1 Like
3

@maiki
I didn’t get you, if you are asking about that space between the icons then use  

<ul>
Xyzxyz
</ul>

In these opening and closing tags add any number of list items <li>, they will be listed in same line… If this is what you wanted to know :wink:

4

You have to improve your HTML and CSS skills. This site is not for that purpose.

5

@Pavel Yeah I know, I have never worked with HTML and CSS before this… Learning :stuck_out_tongue:

6

Ah, in that case let me share some tips:

  • The letters in &nbsp; stand for non-breaking space, and in HTML it has a very specific behavior that should not be used for visual layout.
  • Instead, you use CSS to visually set the icons apart from each other.

You already know the basic of laying out a navigation menu with links and icons, so you can tweak that recipe after searching for something like, “CSS for horizontal list layouts”. :slight_smile:

7

@maiki Sorry for the late reply and thabk you for the tips. I’ll update it in the coming days!