<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Social Media Icons With Font Awesome</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  </head>
  <body>
    <div class="col-xs-12 text-center">
      <h2>Social Media Icons With Font Awesome!</h2></div>
    <div class="social-media-icons col-xs-12">
            <ul class="list-inline col-xs-12">
              <a href="#"><i class="fa fa-google-plus-square fa-5x"></i></a>
              <a href="#"><i class="fa fa-twitter-square fa-5x"></i></a>
              <a href="#"><i class="fa fa-youtube-square fa-5x"></i></a>
              <a href="#"><i class="fa fa-rss-square fa-5x"></i></a>               
            </ul>
          </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  </body>
</html>
.social-media-icons ul {
    list-style: none;
    padding: 0;
    text-align: center;
}

.social-media-icons a {	
	display: inline-block;
	text-decoration: none;
	padding: 7px;
}

.social-media-icons a:nth-child(1) i {
	color: #d34836;
}

.social-media-icons a:nth-child(2) i {
	color: #4099FF;
}

.social-media-icons a:nth-child(3) i {
	color: #b31217;
}

.social-media-icons a:nth-child(4) i {
	color: #FF6600;
}

.social-media-icons a i:hover{
	color: black;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.