Quick and Easy Way to Implement a Social Media Icon List with Hover effect

3 min readJul 8, 2019

This post will walk you through a quick and easy way of creating a social media icon list that can be added to a website’s footer or About page.

We will be using Ionicons to add the social media icons. Ionicons is an open-source icon set that can be used in web, desktop, iOS, and Android applications. The icons come in iOS and Material Design versions.

First install Ionicons by placing the following <script> tag right before the closing </body> tag.

<script src="https://unpkg.com/ionicons@4.5.10-0/dist/ionicons.js"></script>

This <script> tag allows us to grab from Ionicon’s set of 700+ icons via ion-icon components with specified name attributes.

Within the html’s <head>, add a <link> tag to link to an external style sheet named style.css. We’ll need CSS to specify the links’ properties later on.

<link rel="stylesheet" type="text/css" href="style.css">

Next, start to build out the social media list as an unordered list. Each <li>, or list item, will be dedicated to a single social media icon — in our case, Facebook, Twitter, Instagram, and Github. Within each <li> element, add an <a> anchor tag with href values that link to the corresponding social media page or account. Then within each anchor tag, add in the ion-icon component. The entire html code should look something like the following:

On to stylizing with CSS!

Because we created an unordered list, the icons will be preceded by bullet points by default. To get rid of the bullet points, target the <ul> tag with a CSS class and change its list-style property to a value of “none”.

.social-media-list {
    list-style: none;
}

Target the list items as well within the list of social media icons such that their display property is “inline-block”. This will arrange the icons into a single line. While you’re at it, add a right margin of “1em” and enlarge the icons. Sizing, margin, and other style attributes will depend on the design of your app, so adjust accordingly and as needed.

.social-media-list li {
    display: inline-block;
    margin-right: 1em;
    font-size: 180%;
}

We’ll also change the default blue color of the links to a more neutral tone and add in a transition for the color property with a 0.5 second interval.

.social-media-list li a {
    color: #888;
    transition: color 0.5s;
}

Finally, find the official HEX colors for the social media brands. We’ll use these to specify what color the icons will transition into once we hover over them. Here is an example of targeting the Facebook logo to change into its blue color on hover:

.logo-facebook:hover {
    color: #3b5998
}

With that, you will get the following icon list:

Thanks for sticking through this short walkthrough. Happy designing and coding!

Quick and Easy Way to Implement a Social Media Icon List with Hover effect

Written by Robin Kim

Responses (1)