Metro UI 4 Jekyll includes more then 300 icons in one font that can instantly be customized: size, color, drop shadow — anything that can be done with CSS.
To use the icon font add stylesheet to page:
<link href="iconFont.css" rel="stylesheet">
Or use your own icons, for example Font Awesome
Place Metro UI 4 Jekyll icons just about anywhere with <i> or <span> tags.
<i class="icon-rocket"></i> <span class="icon-rocket"></span>
Use built-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
Change icon color style with built-in color classes.
icon<i class="icon-rocket fg-red on-right on-left"></i>rocket
And, of course, you can change visual style of icons with css.
icon<i class="icon-rocket on-right on-left"
style="background: red;
color: white;
padding: 10px;
border-radius: 50%"></i>rocket