<ul>
	<li>
		<i class="fa fa-twitter"></i>
		<p>Twitter</p>
	</li>
	<li>
		<i class="fa fa-facebook"></i>
		<p>Facebook</p>
	</li>
	<li>
		<i class="fa fa-google-plus"></i>
		<p>Google+</p>
	</li>
	<li>
		<i class="fa fa-pinterest-p"></i>
		<p>Pinterest</p>
	</li>
	<li>
		<i class="fa fa-instagram"></i>
		<p>Instagram</p>
	</li>
</ul>
body {
	overflow: hidden;
}
ul {
	position: relative;
	list-style: none;
	width: 300px;
	height: 300px;
	margin: 40px auto 0;
	padding: 0;
	animation: rotate 30s linear infinite;
}
@keyframes rotate {
	100% { transform: rotate(360deg); }
}
ul li {
	position: absolute;
	width: 100px;
	height: 100px;
	margin: 0;
	padding: 30px 0 0;
	border-radius: 50%;
	color: #fff;
	text-align: center;
	box-sizing: border-box;
}
ul li .fa {
	font-size: 26px;
}
ul li p {
	margin: 5px 0 0;
	font: 400 13px/1 'Lato', sans-serif;
}
ul li:nth-child(1) {
	top: 0;
	left: 100px;
	background-color: #55acee;
}
ul li:nth-child(2) {
	top: 70px;
	left: 5px;
	background-color: #3b5998;
}
ul li:nth-child(3) {
	top: 70px;
	right: 5px;
	background-color: #dc4e41;
}
ul li:nth-child(4) {
	bottom: 20px;
	left: 40px;
	background-color: #bd081c;
}
ul li:nth-child(5) {
	bottom: 20px;
	right: 40px;
	background-color: #125688;
}
Run Pen

External CSS

  1. https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css
  2. https://fonts.googleapis.com/css?family=Lato

External JavaScript

This Pen doesn't use any external JavaScript resources.