Font Awesome Social Icons

To create the social icons displayed on the various sites I worked on takes a bit of setting up.

First you will need Font Awesome, which can be added using the simple code here:

Next you will need to add some php code to your site.

As I use an Understrap Child Theme I copied “header.php” from the parent theme Understrap.

Then i added this code containing the ul class “socialiconz” and a list of blank placeholder icons:

<ul class="socialiconz">
<!-- 	DEFAULT SEARCH (FOR A GOOGLE SEARCH PAGE) -->
	<li class="ssi-search">
		<a href='/search_gcse'>
			<i class="fas fa-search">
			</i>
		</a>
	</li>
<!-- 	DEFAULT SEARCH END -->
						
<!-- 	BLANK PLACEHOLDERS -->
	<!--FACEBOOK-->
	<li class="ssi-facebook">
		<a href='https://fb.com/'>
			<i class="fab fa-facebook">
			</i>
		</a>
	</li>
	<!--FACEBOOK END-->
	<!--INSTAGRAM-->
	<li class="ssi-instagram">
		<a href='https://instagram.com/'>
			<i class="fab fa-instagram">
			</i>
		</a>
	</li>
	<!--INSTAGRAM END-->
	<!--TWITTER-->
	<li class="ssi-twitter">
		<a href='https://twitter.com/'>
			<i class="fab fa-twitter">
			</i>
		</a>
	</li>
	<!--TWITTER END-->
	<!--YOUTUBE-->
	<li class="ssi-youtube">
		<a href='https://www.youtube.com/'>
			<i class="fab fa-youtube">
			</i>
		</a>
	</li>
	<!--YOUTUBE END-->
	<!--LINKEDIN-->
	<li class="ssi-linkedin">
		<a href='https://www.linkedin.com/'>
			<i class="fab fa-linkedin">
			</i>
		</a>
	</li>
	<!--LINKEDIN END-->
	<!--PINTEREST-->
	<li class="ssi-pinterest">
		<a href='https://www.pinterest.co.uk/'>
			<i class="fab fa-pinterest">
			</i>
		</a>
	</li>
	<!--PINTEREST END-->
<!-- 	BLANK PLACEHOLDERS END -->
</ul>

Finally you need to style the social icons.

Often the icons won’t even show up until you set their height or width as it defaults to 0.

To match my styling simply add this code to “Additional CSS”:

/**
 * Styles social icons.
 */
ul.socialiconz {
	margin-left:0px!important;
	margin-right:0px!important;
	padding-left:0px!important;
	margin-top:0px!important;
	margin-bottom:0px!important;
	float: none;
	display: inline-block;
}
ul.socialiconz li { 
	display: inline!important;
	float:right!important;
	height:25px!important;
	padding-left:30px;
} 
ul.socialiconz >li:last-child {
	padding-left:0px!important;
}
ul.socialiconz li a svg { 
	color:#a6191a;
	width:25px!important;
	height:25px!important;
} 
ul.socialiconz li a :hover { 
	color:darkgray;

} 

Leave a Reply