Posted in:

This is the third part in a mini-series of CSS list styling techniques. We've seen how to style striped lists in CSS and how to style comma seprated lists. This time we'll see how to style a list of social media SVG icons which was something else I wanted to create for my needed for my blog rewrite.

Here's what we'll try to make:

image

The HTML

Let's see the HTML we'll be styling first. I'm going to use the SVG icons from simple icons. It's just a regular unordered list with each item containing a link with an SVG image inside it:

<ul class="social-media-list">
    <li><a href="https://twitter.com/mark_heath"><img src="https://unpkg.com/simple-icons@latest/icons/twitter.svg" alt="Twitter" title="Twitter"></a></li>
    <li><a href="https://github.com/markheath"><img src="https://unpkg.com/simple-icons@latest/icons/github.svg" alt="GitHub" title="GitHub"></a></li>
    <li><a href="https://www.pluralsight.com/author/mark-heath"><img src="https://unpkg.com/simple-icons@latest/icons/pluralsight.svg" alt="Pluralsight" title="Pluralsight"></a></a></li>
    <li><a href="https://www.youtube.com/channel/UChV2-HyJ9XzsKLQRztd7Pmw"><img src="https://unpkg.com/simple-icons@latest/icons/youtube.svg" alt="YouTube" title="YouTube"></a></li>
    <li><a href="https://stackoverflow.com/users/7532/mark-heath"><img src="https://unpkg.com/simple-icons@latest/icons/stackoverflow.svg" alt="Stack Overflow" title="Stack Overflow"></a></li>
</ul>

Sizing the icons

Currently it will look a real mess as we haven't constrained the size of the icons yet. So let's style the images first. I want them to be in rounded rectangles so I'll set a border-radius and give them some padding so there is a bit of space inside the rectangle around the icon. These icons have a transparent background so I'll give them a background-color. And I've specified the width and height I want for each icon:

ul.social-media-list img {
    padding: 5px;
    border-radius: 5px;
    background-color: lightblue;
    width: 36px;
    height: 36px;
}

Now we have something that looks like this:

image

Resetting the list styling

We've still got the default list styling complete with indentation and bullet points, so we need to reset the styling for our list, using list-style-type:none to get rid of the bullet points, and removing the margin and padding.

ul.social-media-list {
    list-style-type: none;
    margin: 0;
    padding: 0;

Displaying list items horizontally

I also want the icons to appear horizontally so I set the list items to display as inline-block:

ul.social-media-list li {
    display: inline-block;
}

Now we're getting very close. It currently looks like this:

image

Eliminating space between list items

Now I just had one slight problem. The gap between the icons was about a pixel or two larger than I wanted. But where was this gap coming from? It turns out that the browser is rendering a single whitespace character between each icon. There are a bunch of ways you can get round that discussed in the answers to this StackOverflow question

I decided I would use the option that seemed simplest and compatible with most browsers, which was to set the font-size to 0 pixels on the unordered list.

ul.social-media-list {
    list-style-type: none;
    margin: 0;
    padding: 0;
    font-size: 0px; /* eliminate space between li */
}

That eliminates all space between icons:

image

Now we can control the exact spacing we want by adding some margin to the list items (or images, either would work). I've just added 2 pixels:

ul.social-media-list li {
    display: inline-block;
    margin: 2px;
}

Hover over effect

Finally, I'd like a hover over effect to help the user realize these are buttons they can click. We can use the CSS :hover selector on the images to change the background-color. And if you wanted to get fancy you could also increase their size or rotate them or something here as well.

ul.social-media-list img:hover {
    background-color: #63D1F4;
}

Hover over tooltips

You'll notice also that in the HTML I specified both a title and an alt tag for each image. By providing a title, that gives me a hover-over tool-tip, which would be useful for people who might not know what all the icons were for.

Changing the foreground color?

You'll notice that in this example the icons are black. That's because the actual SVG itself is using a black brush. I had hoped that I could use a CSS style or even some JavaScript to update this as well, but it turns out that if you use an img tag pointing at an SVG file, the elements in that SVG don't appear in your DOM (see this StackOverflow answer).

I wanted white icons, so the simplest solution was for me to make my own copies SVGs and insert fill="white" on each path element.

<path fill="white" d="M12 .297c-6.63 ...

Obviously this still doesn't allow me to change the foreground color on hover over. To do that, I'd need to put the SVG inline in my page or use <object> or <embed> tags instead of <img>. But since I just wanted white icons this works fine for me:

image

Try it yourself

As usual I've put an example on codepen so feel free to experiment with this and customize it for your needs.

Comments

Comment by Alexander Kryklia

Thanks

Alexander Kryklia