How to Add Social Media Icons to Links Using CSS

There are several ways to automatically add social media icons to links via CSS.

The best way is using a unique class for each social media site, but if you are using a content management system (CMS) that generates the HTML for you, that may not always be possible. In that case, we have included a couple other ways to do the same thing.

Example

Regardless of the method used below, the links will all look like this:

You can use any icons you like.

Note

You will need to upload a set of small social media icons to use for this method to work.

You may need to adjust the padding a bit, depending on the size of your font and the icons you are using.

It is best to only use one method per website, otherwise you can have some interesting CSS conflicts, like multiple icons showing.

Using a Link Class

This is the most precise way of doing it, and ideal if you have control of the HTML generated.

HTML

<a class="twitter" href="http://twitter.com/SupportGuide">Twitter</a>

CSS


.twitter {
    background: transparent url("/images/twitter.png") center left no-repeat;
    padding-left: 19px;
}

Detecting the URL

If you are unable to use classes for each link, or it is undesirable, an alternative is to format all links based on the URL. In this example, we detect whether the URL contains or begins with a particular string.

The downside to this method is that it adds icons to every link containing that keyword, which can sometimes result in unexpected situations, especially if you have user generated content.

HTML

<a href="http://twitter.com/SupportGuide">Twitter</a>

CSS

Begins With

The following CSS checks to see if the URL begins with a particular string ("http://twitter.com" in our example).


a[href^="http://twitter.com"] {
    background: transparent url("/images/twitter.png") center left no-repeat;
    padding-left: 19px;
}

Contains

The following CSS checks to see if the URL contains a particular string ("twitter.com" in our example).


a[href*="twitter.com"] {
    background: transparent url("/images/twitter.png") center left no-repeat;
    padding-left: 19px;
}

Using a Div Class and Detecting the URL

Instead of placing a class on each link, you can surround the set of links in a DIV or SPAN tag and give that a class instead.

You may have to use this method if you are using a CMS, like Drupal, that uses classes to identify blocks of content.

HTML

<div class="socialclass">
<a href="http://twitter.com/SupportGuide">Twitter</a>
</div>

CSS


.socialclass a[href*="twitter.com"] {
    background: transparent url("/images/twitter.png") center left no-repeat;
    padding-left: 19px;
}

Note: If you are using a CMS that auto-generates the classes, you will have to change the name of the class to whatever your CMS is using for this to work.

Drupal Example

We had to get a bit creative implementing this in Drupal, because we did not have control over the HTML generated, unless we modified the core code or created a module, which we did not want to do.

In our case, we added some custom fields to the user's profile so people could add their own social media links. Since Drupal does not put a unique class on each link, we had to use the next best thing, which was one of the classes it assigned to that block of data. I say classes (plural) because Drupal tends to assign more than one in many cases.

The code Drupal generated was something like this:

<section class="field field-name-field-social-media-links field-type-link-field field-label-above view-mode-full">
<h2 class="field-label">Social Media Profiles:&nbsp;</h2>
    <div class="field-items">
        <div class="field-item even"><a href="http://twitter.com/WisTex" target="_blank">Twitter</a></div>
        <div class="field-item odd"><a href="http://facebook.com/scott.m.stolz" target="_blank">Facebook</a></div>
    </div>
</section>

We then decided to use the field-name-field-social-media-links class to key off of. That was the only one unique to this block; all of the others are reused throughout the website in other sections.

So we added the following CSS to our custom CSS.


.field-name-field-social-media-links a[href*="twitter.com"] {
    background: transparent url("/images/twitter.png") center left no-repeat;
    padding-left: 19px;
}

Using this code allowed us to format only the links in the user profile without interfering with the rest of the website.

About the Author

WisTex's picture
Scott M. Stolz

Recommended Content