Icon Fonts

by dbouwman

HTML

<div class="menu-item">
    <span class='entypo-rocket'></span>
</div>
<div class="menu-item">
    <span class='entypo-plus-circled'></span>
</div>
<div class="menu-item">
    <span class='entypo-rocket'></span>
</div>

CSS

@import url(http://weloveiconfonts.com/api/?family=entypo);

/* entypo */
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}

/* Shorthand version */
.menu-item {
	position: relative;
	display: inline-block;
	padding: 10px;
	opacity: 0.3;
	text-decoration: none;
	font-size:1.5em;
	/* Firefox 
	-moz-transition: all 1s ease;*/
	/* WebKit */
	-webkit-transition: all 0.2s ease;
	/* Opera 
	-o-transition: all 1s ease;*/
	/* Standard 
	transition: all 1s ease;*/
}

.menu-item:hover {
	opacity: 1;
	
	/* Firefox 
	-moz-transform: scale(2) rotate(30deg) translate(50px);*/
	/* WebKit */
	-webkit-transform: rotate(45deg);
	/* Opera 
	-o-transform: scale(2) rotate(30deg) translate(50px);*/
	/* Standard 
	transform: scale(2) rotate(30deg) translate(50px);*/
	
	z-index: 1000;
}