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:

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:

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.

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:

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.

About Mark Heath

I'm a Microsoft MVP and software developer based in Southampton, England, currently working as a Software Architect for NICE Systems. I create courses for Pluralsight and am the author of several open source libraries. I currently specialize in architecting Azure based systems and audio programming. You can find me on: