FontAwesome Social Media Menu

socialmenu.html

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

<style>
.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;
}

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

.fa-facebook {
	background:#3b5998
} 

.fa-linkedin {
	background:#007bb6
}

.fa-twitter {
	background:#00aced
}

.fa-instagram {
	background:#3f729b
}

.fa-youtube {
	background:#c4302b
}

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

</style>
 
<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://instagram.com/"><i class="fab fa-instagram"></i> </a></li>
    <li><a href="https://youtube.com/"><i class="fab fa-youtube"></i> </a></li>
</ul>

Thanks, Neil.

At line 34, there is a typo.

.google-plus

should be

.fa-google-plus