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

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. The outcome will look something like this…

Image for post
Image for post

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

Overall style.css will end up looking something like this:

Image for post
Image for post

The code in index.html and style.css will together create an easy and interactive social media icon list that responds to hover events. Happy designing and coding!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store