Social Icons as pseudoelements

Tutorials of (Social icons as pseudoelements) by Ricardo prieto

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Social Icons as pseudoelements</title>
  
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css'>

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

  
</head>

<body>
  <div id="menu-social" class="menu">
  <ul id="menu-social-items" class="menu-items">
    <li><a href="https://www.facebook.com/silocreativo"></a></li>
    <li><a href="https://twitter.com/silocreativo"></a></li>
    <li><a href="https://plus.google.com/111995142667713146649/posts"></a></li> 
    <li><a href="http://www.silocreativo.com/"></a></li>
  </ul>
</div>
  
  
</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
#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*="facebook.com"]::before {
	content: "\f09a";
}
#menu-social li a[href*="twitter.com"]::before {
	content: "\f099";
}
#menu-social li a[href*="plus.google.com"]::before {
	content: "\f0d5";
}
a {
-webkit-transition: .15s all linear;
-moz-transition: .15s all linear;
-o-transition: .15s all linear;
transition: .15s all linear;
}
/* Downloaded from https://www.codeseek.co/ */

This awesome code ( Social Icons as pseudoelements ) is write by Ricardo Prieto, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Ricardo Prieto