This is a cool 4 point graph with animation and CSS effects. I have changed this to work with FontAwesome. You need to include the optional CSS and Javascript to get some of the animations which are triggered by the Waypoint code.

CSS

/* FEATURE GRAPH */

/* It is the padding of the items and the amnount of text, the template.css rule and the amount of text that is causing the boggle */
/* I need to hive off each of the top items so the text push and padding matchines up*/
/* less text would make things better */
/* the grey bar goes to the bottom of the padding */

/* from template.css line 667 - corrects the template.css rule 'div.grid-col' - check for others in yopur template */
.jsn-demo-page #demo-feature-graph div.grid-col {
	margin-bottom: 0;
}

.jsn-demo-page #demo-feature-graph {
	/*padding: 50px 0;*/
	/*background-color: #f6fafc;*/
}
.jsn-demo-page #demo-feature-graph .feature-graph {
	padding: 0;
}
.jsn-demo-page #demo-feature-graph .feature-graph:first-child {
	border-bottom: 3px solid #cbd4d8;
}
.jsn-demo-page #demo-feature-graph .feature-graph .graph-item {
	overflow: hidden;
}
/* this controls the height of the items - i might need to hive this of for indivduals items */
.jsn-demo-page #demo-feature-graph .feature-graph .graph-item .graph-item-inner {
	padding: 60px 0 0 0; /* slightly different removing the bottom padding makes the first bubble work correctely*/
	width: 300px; /* This controls the width of an item */
	max-width: 100%;
}
/* add individual item overrides here for padding to correct the vertical bar meeting */
/*.jsn-demo-page #demo-feature-graph .feature-graph .graph-item.item2 .graph-item-inner {
	padding-bottom: 52px;
}*/

.jsn-demo-page #demo-feature-graph .feature-graph .graph-item [class*="link-icon fa fa-"] {
	position: relative;
	float: left;
	display: block;
	width: 75px;
	height: 75px;
	color: #fff;
	background-color: #222;
	font-size: 2.5em;
	line-height: 72px;
	text-align: center;
	border-radius: 100%;
	-moz-border-radius: 100%;
	-webkit-border-radius: 100%;
	transform: scale(1,1);
	-moz-transform: scale(1,1);
	-webkit-transform: scale(1,1);
	transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-webkit-transition: all 0.2s ease-in-out;
}
.jsn-demo-page #demo-feature-graph .feature-graph .graph-item-inner:hover [class*="link-icon fa fa-"] {
	transform: scale(1.5,1.5);
	-moz-transform: scale(1.5,1.5);
	-webkit-transform: scale(1.5,1.5);
}
.jsn-demo-page #demo-feature-graph .feature-graph .item1 [class*="link-icon fa fa-"] {
	background-color: #5bace2;
}
.jsn-demo-page #demo-feature-graph .feature-graph .item2 [class*="link-icon fa fa-"] {
	background-color: #6ece97;
}
.jsn-demo-page #demo-feature-graph .feature-graph .item3 [class*="link-icon fa fa-"] {
	background-color: #e9974e;
}
.jsn-demo-page #demo-feature-graph .feature-graph .item4 [class*="link-icon fa fa-"] {
	background-color: #c08dd7;
}
.jsn-demo-page #demo-feature-graph .feature-graph .graph-item .text {
	padding-left: 120px;
}
.jsn-demo-page #demo-feature-graph .feature-graph .graph-item .text .heading {
	text-transform: uppercase;
	font-size: 1.65em;
	line-height: 1.65em;
	margin: 0;
	padding: 20px 0 0;
	letter-spacing: 3px;
}
.jsn-demo-page #demo-feature-graph .feature-graph .item1 .graph-item-inner,
.jsn-demo-page #demo-feature-graph .feature-graph .item3 .graph-item-inner {
	float: right;
}
.jsn-demo-page #demo-feature-graph .feature-graph .item2 .graph-item-inner,
.jsn-demo-page #demo-feature-graph .feature-graph .item4 .graph-item-inner {
	float: left;
}

/* BOF Item offset */
.jsn-demo-page #demo-feature-graph .feature-graph .item1 .graph-item-inner {
	padding-right: 150px;
}
.jsn-desktop.jsn-demo-page #demo-feature-graph .feature-graph .item1 .graph-item-inner {
	padding-right: 0;
}
.jsn-demo-page #demo-feature-graph .feature-graph .item2 .graph-item-inner {
	padding-left: 50px;
}
.jsn-demo-page #demo-feature-graph .feature-graph .item3 .graph-item-inner {
	padding-right: 0;
	width: 350px;
}
.jsn-demo-page #demo-feature-graph .feature-graph .item4 .graph-item-inner {
	padding-left: 100px;
}
/* EOF Of Item offset */

.jsn-demo-page #demo-feature-graph .feature-graph .graph-item [class*="link-icon fa fa-"]:after {
	content: "";
	display: block;
	position: absolute;
	width: 3px;
	height: 200px;
	background-color: #cbd4d8;
	left: 50%;
	margin-left: -2px;
}
/* top item vertical bar location */
.jsn-demo-page #demo-feature-graph .feature-graph .item1 [class*="link-icon fa fa-"]:after,
.jsn-demo-page #demo-feature-graph .feature-graph .item2 [class*="link-icon fa fa-"]:after {
	top: 90px;
}
/* bottom item vertical grey bars this controls the height - the smaller the number the longer the line */
.jsn-demo-page #demo-feature-graph .feature-graph .item3 [class*="link-icon fa fa-"]:after,
.jsn-demo-page #demo-feature-graph .feature-graph .item4 [class*="link-icon fa fa-"]:after {
	bottom: 90px;
}

/* ===== RESPONSIVE OPTIMIZING ===== */
@media only screen and (max-width: 1100px), (max-device-width: 1100px) {
	.jsn-desktop.jsn-demo-page #demo-feature-graph {
		padding: 50px;
	}
}

@media only screen and (max-width: 960px), (max-device-width: 960px) {	
	/* Feature graph */
	.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph .graph-item .graph-item-inner {
		width: 300px;
	}
	.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph .item1 .graph-item-inner {
		padding-right: 50px;
	}
	.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph .item2 .graph-item-inner {
		padding-left: 0;
	}
	.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph .item3 .graph-item-inner {
		padding-right: 0;
		width: 280px;
	}
	.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph .item4 .graph-item-inner {
		padding-left: 50px;
	}
}

@media only screen and (max-width: 480px), (max-device-width: 480px) {
	.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph .graph-item [class*="link-icon fa fa-"]:after {
		display: none;
	}
	.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph .graph-item {
		padding: 0 40px;
	}
	.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph .graph-item .graph-item-inner {
		padding: 30px 0;
		float: none;
		width: auto;
		text-align: center;
	}
	.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph:first-child {
		border: none;
	}
	.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph .graph-item .text {
		padding-left: 0;
	}
	.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph .graph-item .text .heading {
		font-size: 1.2em;
		line-height: 1.8em;
	}
	.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph .graph-item [class*="link-icon fa fa-"] {
		float: none;
		margin: 0 auto;
	}
	.jsn-mobile.jsn-demo-page #demo-feature-graph .feature-graph .graph-item-inner:hover [class*="link-icon fa fa-"] {
		transform: none;
		-moz-transform: none;
		-webkit-transform: none;
	}
}

CSS (Optional / Animation / Waypoints)

This code allows the icons to animate into existance when they are scolled too. I do not know if all of this code is required.

/* ===== WAYPOINT ONSCROLL ACTION ===== */
/* Waypoint by http://imakewebthings.com/jquery-waypoints/ */

/* Declare scale-fade animation */
@keyframes scale-fade
	{
		0% 		{ 	transform:scale(0.5);
					opacity:0;
					filter: alpha(opacity=0);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
				}
		100% 	{ 	transform:scale(1);
					opacity:1;
					filter: alpha(opacity=100);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
				}
	}
@-moz-keyframes scale-fade
	{
		0% 		{ 	-moz-transform:scale(0.5);
					opacity:0;
					filter: alpha(opacity=0);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
				}
		100% 	{ 	-moz-transform:scale(1);
					opacity:1;
					filter: alpha(opacity=100);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
				}
	}
@-webkit-keyframes scale-fade
	{
		0% 		{ 	-webkit-transform:scale(0.5);
					opacity:0;
					filter: alpha(opacity=0);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
				}
		100% 	{ 	-webkit-transform:scale(1);
					opacity:1;
					filter: alpha(opacity=100);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
				}
	}

/* Declare translate-fade animation */
@keyframes translate-fade
	{
		0% 		{ 	transform:translate(0,50px);
					opacity:0;
					filter: alpha(opacity=0);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
				}
		100% 	{ 	transform:translate(0,0);
					opacity:1;
					filter: alpha(opacity=100);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
				}
	}
@-moz-keyframes translate-fade
	{
		0% 		{ 	-moz-transform:translate(0,50px);
					opacity:0;
					filter: alpha(opacity=0);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
				}
		100% 	{ 	-moz-transform:translate(0,0);
					opacity:1;
					filter: alpha(opacity=100);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
				}
	}
@-webkit-keyframes translate-fade
	{
		0% 		{ 	-webkit-transform:translate(0,50px);
					opacity:0;
					filter: alpha(opacity=0);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
				}
		100% 	{ 	-webkit-transform:translate(0,0);
					opacity:1;
					filter: alpha(opacity=100);
					-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
				}
	}

.appearing .project-item,
.appearing .main-features .feature-item [class*="fa fa-"],
.appearing .graph-item .graph-item-inner,
.appearing .stat-group .counting-number {
	opacity:0;
	filter: alpha(opacity=0);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	-moz-transform: scale(0.5);
	-webkit-transform: scale(0.5);
	-ms-transform: scale(0.5);
	transform: scale(0.5);
	transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
}
.appearing.scroll-action .project-item,
.appearing.scroll-action .main-features .feature-item [class*="fa fa-"],
.appearing.scroll-action .graph-item .graph-item-inner,
.appearing.scroll-action .stat-group .counting-number  {
	-webkit-animation: scale-fade 0.8s 1 cubic-bezier(0,.61,.46,1.33);
	-moz-animation: scale-fade 0.8s 1 cubic-bezier(0,.61,.46,1.33);
	animation: scale-fade 0.8s 1 cubic-bezier(0,.61,.46,1.33);
	opacity:1;
	filter: alpha(opacity=100);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	-moz-transform: scale(1);
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
}

.appearing .apple-devices {
	opacity:0;
	filter: alpha(opacity=0);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	-moz-transform: translate(0,50px);
	-webkit-transform: translate(0,50px);
	-ms-transform: translate(0,50px);
	transform: translate(0,50px);
	transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
}
.appearing.scroll-action .apple-devices  {
	-webkit-animation: translate-fade 1s 1 ease-in-out;
	-moz-animation: translate-fade 1s 1 ease-in-out;
	animation: translate-fade 1s 1 ease-in-out;
	opacity:1;
	filter: alpha(opacity=100);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	-moz-transform: translate(0,0);
	-webkit-transform: translate(0,0);
	-ms-transform: translate(0,0);
	transform: translate(0,0);
}
.scroll-down {
}
.scroll-down.scroll-action {
	opacity:0;
	filter: alpha(opacity=0);
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
}

JS (Optional / Animation / Waypoints)

/* ==================== JSN MINI CUSTOM JS ==================== */

// i have seperated out each complete function with //----------------------------------------
// use the whole file for Mini effects and just delete stuff you do not want

setTimeout(function() {
(function($) {

//----------------------------------------

// intiates the Waypoints codebase
// This causes animations to be paused until triggered by the Waypoints code
// Waypoints are configured later

/* Waypoints */
(function(){var t=[].indexOf||function(t){for(var e=0,n=this.length;e<n;e++){if(e in this&&this[e]===t)return e}return-1},e=[].slice;(function(t,e){if(typeof define==="function"&&define.amd){return define("waypoints",["jquery"],function(n){return e(n,t)})}else{return e(t.jQuery,t)}})(window,function(n,r){var i,o,l,s,f,u,c,a,h,d,p,y,v,w,g,m;i=n(r);a=t.call(r,"ontouchstart")>=0;s={horizontal:{},vertical:{}};f=1;c={};u="waypoints-context-id";p="resize.waypoints";y="scroll.waypoints";v=1;w="waypoints-waypoint-ids";g="waypoint";m="waypoints";o=function(){function t(t){var e=this;this.$element=t;this.element=t[0];this.didResize=false;this.didScroll=false;this.id="context"+f++;this.oldScroll={x:t.scrollLeft(),y:t.scrollTop()};this.waypoints={horizontal:{},vertical:{}};this.element[u]=this.id;c[this.id]=this;t.bind(y,function(){var t;if(!(e.didScroll||a)){e.didScroll=true;t=function(){e.doScroll();return e.didScroll=false};return r.setTimeout(t,n[m].settings.scrollThrottle)}});t.bind(p,function(){var t;if(!e.didResize){e.didResize=true;t=function(){n[m]("refresh");return e.didResize=false};return r.setTimeout(t,n[m].settings.resizeThrottle)}})}t.prototype.doScroll=function(){var t,e=this;t={horizontal:{newScroll:this.$element.scrollLeft(),oldScroll:this.oldScroll.x,forward:"right",backward:"left"},vertical:{newScroll:this.$element.scrollTop(),oldScroll:this.oldScroll.y,forward:"down",backward:"up"}};if(a&&(!t.vertical.oldScroll||!t.vertical.newScroll)){n[m]("refresh")}n.each(t,function(t,r){var i,o,l;l=[];o=r.newScroll>r.oldScroll;i=o?r.forward:r.backward;n.each(e.waypoints[t],function(t,e){var n,i;if(r.oldScroll<(n=e.offset)&&n<=r.newScroll){return l.push(e)}else if(r.newScroll<(i=e.offset)&&i<=r.oldScroll){return l.push(e)}});l.sort(function(t,e){return t.offset-e.offset});if(!o){l.reverse()}return n.each(l,function(t,e){if(e.options.continuous||t===l.length-1){return e.trigger([i])}})});return this.oldScroll={x:t.horizontal.newScroll,y:t.vertical.newScroll}};t.prototype.refresh=function(){var t,e,r,i=this;r=n.isWindow(this.element);e=this.$element.offset();this.doScroll();t={horizontal:{contextOffset:r?0:e.left,contextScroll:r?0:this.oldScroll.x,contextDimension:this.$element.width(),oldScroll:this.oldScroll.x,forward:"right",backward:"left",offsetProp:"left"},vertical:{contextOffset:r?0:e.top,contextScroll:r?0:this.oldScroll.y,contextDimension:r?n[m]("viewportHeight"):this.$element.height(),oldScroll:this.oldScroll.y,forward:"down",backward:"up",offsetProp:"top"}};return n.each(t,function(t,e){return n.each(i.waypoints[t],function(t,r){var i,o,l,s,f;i=r.options.offset;l=r.offset;o=n.isWindow(r.element)?0:r.$element.offset()[e.offsetProp];if(n.isFunction(i)){i=i.apply(r.element)}else if(typeof i==="string"){i=parseFloat(i);if(r.options.offset.indexOf("%")>-1){i=Math.ceil(e.contextDimension*i/100)}}r.offset=o-e.contextOffset+e.contextScroll-i;if(r.options.onlyOnScroll&&l!=null||!r.enabled){return}if(l!==null&&l<(s=e.oldScroll)&&s<=r.offset){return r.trigger([e.backward])}else if(l!==null&&l>(f=e.oldScroll)&&f>=r.offset){return r.trigger([e.forward])}else if(l===null&&e.oldScroll>=r.offset){return r.trigger([e.forward])}})})};t.prototype.checkEmpty=function(){if(n.isEmptyObject(this.waypoints.horizontal)&&n.isEmptyObject(this.waypoints.vertical)){this.$element.unbind([p,y].join(" "));return delete c[this.id]}};return t}();l=function(){function t(t,e,r){var i,o;if(r.offset==="bottom-in-view"){r.offset=function(){var t;t=n[m]("viewportHeight");if(!n.isWindow(e.element)){t=e.$element.height()}return t-n(this).outerHeight()}}this.$element=t;this.element=t[0];this.axis=r.horizontal?"horizontal":"vertical";this.callback=r.handler;this.context=e;this.enabled=r.enabled;this.id="waypoints"+v++;this.offset=null;this.options=r;e.waypoints[this.axis][this.id]=this;s[this.axis][this.id]=this;i=(o=this.element[w])!=null?o:[];i.push(this.id);this.element[w]=i}t.prototype.trigger=function(t){if(!this.enabled){return}if(this.callback!=null){this.callback.apply(this.element,t)}if(this.options.triggerOnce){return this.destroy()}};t.prototype.disable=function(){return this.enabled=false};t.prototype.enable=function(){this.context.refresh();return this.enabled=true};t.prototype.destroy=function(){delete s[this.axis][this.id];delete this.context.waypoints[this.axis][this.id];return this.context.checkEmpty()};t.getWaypointsByElement=function(t){var e,r;r=t[w];if(!r){return[]}e=n.extend({},s.horizontal,s.vertical);return n.map(r,function(t){return e[t]})};return t}();d={init:function(t,e){var r;e=n.extend({},n.fn[g].defaults,e);if((r=e.handler)==null){e.handler=t}this.each(function(){var t,r,i,s;t=n(this);i=(s=e.context)!=null?s:n.fn[g].defaults.context;if(!n.isWindow(i)){i=t.closest(i)}i=n(i);r=c[i[0][u]];if(!r){r=new o(i)}return new l(t,r,e)});n[m]("refresh");return this},disable:function(){return d._invoke.call(this,"disable")},enable:function(){return d._invoke.call(this,"enable")},destroy:function(){return d._invoke.call(this,"destroy")},prev:function(t,e){return d._traverse.call(this,t,e,function(t,e,n){if(e>0){return t.push(n[e-1])}})},next:function(t,e){return d._traverse.call(this,t,e,function(t,e,n){if(e<n.length-1){return t.push(n[e+1])}})},_traverse:function(t,e,i){var o,l;if(t==null){t="vertical"}if(e==null){e=r}l=h.aggregate(e);o=[];this.each(function(){var e;e=n.inArray(this,l[t]);return i(o,e,l[t])});return this.pushStack(o)},_invoke:function(t){this.each(function(){var e;e=l.getWaypointsByElement(this);return n.each(e,function(e,n){n[t]();return true})});return this}};n.fn[g]=function(){var t,r;r=arguments[0],t=2<=arguments.length?e.call(arguments,1):[];if(d[r]){return d[r].apply(this,t)}else if(n.isFunction(r)){return d.init.apply(this,arguments)}else if(n.isPlainObject(r)){return d.init.apply(this,[null,r])}else if(!r){return n.error("jQuery Waypoints needs a callback function or handler option.")}else{return n.error("The "+r+" method does not exist in jQuery Waypoints.")}};n.fn[g].defaults={context:r,continuous:true,enabled:true,horizontal:false,offset:0,triggerOnce:false};h={refresh:function(){return n.each(c,function(t,e){return e.refresh()})},viewportHeight:function(){var t;return(t=r.innerHeight)!=null?t:i.height()},aggregate:function(t){var e,r,i;e=s;if(t){e=(i=c[n(t)[0][u]])!=null?i.waypoints:void 0}if(!e){return[]}r={horizontal:[],vertical:[]};n.each(r,function(t,i){n.each(e[t],function(t,e){return i.push(e)});i.sort(function(t,e){return t.offset-e.offset});r[t]=n.map(i,function(t){return t.element});return r[t]=n.unique(r[t])});return r},above:function(t){if(t==null){t=r}return h._filter(t,"vertical",function(t,e){return e.offset<=t.oldScroll.y})},below:function(t){if(t==null){t=r}return h._filter(t,"vertical",function(t,e){return e.offset>t.oldScroll.y})},left:function(t){if(t==null){t=r}return h._filter(t,"horizontal",function(t,e){return e.offset<=t.oldScroll.x})},right:function(t){if(t==null){t=r}return h._filter(t,"horizontal",function(t,e){return e.offset>t.oldScroll.x})},enable:function(){return h._invoke("enable")},disable:function(){return h._invoke("disable")},destroy:function(){return h._invoke("destroy")},extendFn:function(t,e){return d[t]=e},_invoke:function(t){var e;e=n.extend({},s.vertical,s.horizontal);return n.each(e,function(e,n){n[t]();return true})},_filter:function(t,e,r){var i,o;i=c[n(t)[0][u]];if(!i){return[]}o=[];n.each(i.waypoints[e],function(t,e){if(r(i,e)){return o.push(e)}});o.sort(function(t,e){return t.offset-e.offset});return n.map(o,function(t){return t.element})}};n[m]=function(){var t,n;n=arguments[0],t=2<=arguments.length?e.call(arguments,1):[];if(h[n]){return h[n].apply(null,t)}else{return h.aggregate.call(null,n)}};n[m].settings={resizeThrottle:100,scrollThrottle:30};return i.on("load.waypoints",function(){return n[m]("refresh")})})}).call(this);
	
//----------------------------------------

// Now the javascript has been setup this code triggers all the effects
		
$(document).ready( function() 
	{	

	/* Add timeout for animation */
	// 'Back to', simplicity, the 6 grid with icons starting 'modern design'
		setTimeout(function(){
			$(".ping.title").addClass("pop");
		},1000);
		setTimeout(function(){
			$(".ping.desc").addClass("pop");
		},1200);
		setTimeout(function(){
			$(".ping.scroll-down").addClass("pop");
		},4500);

		/* Waypoint script to add action when scroll onto objects */
		/* This effect brought by http://imakewebthings.com/jquery-waypoints/ */
		
		// This sets the Waypoint triggers
		// Waypoints is the easiest way to trigger a function when you scroll to an element.
		// this adds a scrolling action to elements but not the 'counting up'
		// delete the ones you dont use
		$( '#demo-feature-graph' ).waypoint(function()
			{
				$( '#demo-feature-graph' ).addClass( 'scroll-action' );
			}, {
				offset: '70%'
			})
			
	});		
	
//----------------------------------------			

})(jQuery);
}, 0);

HTML

<div id="demo-feature-graph" class="appearing">

	<div class="grid-layout feature-graph">
		<div class="grid-col">
			<div class="graph-item item1 clearfix">
				<div class="graph-item-inner">
					<a href="#" class="link-icon fa fa-mobile"></a>
					<div class="text">
						<h3 class="heading"><a href="#">Mobile Ready</a></h3>
						<p class="desc">We have specialized in mobile ready websites for more than 2 years so we understand what is required when designing a responsive website.</p>
					</div>
				</div>
			</div>
		</div>
		<div class="grid-col">
			<div class="graph-item item2 clearfix">
				<div class="graph-item-inner">
					<a href="#" class="link-icon fa fa-search"></a>
					<div class="text">
						<h3 class="heading"><a href="#">SEO Optimized</a></h3>
						<p class="desc">Our websites as standard come with a lot of SEO work already done.</p>
					</div>
				</div>
			</div>
		</div>
	</div>
	
	<div class="grid-layout feature-graph">
		<div class="grid-col">
			<div class="graph-item item3 clearfix">
				<div class="graph-item-inner">
					<a href="#" class="link-icon fa fa-eyedropper"></a>
					<div class="text">
						<h3 class="heading"><a href="#">Various Styles</a></h3>
						<p class="desc">We have many styles and colours we can build your personalized site with.</p>
					</div>
				</div>
			</div>
		</div>
		<div class="grid-col">
			<div class="graph-item item4 clearfix">
				<div class="graph-item-inner">
					<a href="#" class="link-icon fa fa-folder-open-o"></a>
					<div class="text">
						<h3 class="heading"><a href="#">Our Portfolio</a></h3>
						<p class="desc">We have built up a good customer base because of our ongoing customer support</p>
					</div>
				</div>
			</div>
		</div>
	</div>
	
</div>

Notes

• This code is untouched from the original JSN Mini demo but collated in one place.
• The module name in JSN Mini is 'Feature Graph'
• There are notes in the CSS about which elements to alter
• you could swap jsn-demo-page  for jsn-feature-graph-module  etc.. in the css and java script and then either use that in the menu item or put it in the module
• Add the class suffix,  jsn-demo-page, to page
  
• To get this demo working without adding the page suffix .jsn-demo-page I wrapped the code in

  <div class="jsn-mobile jsn-demo-page"></div>

  • This simulates adding the class but this technique can also be used if you want to use it in a module.
  • You can remove the .jsn-demo-page from the CSS as another option instead of wrapping the CSS code in the<div> above.
• I changed the following from the original code to get working
  • Remmed out (Disabled background colour and padding)
    

    .jsn-demo-page #demo-feature-graph {
    	padding: 50px 0;
    	background-color: #f6fafc;
    }

  • Changed width 400px to 300px

    .jsn-demo-page #demo-feature-graph .feature-graph .graph-item .graph-item-inner {
    	padding: 60px 0 0 0; /* slightly different removing the bottom padding makes the first bubble work correctely*/
    	width: 400px; /* This controls the width of an item */
    	max-width: 100%;
    }

  • Changed all the icon references to a Font Awesome reference so I could use Font Awesome icons instead

    [class*="jsn-icon-"]
    
    to
    
    [class*="link-icon fa fa-"]

  • and I changed the icon references in the HTML. Each icon can be different reference.
    

    class="jsn-icon-cup"
    
    to
    
    class="link-icon fa fa-mobile"

  • added this extra rule
    

    	/* add individual item overrides here for padding to correct the vertical bar meeting */
    	.jsn-demo-page #demo-feature-graph .feature-graph .graph-item.item2 .graph-item-inner {
    		padding-bottom: 52px;
    	}

• There is a new version of the 'Feature Graph' without the use of icons. I will add it here at some point or you can check out the current demo at Joomlashine.