Creating a Social Media Menu from Icon Fonts with FontAwesome

March 29, 2021 -

How to make social media menus from icon fonts using the awesome FontAwesome. Fontawesome is widely used and supported in all modern browsers and older browsers.

 

Fontawesome Menu Social

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">

You can link to the Fontawesome CSS file via a CDN or just copy the download it to your site. If using WordPress you can register and enqueue the CSS style.

With the CSS file in place, choose the icons you need, the social media ones are found in the free brands section, just click the one you need to get the HTML code.

Twitter Icon Fontawesome

Here the Twitter html code given is:

<i class="fab fa-twitter-square"></i>

The code is the icon with 2 CSS classes wrapped in a <i></i> tag.
For a full menu that includes Facebook, LinkedIn, Twitter,Instagram and YouTube, structure the mark up in a list surrounding the fontawesome code with a link tag which will link the icon to the social media page:

<ul>
<li><a href="https://facebook.com/"><i class="fab fa-facebook"></i></a></li>
<li><a href="https://linkedin.com/"><i class="fab fa-linkedin"></i></a></li>
<li><a href="https://twitter.com/"><i class="fab fa-twitter"></i></a></li>
<li><a href="https://linkedin.com/"><i class="fab fa-instagram"></i></a></li>
<li><a href="https://twitter.com/"><i class="fab fa-youtube"></i></a></li>
</ul>

By default we get something like this which inherits any styles we have in our website....

So now CSS needs to be applied, add a class social-menu to the main menu ul element so styles can be applied.

<ul class="social-menu"> 
<li><a href="https://facebook.com/"><i class="fab fa-facebook"></i></a></li>
<li><a href="https://linkedin.com/"><i class="fab fa-linkedin"></i></a></li> 
<li><a href="https://twitter.com/"><i class="fab fa-twitter"></i></a></li>
<li><a href="https://linkedin.com/"><i class="fab fa-instagram"></i></a></li> 
<li><a href="https://twitter.com/"><i class="fab fa-youtube"></i></a></li>
 </ul>

Then we add some CSS to syle it.

.social-menu {
	display: flex;
	list-style-type: none;
}
 
.social-menu i {
	color: #fff;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	font-size: 25px;
	margin-right: 10px;
	transition: all 0.2s ease-in-out;
	display: flex;
	justify-content: center;
}

.social-menu i:before {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
        font-weight: 400;
}

.social-menu a {
	text-decoration: none;
}

The first CSS selector gets rid of the bulleted list and aligns the elements in a row by applying a flex property.

The second CSS selector sets the background and foreground colors, it creates the circle background by declaring the same value for the width and height and 50% value for the border radius. You will need to use flex propertiesalso to control the vertical spacing of the child element.

It also needs the font weight set to 400, a requirement for the brands icon set of Fontawesome.

To add the social media default colors you just add some extra CSS rules

.fa-facebook {
	background:#3b5998
} 

.fa-linkedin {
	background:#007bb6
}

.fa-twitter {
	background:#00aced
}

.fa-instagram {
	background:#3f729b
}

.fa-youtube {
	background:#c4302b
}

To add in a hover state transition, a bit more CSS

.social-menu i:hover {
	opacity: .7;
	border-radius: 0;
}

Output below...

Full code...

Related Posts:

Categorized CSS Tagged ,