Icons
Metro Icon Font gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS. Metro Icon Font includes 500+ icons.
How to use
To activate Metro Icon Font you must use icons.css
.
<link href="https://cdn.metroui.org.ua/current/icons.css" rel="stylesheet">
for dev
<link href="https://cdn.metroui.org.ua/dev/icons.css" rel="stylesheet">
And them add class mif-*
to element, example span
And to change icon size add class mif-lg
, mif-2x
, mif-3x
, mif-4x
and mif-5x
<span class="mif-home"></span>
<span class="mif-home mif-lg"></span>
<span class="mif-home mif-2x"></span>
<span class="mif-home mif-3x"></span>
<span class="mif-home mif-4x"></span>
<span class="mif-home mif-5x"></span>
Icon color
To change color add class fg-*
to icon element. Details for colors see on colors utilities page.
<span class="mif-home"></span>
<span class="mif-home mif-lg fg-cyan"></span>
<span class="mif-home mif-2x fg-pink"></span>
<span class="mif-home mif-3x fg-green"></span>
<span class="mif-home mif-4x fg-red"></span>
<span class="mif-home mif-5x fg-blue"></span>