• 1
  • 2
Home > Tips

CSS3 Icons - CSS3 Metro Style Icons Free Download




 

View the Demo Free Download the Admin Dashboard Template


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, Id 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.



 The HTML Codes of the CSS3 Pricing Table

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>



 CSS Codes for the CSS3 Metro Styles Icons

The above demo places every icon in a list item; lets 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 C 

.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;
}




 Terms of Use

The CSS3 metro style icons are created by SliceMaker staff, all rights are reserved by SliceMaker Soft, Inc.

SliceMaker Soft allows their users to free download the CSS3 metro style icons and then edit it for their own use. If you are interested in these CSS3 metro style icons, please feel free to download it. If you have problem understanding or editing the CSS3 metro style icons, please feel free to contact our support team (support@slicemaker.com) for help.



Choose a SliceMaker Product to Create a Website on Your Own-30 Day Freetrial
SliceMaker Standard V3.6
SliceMaker Standard V3.6
The anyone-can-master webpage making software. You can create exceptional webpage/website on your own even if you're unfamiliar with webpage making.
$59.95
$35.95
SliceMaker Platinum V3.6
SliceMaker Platinum V3.6
The bestselling webpage making software, helps you create exceptional webpage/website without writing complicated CSS and DIV codes.
$69.95
$54.95
SliceMaker Deluxe V3.6
SliceMaker Deluxe V3.6
The all-in-one webpage making software, helps you create webpage/website of any style. It's the idea tool to create webpage/website.
$99.95
$69.95