ArcGIS Online Home Page - Icon Font Example

gistfile1.html

<!-- Text and icon style -->
<style>
	i {
		color:#026893;
		text-shadow: #d3d3d3 3px 5px 3px;
	}
	
	i:hover {
		color: #77C144;
	}
	
	.linkText {
		color:#404040;
		font-size:16px;
		font-weight:bold;
	}
	
	.galleryNode .galleryLabelContainer {
		color: #0E6991 !important;
}
	
</style>

<!-- Links to external CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"></link>

<!-- Text description block -->
<div id="descriptionBlock">
		<span style="font-size:15px;font-family:Arial;color:#000000;">
			<p>
				-- Organization Description Text Paragraph 1 --
			</p>
			<p>
				-- Organization Description Text Paragraph 2 --
			</p>
		</span>
</div>

<!-- Empty div to provide space between description and table content -->
<div style="height: 30px;"></div>
   
<!-- Table block, containing icons and links -->	
<div align="center">
	<table border="0" cellpadding="20" cellspacing="20" style="border: 2px solid rgb(179, 179, 179);border-radius:30px;">
		<tbody>
			<!-- Begin row 1 -->
			<tr style="height:90px">
				<!-- Icon / link 1 -->
				<td style="width:2.7in; height:80px" valign="top" width="324">
					<p align="center">
						<a href="http://www.esri.com/" target="blank">                      
				                     <i class="fa fa-skyatlas fa-5x"></i>                   
				                  </a>
					</p>
					<p align="center">
						<span class="linkText">Visit our website</span>
					</p>
				</td>
				<!-- Icon / link 2 -->
				<td style="width:2.7in; height:80px" valign="top" width="324">
					<p align="center">
						<a href="http://www.esri.com/" target="blank">                      
				                     <i class="fa fa-server fa-5x"></i>                   
				                  </a>
					</p>
					<p align="center">
						<span class="linkText">Learn more about our services</span>
					</p>
				</td>
				<!-- Icon / link 3 -->
				<td style="width:2.7in; height:80px" valign="top" width="324">
					<p align="center">
						<a href="http://www.esri.com/" target="blank">
				                     <i class="fa fa-cogs fa-5x"></i>                   
				                  </a>
					</p>
					<p align="center">
						<span class="linkText">View our solutions</span>
					</p>
				</td>
			<!-- End row 1 -->	
			</tr>
		</tbody>
	</table>
</div>