These animated icons can be used for almost anything and are very easy to change. They can add something different to your page.

CSS

/* Red Circle's Animation and styling Code */
.service-circle, .service-box, .service-icon {
	margin:auto;
	-webkit-transition-timing-function: cubic-bezier(0.13, 0.71, 0.30, 0.94);
	-moz-transition-timing-function: cubic-bezier(0.13, 0.71, 0.30, 0.94);
	-o-transition-timing-function: cubic-bezier(0.13, 0.71, 0.30, 0.94);
	transition-timing-function: cubic-bezier(0.13, 0.71, 0.30, 0.94);
	-webkit-transition-duration: 0.5s;
	-moz-transition-duration: 0.5s;
	-o-transition-duration: 0.5s;
	transition-duration: 0.5s;
}

.service-circle{
	position: relative;
	display: block;
	width: 125px;
	height: 125px;
	text-align: center;
	border-radius: 108px;
	margin-bottom: 30px;
	overflow: hidden;
}

.service-circle {
	-webkit-box-shadow: inset #B02B2C 0 0 0 3px;
	-moz-box-shadow: inset #b02b2c 0 0 0 3px;
	box-shadow: inset #B02B2C 0 0 0 3px;
}

.service-circle .fa {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 125px;
	height: 125px;
	font-size: 50px;
	line-height: 125px;
	color: #B02B2C;
}

.service-circle .circle {
	background: #B02B2C;
}

.service-circle .circle {
	display: block;
	position: absolute;
	top: 12px;
	left: 12px;
	width: 101px;
	height: 101px;
	border-radius: 96px;
}

.service-circle .circle {
	-webkit-transition-timing-function: cubic-bezier(0.13, 0.71, 0.30, 0.94);
	-moz-transition-timing-function: cubic-bezier(0.13, 0.71, 0.30, 0.94);
	-o-transition-timing-function: cubic-bezier(0.13, 0.71, 0.30, 0.94);
	transition-timing-function: cubic-bezier(0.13, 0.71, 0.30, 0.94);
	-webkit-transition-duration: 0.5s;
	-moz-transition-duration: 0.5s;
	-o-transition-duration: 0.5s;
	transition-duration: 0.5s;
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	-o-transform: scale(0);
	-ms-transform: scale(0);
	transform: scale(0);
}

.service:hover .service-circle {
	-webkit-box-shadow: inset #B02B2C 0 0 0 10px;
	-moz-box-shadow: inset #b02b2c 0 0 0 10px;
	box-shadow: inset #B02B2C 0 0 0 10px;
}

.service:hover .service-circle .circle {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-o-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}

.service:hover .service-circle .fa {
	color: #FFF;
}

.service-circle .fa {
	-webkit-transition-timing-function: cubic-bezier(0.13, 0.71, 0.30, 0.94);
	-moz-transition-timing-function: cubic-bezier(0.13, 0.71, 0.30, 0.94);
	-o-transition-timing-function: cubic-bezier(0.13, 0.71, 0.30, 0.94);
	transition-timing-function: cubic-bezier(0.13, 0.71, 0.30, 0.94);
	-webkit-transition-duration: 0.5s;
	-moz-transition-duration: 0.5s;
	-o-transition-duration: 0.5s;
	transition-duration: 0.5s;
}

.service-circle, .service-box, .service-icon {
	-webkit-transition-timing-function: cubic-bezier(0.13, 0.71, 0.30, 0.94);
	-moz-transition-timing-function: cubic-bezier(0.13, 0.71, 0.30, 0.94);
	-o-transition-timing-function: cubic-bezier(0.13, 0.71, 0.30, 0.94);
	transition-timing-function: cubic-bezier(0.13, 0.71, 0.30, 0.94);
	-webkit-transition-duration: 0.5s;
	-moz-transition-duration: 0.5s;
	-o-transition-duration: 0.5s;
	transition-duration: 0.5s;
}

HTML

<div>

	<div class="service" style="float: left; width: 30%; min-width: 180px; margin: 5px;">
		<div class="service-circle">
			<div class="circle"></div>
			<i class="link-icon fa fa-car"></i>
		</div>
		<h2>Design.</h2>
		<p>
		We design and build responsive, functional web solutions for clients all across the UK. Working closely with you to ensure that you get the best possible product.
		</p>
	</div>
	
	<div class="service" style="float: left; width: 30%; min-width: 180px; margin: 5px;">
		<div class="service-circle">
			<div class="circle"></div>
			<span class="link-icon fa fa-phone"></span>
		</div>
		<h2>Develop.</h2>
		<p>
		We believe in maintaining our design and code standards. We do not cut corners. The result is fantastic bespoke websites completely tailored to your business.
		</p>
	</div>
	
	<div class="service" style="float: left; width: 30%; min-width: 180px; margin: 5px;">
		<div class="service-circle">
			<div class="circle"></div>
			<i class="link-icon fa fa-user"></i>
		</div>
		<h2>Support.</h2>
		<p>
		Our support team are ready to help with any queries you may have. From email support, queries regarding your website to sales and upgrades.
		</p>
	</div>
	
</div>

Changes

Make Circles Larger

/* Make Circles Larger */
.service-circle{
    width: 216px;
    height: 216px;
}

.service-circle .fa {
    width: 216px;
    height: 216px;
    font-size: 100px;
    line-height: 216px;
}

.service-circle .circle {
    width: 192px;
    height: 192px;
}

Change Colour

/* Change Colour */
.service-circle {
    -webkit-box-shadow: inset #B02B2C 0 0 0 3px;
    -moz-box-shadow: inset #b02b2c 0 0 0 3px;
    box-shadow: inset #B02B2C 0 0 0 3px;
}

.service-circle .fa {
    color: #B02B2C;
}

.service-circle .circle {
    background: #B02B2C;
}

.service:hover .service-circle {
    -webkit-box-shadow: inset #B02B2C 0 0 0 10px;
    -moz-box-shadow: inset #b02b2c 0 0 0 10px;
    box-shadow: inset #B02B2C 0 0 0 10px;
}

Notes

• Depending on you implementation of Font Awesome your code for the icon can be slightly different. You might need to play around with the syntax.

  Original code from www.web-easy-sites.co.uk
  <i class="fa icon-line-speech-bubble"></i>
  
  JSN Time
  <i class="link-icon fa fa-car"></i>
  
  NS Font Awesome 
  <i class="fa fa-bar-chart-o fa-4"></i>
  ** the fa-4 is a preset size and does not need to be used

• You can probably use other vector icons instead.