<!DOCTYPE html>
	<html>
	<head>
		<meta charset="utf-8">
		<title>Examples | IcoFont</title>
		<link rel="stylesheet" type="text/css" href="./icofont.min.css">
		<style type="text/css">
			body {
				margin: 0;
				padding: 0;
				background: #F6F6F9;
			}
			.header {
				border-bottom: 1px solid #DCDCE1;
				padding: 10px 0;
				margin-bottom: 10px;
			}
			.container {
				width: 980px;
				margin: 0 auto;
			}
			.ico-title {
				font-size: 2em;
			}
			.iconlist {
				margin: 0;
				padding: 0;
				list-style: none;
				text-align: center;
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				flex-direction: row;
			}
			.iconlist li {
				position: relative;
				margin: 5px;
				width: 150px;
				cursor: pointer;
			}
			.iconlist li .icon-holder {
				position: relative;
				text-align: center;
				border-radius: 3px;
				overflow: hidden;
				padding-bottom: 5px;
				background: #ffffff;
				border: 1px solid #E4E5EA;
				transition: all 0.2s linear 0s;
			}
			.iconlist li .icon-holder:hover {
				background: #00C3DA;
				color: #ffffff;
			}
			.iconlist li .icon-holder:hover .icon i {
				color: #ffffff;
			}
			.iconlist li .icon-holder .icon {
				padding: 20px;
				text-align: center;
			}
			.iconlist li .icon-holder .icon i {
				font-size: 3em;
				color: #1F1142;
			}
			.iconlist li .icon-holder span {
				font-size: 14px;
				display: block;
				margin-top: 5px;
				border-radius: 3px;
			}
		</style>
	</head>
	<body>
	<div class="header">
		<div class="container">
			<h1 class="ico-title"> IcoFont Icons </h1>
		</div>
	</div>
	<div class="container">
		<ul class="iconlist">
		
		<li>
			<div class="icon-holder">
				<div class="icon"> 
					<i class="icofont-pencil-alt-5"></i>
				</div> 
				<span> pencil-alt-5 </span>
				
			</div>
		</li>
		
		<li>
			<div class="icon-holder">
				<div class="icon"> 
					<i class="icofont-simple-right"></i>
				</div> 
				<span> simple-right </span>
				
			</div>
		</li>
		
		<li>
			<div class="icon-holder">
				<div class="icon"> 
					<i class="icofont-simple-down"></i>
				</div> 
				<span> simple-down </span>
				
			</div>
		</li>
		
		<li>
			<div class="icon-holder">
				<div class="icon"> 
					<i class="icofont-simple-up"></i>
				</div> 
				<span> simple-up </span>
				
			</div>
		</li>
		
		<li>
			<div class="icon-holder">
				<div class="icon"> 
					<i class="icofont-rounded-down"></i>
				</div> 
				<span> rounded-down </span>
				
			</div>
		</li>
		
		<li>
			<div class="icon-holder">
				<div class="icon"> 
					<i class="icofont-rounded-right"></i>
				</div> 
				<span> rounded-right </span>
				
			</div>
		</li>
		
		<li>
			<div class="icon-holder">
				<div class="icon"> 
					<i class="icofont-rounded-up"></i>
				</div> 
				<span> rounded-up </span>
				
			</div>
		</li>
		
		<li>
			<div class="icon-holder">
				<div class="icon"> 
					<i class="icofont-dashboard"></i>
				</div> 
				<span> dashboard </span>
				
			</div>
		</li>
		
		<li>
			<div class="icon-holder">
				<div class="icon"> 
					<i class="icofont-comment"></i>
				</div> 
				<span> comment </span>
				
			</div>
		</li>
		
		<li>
			<div class="icon-holder">
				<div class="icon"> 
					<i class="icofont-image"></i>
				</div> 
				<span> image </span>
				
			</div>
		</li>
		
		<li>
			<div class="icon-holder">
				<div class="icon"> 
					<i class="icofont-page"></i>
				</div> 
				<span> page </span>
				
			</div>
		</li>
		
		<li>
			<div class="icon-holder">
				<div class="icon"> 
					<i class="icofont-paint"></i>
				</div> 
				<span> paint </span>
				
			</div>
		</li>
		
		<li>
			<div class="icon-holder">
				<div class="icon"> 
					<i class="icofont-shopping-cart"></i>
				</div> 
				<span> shopping-cart </span>
				
			</div>
		</li>
		
		<li>
			<div class="icon-holder">
				<div class="icon"> 
					<i class="icofont-options"></i>
				</div> 
				<span> options </span>
				
			</div>
		</li>
		
		<li>
			<div class="icon-holder">
				<div class="icon"> 
					<i class="icofont-navigation-menu"></i>
				</div> 
				<span> navigation-menu </span>
				
			</div>
		</li>
		
		<li>
			<div class="icon-holder">
				<div class="icon"> 
					<i class="icofont-search-2"></i>
				</div> 
				<span> search-2 </span>
				
			</div>
		</li>
		
		<li>
			<div class="icon-holder">
				<div class="icon"> 
					<i class="icofont-user"></i>
				</div> 
				<span> user </span>
				
			</div>
		</li>
		
		<li>
			<div class="icon-holder">
				<div class="icon"> 
					<i class="icofont-logout"></i>
				</div> 
				<span> logout </span>
				
			</div>
		</li>
		
		<li>
			<div class="icon-holder">
				<div class="icon"> 
					<i class="icofont-penalty-card"></i>
				</div> 
				<span> penalty-card </span>
				
			</div>
		</li>
		
		<li>
			<div class="icon-holder">
				<div class="icon"> 
					<i class="icofont-plus"></i>
				</div> 
				<span> plus </span>
				
			</div>
		</li>
		
		<li>
			<div class="icon-holder">
				<div class="icon"> 
					<i class="icofont-plugin"></i>
				</div> 
				<span> plugin </span>
				
			</div>
		</li>
		
		<li>
			<div class="icon-holder">
				<div class="icon"> 
					<i class="icofont-close"></i>
				</div> 
				<span> close </span>
				
			</div>
		</li>
		
		<li>
			<div class="icon-holder">
				<div class="icon"> 
					<i class="icofont-trash"></i>
				</div> 
				<span> trash </span>
				
			</div>
		</li>
		
		<li>
			<div class="icon-holder">
				<div class="icon"> 
					<i class="icofont-ui-copy"></i>
				</div> 
				<span> ui-copy </span>
				
			</div>
		</li>
		
		<li>
			<div class="icon-holder">
				<div class="icon"> 
					<i class="icofont-external-link"></i>
				</div> 
				<span> external-link </span>
				
			</div>
		</li>
		
		<li>
			<div class="icon-holder">
				<div class="icon"> 
					<i class="icofont-link"></i>
				</div> 
				<span> link </span>
				
			</div>
		</li>
		
		</ul>
	</div>	
	</body>
	</html>
	