Metro UI CSS includes more then 300 icons in one font that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.
To use icon font you must include same styles to page as:
<link href="iconFont.css" rel="stylesheet">
Also you can use your own icons, for example Font Awesome
Place Metro UI CSS icons just about anywhere with the <i> or <span> tags.
<i class="icon-rocket"></i> <span class="icon-rocket"></span>
You can use build-in classes .on-left, .on-right to add margin 5px between icon and text and .on-left-more, .on-right-more to add margin 10px.
<i class="icon-rocket on-left"></i>icon-rocket
icon-rocket<i class="icon-rocket on-right"></i>
icon<i class="icon-rocket on-right on-left"></i>rocket
Also you can change color style for icon with build-in color classes.
icon<i class="icon-rocket fg-red on-right on-left"></i>rocket
And, finally, you can change visual style of icon with css.
icon<i class="icon-rocket on-right on-left"
style="background: red;
color: white;
padding: 10px;
border-radius: 50%"></i>rocket