Press "Enter" to skip to content

Social Links with CSS and Font Icons

My Girlfriend has a blog about sugarfree baking and she asked me if I could take a look at the social icons on it. Remove some of the defaults and add some new.

This is a Blogger site with a 3000(!) line template. Removing some of the icons wasn’t a problem. I even tried to be the least obtrusive, so just hid them with CSS, but adding new ones turned out to be a problem. The icons were made with a sprite and Pinterest wasn’t among them.

I could have just created a new sprite, but hey, we are living in the age of CSS3 and font icons, and she also asked for grey icons. To spice up the challenge a bit I wanted to recreate the exact same experience, but of course with resolution independent graphics and easily modifiable colors.

This is what the original icons looked like this:

First I looked for a nice (and free) icon font. Usually I choose FontAwesome since it has a really great range of icons, and it is constantly updated with new ones. This time I needed social media logos mostly, which are also part of this nice collection.

The HTML for the links were ok, no extra spans or divs, so I decided to keep it, and at the same time I leveled up the challenge of recreating the icons only with CSS (and the font of course).

Here is the HTML for the links:

1
2
3
4
5
6
<ul class='interwebz'>
    <li class="icon-feed"><a href="#">Feed</a></li>
    <li class="icon-facebook"><a href="#">Facebook</a></li>
    <li class="icon-instagram"><a href="#">Instagram</a></li>
    <li class="icon-pinterest"><a href="#">Pinterest</a></li>
</ul>

Every icon is contained in a 32 by 32 pixel square block, and the original text labels are not visible. I achieved this with left floated list items and relative positioned anchors, where the text is indented 9999 pixels to the left.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.interwebz {
    margin: 0;
    padding: 10px 0;
    list-style: none;
    overflow: auto;
}
.interwebz li {
    width: 32px;
    height: 32px;
    display: block;
    float: left;
    overflow: hidden;
    margin-right: 10px;
}
.interwebz a {
    line-height: 0;
    position: relative;
    text-decoration: none;
    text-indent: -9999px;
    padding-top: 0px;
    display: block;
}

In the original version there are two versions of a logo, one is a filled and one in an outlined circle, to add both only with CSS I used ::before and ::after pseudo-elements. They are positioned above each other. To create the circle I set the border-radius to a larger amount than half width and height of the square. The only difference between the two was that the lower had a grey background and white logo, while the upper had a transparent background with grey logo, also I had to shift them 32 pixels up with negative margin.

23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
.interwebz a::before, .interwebz a::after {
    position: absolute;
    text-indent: 0px;
    font-family: 'FontAwesome';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    border-radius: 20px;
    border: 2px solid #999;
    width: 28px;
    height: 25px;
    display: block;
    padding-top: 3px;
    text-align: center;
    font-size: 22px;
    -webkit-font-smoothing: antialiased;
}
.interwebz a::before {
    margin-top: -32px;
    color: #999;
}
.interwebz a::after {
    background: #999;
    color: #fff;
}

FontAwesome works with CSS classes, so you have to add a those to an element for an icon to appear. In the background it also uses the ::before pseudo-element and sets its content to a unicode value that maps to the desired icon. I couldn’t use the convenience of the CSS classes here, so I had to find the unicode values for the icons I needed and set the content for every icon. Sounds complicated but it’s not, they are displayed on the FontAwesome homepage, but I just searched for them in the font-awesome.css file.

48
49
50
51
52
53
54
55
.interwebz .icon-feed a::before,
.interwebz .icon-feed a::after { content: "\f09e"; }
.interwebz .icon-facebook a::before,
.interwebz .icon-facebook a::after { content: "\f09a"; }
.interwebz .icon-instagram a::before,
.interwebz .icon-instagram a::after { content: "\f16d"; }
.interwebz .icon-pinterest a::before,
.interwebz .icon-pinterest a::after { content: "\f231"; }

I needed one final thing, to make the hover animation. When the mouse goes over the icon the upper icon (now hidden) shifts down and replaces the filled one. To do this I increased the top padding of the anchor element on hover. This can be done with the :hover pseudo-class. And to animate it, I added a .3 second padding transition.

56
57
58
59
60
61
62
.interwebz a {
    -webkit-transition: padding .3s;
    transition: padding .3s;
}
.interwebz a:hover {
    padding-top: 32px;
}

Done.

You can check the final result here:

Be First to Comment

Leave a Reply

%d bloggers like this: