Social Icons as pseudoelements

Tutorials of (Social icons as pseudoelements) by Ricardo prieto

<!DOCTYPE html>
<html >
  <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;
/* Downloaded from */

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

2018 © Ricardo Prieto