CSS3 Metro Style Icons - Tutorial With Free Download Permission

Metro UI provides us with a set of font-face to make the font library of icon. The font library can make up to 300 icons.

Through this article, I’d like share one of my works about CSS3 icons, all the icons are metro style. You can free download the CSS3 metro style icons created by me and then edit it for your own use. By the way, if you are interested in learning how to create CSS3 metro style icons, you can view the below HTML and CSS codes for the CSS3 icons, I hope it will help you understand how to create these kinds of icons.

Want to download the CSS3 metro style icons for free? Please read the original article to download them for free!

Step 1: The HTML Codes of the CSS3 Metro Style Icons

The HTML codes for the CSS3 metro style icons are very simple by using @font-face. However, the class name should be named as icon icon-* or icon *-icon, because it is beneficial for CSS3's attribute selector to fetch the corresponding elements.

------------------------------------------------------------------------------------------------------------------------------------------------------------
<i class='icon-checked'></i>
------------------------------------------------------------------------------------------------------------------------------------------------------------

Step 2: CSS Codes for the CSS3 Metro Styles Icons

The above demo places every icon in a list item; let’s firstly view the simple layout.

----------------------------------------------------------------------------------------------------------------------------------------------------------

body {
background-color: #dbdbdb;
-webkit-text-size-adjust:none;
}
.demo {
margin: 40px auto 0;
width: 360px;
color: #fff;
}
.icon-items-1 li {
float: left;
width: 37px;
height: 37px;
margin: 10px 10px 50px 0;
background-color: #00aec7;
animation: moveF_Right 500ms ease;
transition: all 200ms linear;
}
@keyframes moveF_Right {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(0%);
}
}
-------------------------------------------------------------------------------------------------------------------------------------------------------

The following CSS codes belong to the icons in the first row

-------------------------------------------------------------------------------------------------------------------------------------------------------
.icon-items-1 i[class^='icon-']
{ position: relative;
top: 14px;
left: 19px;
display: inline-block;
width: 20px;
height: 20px;
}

.icon-items-1 i[class^='icon-']:before,
.icon-items-1 i[class^='icon-']:after {
position: absolute;
content: '';
width: 0;
height: 0;
}

.icon-items-1 i.icon-checked:after {
top: 2px;
left: -5px;
width: 0;
height: 6px;
box-shadow: 0 0 0 2px #fff;
transform: rotate(-45deg);/**/
}
.icon-items-1 i.icon-checked:before {
top: -4px;
left: 3px;
width: 0;
height: 14px;
box-shadow: 0 0 0 2px #fff;
transform: rotate(45deg);
}

.icon-items-1 i.icon-close:before {
top: 4px;
left: -8px;
width: 14px;
box-shadow: 0 0 0 2px #fff;
transform: rotate(-45deg);
}
.icon-items-1 i.icon-close:after {
top: 4px;
left: -8px;
width: 14px;
box-shadow: 0 0 0 2px #fff;
transform: rotate(45deg);
}

.icon-items-1 i.icon-square:after {
top: 0;
left: -3px;
width: 5px;
height: 5px;
box-shadow: 0 0 0 3px #fff;
}

.icon-items-1 i.icon-plus:before {
top: 4px;
left: -8px;
width: 14px;
box-shadow: 0 0 0 2px #fff;
transform: rotate(90deg);
}
.icon-items-1 i.icon-plus:after,
.icon-items-1 i.icon-minus:after {
top: 4px;
left: -8px;
width: 14px;
box-shadow: 0 0 0 2px #fff;
}

.icon-items-1 i.icon-round:after {
top: 4px;
left: 0;
box-shadow: 0 0 0 6px #000,0 0 0 8px #fff;
border-radius: 50%;
}
.icon-items-1 i.icon-disc:after {
top: 4px;
left: 0;
box-shadow: 0 0 0 3px #fff,0 0 0 6px #00aec7,0 0 0 8px #fff;
border-radius: 50%;
}
.icon-items-1 li:hover {
transform: scale(2,2);
background-color: #005d6a;
z-index: 5;
}
-------------------------------------------------------------------------------------------------------------------------------------------------------

Next, the following icons are created by using @font-face.

--------------------------------------------------------------------------------------------------------------------------------------------------------
.icon-items-2 li {
position: relative;
float: left;
width: 100px;
height: 100px;
text-align: center;
margin: 10px 10px 0 0;
background-color: #00aec7;
animation: moveF_Right 500ms ease;
overflow: hidden;
}
.icon-items-2 li:before,
.icon-items-2 li:after {
position: absolute;
}
.icon-items-2 li:hover:before {
top: 0;
left: 0;
content: '';
width: 100%;
height: 100%;
background-color: rgba(255,255,255,.2);
z-index: 1;
}
.icon-items-2 li:hover:after {
top: 20px;
left: 0;
font-weight: bold;
content: attr(data);
width: 100%;
line-height: 30px;
z-index: 2;
background-color: #005d6a;
animation: moveF_Right 500ms ease;
}

.icon-items-2 i[class^='icon-']:before {
font-family: 'icomoon';
speak: none;
font-weight: normal;
-webkit-font-smoothing: antialiased;
font-size: 36px;
line-height: 100px;
font-style: normal;
}
.icon-chrome:before {
content: '\e0c6';
}
.icon-firefox:before {
content: '\e0c9';
}
.icon-IE:before {
content: '\e0ca';
}
.icon-apple:before {
content: '\e0cc';
}
.icon-opera:before {
content: '\e0cf';
}
.icon-android:before {
content: '\e0d1';
}
.icon-twitter:before {
content: '\e0a2';
}
.icon-dribbble:before {
content: '\e03d';
}
.icon-facebook:before {
content: '\e049';
}
@font-face {
font-family: 'icomoon';
src:url('fonts/icomoon.eot');
src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
url('fonts/icomoon.svg#icomoon') format('svg'),
url('fonts/icomoon.woff') format('woff'),
url('fonts/icomoon.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
---------------------------------------------------------------------------------------------------------------------------------------------------------------