Social Icons as pseudoelements

In this example below you will see how to do a Social Icons as pseudoelements with some HTML / CSS and Javascript

This awesome code was written by ricardpriet, you can see more from this user in the personal repository.
You can find the original code on
Copyright ricardpriet ©


  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <title>Social Icons as pseudoelements</title>
  <link rel='stylesheet prefetch' href=''>

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



  <div id="menu-social" class="menu">
  <ul id="menu-social-items" class="menu-items">
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li> 
    <li><a href=""></a></li>



/*Downloaded from */
#menu-social {
padding: 20px 0;
background-color: #343a4a;
#menu-social ul {
list-style: none;
text-align: center;
margin: 0;
padding: 10px 0;
#menu-social ul li {
display: inline-block;
position: relative;
#menu-social li a {
color: #F7C00A;
margin: 0 10px;
#menu-social li a:hover {
color: #c68e02;
#menu-social li a::before {
	content: "\f135";
	display: inline-block;
	padding: 0 5px;
	font-family: FontAwesome;
	font-size: 26px;
	vertical-align: middle;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

#menu-social li a[href*=""]::before {
	content: "\f09a";
#menu-social li a[href*=""]::before {
	content: "\f099";
#menu-social li a[href*=""]::before {
	content: "\f0d5";
a {
-webkit-transition: .15s all linear;
-moz-transition: .15s all linear;
-o-transition: .15s all linear;
transition: .15s all linear;