metro4
Version:
The front-end framework for Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style
471 lines (452 loc) • 88.8 kB
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="twitter:site" content="@metroui">
<meta name="twitter:creator" content="@pimenov_sergey">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Metro 4 Components Library">
<meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.">
<meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png">
<meta property="og:url" content="https://metroui.org.ua/v4/index.html">
<meta property="og:title" content="Metro 4 Components Library">
<meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.">
<meta property="og:type" content="website">
<meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png">
<meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="968">
<meta property="og:image:height" content="504">
<meta name="author" content="Sergey Pimenov">
<meta name="description" content="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.">
<meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet">
<link href="highlight/styles/github.css" rel="stylesheet">
<link href="docsearch/docsearch.min.css" rel="stylesheet">
<link href="css/site.css" rel="stylesheet">
<title>Metro Icon Font - Metro 4 :: Popular HTML, CSS and JS library</title>
</head>
<body class="m4-cloak" data-role="htmlcontainer" data-html-source="header.html" data-insert-mode="prepend">
<div class="container-fluid">
<div class="row flex-xl-nowrap">
<div class="cell-md-3 cell-xl-2 pr-0 border-right bd-light" id="sidenav" data-role="htmlcontainer" data-html-source="sidenav.html" data-insert-mode="replace" data-on-load="initDocSearchEngine()"></div>
<div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper">
<h5>Table of contents</h5>
<hr/>
<ul class="toc-nav">
<li class="toc-entry"><a href="#">Icons</a></li>
<li class="toc-entry"><a href="#_how_to_use">How to use</a></li>
<li class="toc-entry"><a href="#_icon_color">Icon color</a></li>
<li class="toc-entry"><a href="#_icon_list">Icon list</a></li>
</ul>
</div>
<main class="cell-md-9 cell-xl-8 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md">
<div class="place-right d-none d-block-lg" style="width: 200px;">
<img src="images/logo.png" class="w-100">
</div>
<h1>Icons</h1>
<p class="text-leader">
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.
</p>
<!-- ads-html -->
<h3 id="_how_to_use">How to use</h3>
<p>
To activate Metro Icon Font you must use <code>metro-all.css</code> or add to page <code>metro-icons.css</code>.
</p>
<pre class=""><code>
<link href="metro-icons.css" rel="stylesheet">
</code></pre>
<p>
And them add class <code>mif-*</code> to element, example <code>span</code> And to change icon size add class <code>mif-lg</code>, <code>mif-2x</code>, <code>mif-3x</code>, <code>mif-4x</code> and <code>mif-5x</code>
</p>
<div class="example">
<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>
</div>
<pre class=""><code>
<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>
</code></pre>
<h3 id="_icon_color">Icon color</h3>
<p>
To change color add class <code>fg-*</code> to icon element. Details for colors see on <a href="colors.html">colors utilities page</a>.
</p>
<div class="example">
<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>
</div>
<pre class=""><code>
<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>
</code></pre>
<!-- ads-html -->
<h3 id="_icon_list">Icon list <small id="icon-count">0</small></h3>
<div class="p-1-sm p-3-md bg-light">
<div id="icon-search"></div>
<div class="row mt-2">
<div class="cell-md-3">
<input checked type="checkbox" data-role="checkbox" data-caption="Application" onclick="$(this).is(':checked') ? $('#icon-list .icon-application').show() : $('#icon-list .icon-application').hide()">
</div>
<div class="cell-md-3">
<input checked type="checkbox" data-role="checkbox" data-caption="Mobile" onclick="$(this).is(':checked') ? $('#icon-list .icon-mobile').show() : $('#icon-list .icon-mobile').hide()">
</div>
<div class="cell-md-3">
<input checked type="checkbox" data-role="checkbox" data-caption="Device" onclick="$(this).is(':checked') ? $('#icon-list .icon-device').show() : $('#icon-list .icon-device').hide()">
</div>
<div class="cell-md-3">
<input checked type="checkbox" data-role="checkbox" data-caption="Player" onclick="$(this).is(':checked') ? $('#icon-list .icon-player').show() : $('#icon-list .icon-player').hide()">
</div>
</div>
<div class="row mt-2">
<div class="cell-md-3">
<input checked type="checkbox" data-role="checkbox" data-caption="Brand" onclick="$(this).is(':checked') ? $('#icon-list .icon-brand').show() : $('#icon-list .icon-brand').hide()">
</div>
<div class="cell-md-3">
<input checked type="checkbox" data-role="checkbox" data-caption="Weather" onclick="$(this).is(':checked') ? $('#icon-list .icon-weather').show() : $('#icon-list .icon-weather').hide()">
</div>
<div class="cell-md-3">
<input checked type="checkbox" data-role="checkbox" data-caption="Chart" onclick="$(this).is(':checked') ? $('#icon-list .icon-chart').show() : $('#icon-list .icon-chart').hide()">
</div>
<div class="cell-md-3">
<input checked type="checkbox" data-role="checkbox" data-caption="Spinner" onclick="$(this).is(':checked') ? $('#icon-list .icon-spinner').show() : $('#icon-list .icon-spinner').hide()">
</div>
</div>
<div class="row mt-2">
<div class="cell-md-3">
<input checked type="checkbox" data-role="checkbox" data-caption="Arrows" onclick="$(this).is(':checked') ? $('#icon-list .icon-arrows').show() : $('#icon-list .icon-arrows').hide()">
</div>
<div class="cell-md-3">
<input checked type="checkbox" data-role="checkbox" data-caption="File" onclick="$(this).is(':checked') ? $('#icon-list .icon-file').show() : $('#icon-list .icon-file').hide()">
</div>
<div class="cell-md-3">
<input checked type="checkbox" data-role="checkbox" data-caption="Vehicle" onclick="$(this).is(':checked') ? $('#icon-list .icon-vehicle').show() : $('#icon-list .icon-vehicle').hide()">
</div>
<div class="cell-md-3">
<input checked type="checkbox" data-role="checkbox" data-caption="Medic" onclick="$(this).is(':checked') ? $('#icon-list .icon-medic').show() : $('#icon-list .icon-medic').hide()">
</div>
</div>
</div>
<div id="icon_list_wrapper" class="mt-4">
<ul class="unstyled-list list icon-list" id="icon-list" data-role="list" data-search-wrapper="#icon-search" data-show-search="true" data-sort-target="li" data-sort-class="label" data-sort-dir="asc">
<!-- New -->
<li class="icon-application"><span class="mif-accessible"></span><span class="label"> accessible</span></li>
<li class="icon-application"><span class="mif-adb"></span><span class="label"> adb</span></li>
<li class="icon-application"><span class="mif-add"></span><span class="label"> add</span></li>
<li class="icon-application"><span class="mif-add-photo"></span><span class="label"> add-photo</span></li>
<li class="icon-application"><span class="mif-arrow-drop-down"></span><span class="label"> arrow-drop-down</span></li>
<li class="icon-application"><span class="mif-arrow-drop-up"></span><span class="label"> arrow-drop-up</span></li>
<li class="icon-application"><span class="mif-photo-camera"></span><span class="label"> photo-camera</span></li>
<li class="icon-application"><span class="mif-photo-camera-enhance"></span><span class="label"> photo-camera-enhance</span></li>
<li class="icon-application"><span class="mif-camera-front"></span><span class="label"> camera-front</span></li>
<li class="icon-application"><span class="mif-camera-rear"></span><span class="label"> camera-rear</span></li>
<li class="icon-application"><span class="mif-chat"></span><span class="label"> chat</span></li>
<li class="icon-application"><span class="mif-chat-bubble"></span><span class="label"> chat-bubble</span></li>
<li class="icon-application"><span class="mif-chat-bubble-outline"></span><span class="label"> chat-bubble-outline</span></li>
<li class="icon-application"><span class="mif-comment"></span><span class="label"> comment</span></li>
<li class="icon-application"><span class="mif-devices"></span><span class="label"> devices</span></li>
<li class="icon-application"><span class="mif-flash-auto"></span><span class="label"> flash-auto</span></li>
<li class="icon-application"><span class="mif-flash-off"></span><span class="label"> flash-off</span></li>
<li class="icon-application"><span class="mif-flash-on"></span><span class="label"> flash-on</span></li>
<li class="icon-application"><span class="mif-qa"></span><span class="label"> qa</span></li>
<li class="icon-application"><span class="mif-hdr-off"></span><span class="label"> hdr-off</span></li>
<li class="icon-application"><span class="mif-hdr-on"></span><span class="label"> hdr-on</span></li>
<li class="icon-application"><span class="mif-http"></span><span class="label"> http</span></li>
<li class="icon-application"><span class="mif-import-export"></span><span class="label"> import-export</span></li>
<li class="icon-application"><span class="mif-backspace"></span><span class="label"> backspace</span></li>
<li class="icon-application"><span class="mif-keyboard-tab"></span><span class="label"> keyboard-tab</span></li>
<li class="icon-application"><span class="mif-restaurant"></span><span class="label"> restaurant</span></li>
<li class="icon-application"><span class="mif-location-off"></span><span class="label"> location-off</span></li>
<li class="icon-application"><span class="mif-room"></span><span class="label"> room</span></li>
<li class="icon-application"><span class="mif-navigation"></span><span class="label"> navigation</span></li>
<li class="icon-application"><span class="mif-near-me"></span><span class="label"> near-me</span></li>
<li class="icon-application"><span class="mif-network-cell"></span><span class="label"> network-cell</span></li>
<li class="icon-application"><span class="mif-network-locked"></span><span class="label"> network-locked</span></li>
<li class="icon-application"><span class="mif-network-wifi"></span><span class="label"> network-wifi</span></li>
<li class="icon-application"><span class="mif-cell-setting"></span><span class="label"> cell-setting</span></li>
<li class="icon-application"><span class="mif-phonelink-erase"></span><span class="label"> phonelink-erase</span></li>
<li class="icon-application"><span class="mif-phonelink-lock"></span><span class="label"> phonelink-lock</span></li>
<li class="icon-application"><span class="mif-phonelink-ring"></span><span class="label"> phonelink-ring</span></li>
<li class="icon-application"><span class="mif-phonelink-setup"></span><span class="label"> phonelink-setup</span></li>
<li class="icon-application"><span class="mif-present-all"></span><span class="label"> present-all</span></li>
<li class="icon-application"><span class="mif-lock-rotation"></span><span class="label"> lock-rotation</span></li>
<li class="icon-application"><span class="mif-rotation"></span><span class="label"> rotation</span></li>
<li class="icon-application"><span class="mif-cell-no-internet"></span><span class="label"> cell-no-internet</span></li>
<li class="icon-application"><span class="mif-cell-null"></span><span class="label"> cell-null</span></li>
<li class="icon-application"><span class="mif-cell-off"></span><span class="label"> cell-off</span></li>
<li class="icon-application"><span class="mif-wifi-lock"></span><span class="label"> wifi-lock</span></li>
<li class="icon-application"><span class="mif-wifi-off"></span><span class="label"> wifi-off</span></li>
<li class="icon-application"><span class="mif-verified"></span><span class="label"> verified</span></li>
<li class="icon-application"><span class="mif-cast"></span><span class="label"> cast</span></li>
<li class="icon-application"><span class="mif-cast-connected"></span><span class="label"> cast-connected</span></li>
<!-- Application -->
<li class="icon-application"><span class="mif-add-shopping-cart"></span><span class="label"> add-shopping-cart</span></li>
<li class="icon-application"><span class="mif-create-new-folder"></span><span class="label"> create-new-folder</span></li>
<li class="icon-application"><span class="mif-dashboard"></span><span class="label"> dashboard</span></li>
<li class="icon-application"><span class="mif-ev-station"></span><span class="label"> ev-station</span></li>
<li class="icon-application"><span class="mif-fingerprint"></span><span class="label"> fingerprint</span></li>
<li class="icon-application"><span class="mif-goat"></span><span class="label"> goat</span></li>
<li class="icon-application"><span class="mif-import-contacts"></span><span class="label"> import-contacts</span></li>
<li class="icon-application"><span class="mif-insert-drive-file"></span><span class="label"> insert-drive-file</span></li>
<li class="icon-application"><span class="mif-pan-tool"></span><span class="label"> pan-tool</span></li>
<li class="icon-application"><span class="mif-install"></span><span class="label"> install</span></li>
<li class="icon-application"><span class="mif-open-book"></span><span class="label"> open-book</span></li>
<li class="icon-application"><span class="mif-uninstall"></span><span class="label"> uninstall</span></li>
<li class="icon-application"><span class="mif-drive2"></span><span class="label"> drive2</span></li>
<li class="icon-application"><span class="mif-news"></span><span class="label"> news</span></li>
<li class="icon-application"><span class="mif-book-reference"></span><span class="label"> book-reference</span></li>
<li class="icon-application"><span class="mif-leanpub"></span><span class="label"> leanpub</span></li>
<li class="icon-application"><span class="mif-user-secret"></span><span class="label"> user-secret</span></li>
<li class="icon-application"><span class="mif-balance-scale"></span><span class="label"> balance-scale</span></li>
<li class="icon-application"><span class="mif-server"></span><span class="label"> server</span></li>
<li class="icon-application"><span class="mif-keyboard-voice"></span><span class="label"> keyboard-voice</span></li>
<li class="icon-application"><span class="mif-copy"></span><span class="label"> copy</span></li>
<li class="icon-application"><span class="mif-paste"></span><span class="label"> paste</span></li>
<li class="icon-application"><span class="mif-cut"></span><span class="label"> cut</span></li>
<li class="icon-application"><span class="mif-copyright"></span><span class="label"> copyright</span></li>
<li class="icon-application"><span class="mif-trademark"></span><span class="label"> trademark</span></li>
<li class="icon-application"><span class="mif-registered"></span><span class="label"> registered</span></li>
<li class="icon-application"><span class="mif-creative-commons"></span><span class="label"> creative-commons</span></li>
<li class="icon-application"><span class="mif-fonticons"></span><span class="label"> fonticons</span></li>
<li class="icon-application"><span class="mif-earth2"></span><span class="label"> earth2</span></li>
<li class="icon-application"><span class="mif-shit"></span><span class="label"> shit</span></li>
<li class="icon-application"><span class="mif-broadcast"></span><span class="label"> broadcast</span></li>
<li class="icon-application"><span class="mif-organization"></span><span class="label"> organization</span></li>
<li class="icon-application"><span class="mif-squirrel"></span><span class="label"> squirrel</span></li>
<li class="icon-application"><span class="mif-steps"></span><span class="label"> steps</span></li>
<li class="icon-application"><span class="mif-versions"></span><span class="label"> versions</span></li>
<li class="icon-application"><span class="mif-language"></span><span class="label"> language</span></li>
<li class="icon-application"><span class="mif-unlink"></span><span class="label"> unlink</span></li>
<li class="icon-application"><span class="mif-fire-extinguisher"></span><span class="label"> fire-extinguisher</span></li>
<li class="icon-application"><span class="mif-eur"></span><span class="label"> eur</span></li>
<li class="icon-application"><span class="mif-gbp"></span><span class="label"> gbp</span></li>
<li class="icon-application"><span class="mif-dollar2"></span><span class="label"> dollar2</span></li>
<li class="icon-application"><span class="mif-inr"></span><span class="label"> inr</span></li>
<li class="icon-application"><span class="mif-cny"></span><span class="label"> cny</span></li>
<li class="icon-application"><span class="mif-rouble"></span><span class="label"> rouble</span></li>
<li class="icon-application"><span class="mif-krw"></span><span class="label"> krw</span></li>
<li class="icon-application"><span class="mif-try"></span><span class="label"> try</span></li>
<li class="icon-application"><span class="mif-bitcoin"></span><span class="label"> bitcoin</span></li>
<li class="icon-application"><span class="mif-stack2"></span><span class="label"> stack2</span></li>
<li class="icon-application"><span class="mif-stack3"></span><span class="label"> stack3</span></li>
<li class="icon-application"><span class="mif-lamp"></span><span class="label"> lamp</span></li>
<li class="icon-application"><span class="mif-justice"></span><span class="label"> justice</span></li>
<li class="icon-application"><span class="mif-paw"></span><span class="label"> paw</span></li>
<li class="icon-application"><span class="mif-visa"></span><span class="label"> visa</span></li>
<li class="icon-application"><span class="mif-mastercard"></span><span class="label"> mastercard</span></li>
<li class="icon-application"><span class="mif-discover"></span><span class="label"> discover</span></li>
<li class="icon-application"><span class="mif-amex"></span><span class="label"> amex</span></li>
<li class="icon-application"><span class="mif-cc-paypal"></span><span class="label"> cc-paypal</span></li>
<li class="icon-application"><span class="mif-venus"></span><span class="label"> venus</span></li>
<li class="icon-application"><span class="mif-mars"></span><span class="label"> mars</span></li>
<li class="icon-application"><span class="mif-medium"></span><span class="label"> medium</span></li>
<li class="icon-application"><span class="mif-location-city"></span><span class="label"> location-city</span></li>
<li class="icon-application"><span class="mif-library"></span><span class="label"> library</span></li>
<li class="icon-application"><span class="mif-calculator2"></span><span class="label"> calculator2</span></li>
<li class="icon-application"><span class="mif-barbell"></span><span class="label"> barbell</span></li>
<li class="icon-application"><span class="mif-3d-rotation"></span><span class="label"> 3d-rotation</span></li>
<li class="icon-application"><span class="mif-alarm"></span><span class="label"> alarm</span></li>
<li class="icon-application"><span class="mif-alarm-on"></span><span class="label"> alarm-on</span></li>
<li class="icon-application"><span class="mif-favorite"></span><span class="label"> favorite</span></li>
<li class="icon-application"><span class="mif-settings-ethernet"></span><span class="label"> settings-ethernet</span></li>
<li class="icon-application"><span class="mif-settings-power"></span><span class="label"> settings-power</span></li>
<li class="icon-application"><span class="mif-settings-voice"></span><span class="label"> settings-voice</span></li>
<li class="icon-application"><span class="mif-shopping-basket"></span><span class="label"> shopping-basket</span></li>
<li class="icon-application"><span class="mif-contacts-dialer"></span><span class="label"> contacts-dialer</span></li>
<li class="icon-application"><span class="mif-contacts-mail"></span><span class="label"> contacts-mail</span></li>
<li class="icon-application"><span class="mif-drafts"></span><span class="label"> drafts</span></li>
<li class="icon-application"><span class="mif-mail"></span><span class="label"> mail</span></li>
<li class="icon-application"><span class="mif-brightness-auto"></span><span class="label"> brightness-auto</span></li>
<li class="icon-application"><span class="mif-multitrack-audio"></span><span class="label"> multitrack-audio</span></li>
<li class="icon-application"><span class="mif-widgets"></span><span class="label"> widgets</span></li>
<li class="icon-application"><span class="mif-usb"></span><span class="label"> usb</span></li>
<li class="icon-application"><span class="mif-money"></span><span class="label"> money</span></li>
<li class="icon-application"><span class="mif-vertical-align-bottom"></span><span class="label"> vertical-align-bottom</span></li>
<li class="icon-application"><span class="mif-vertical-align-center"></span><span class="label"> vertical-align-center</span></li>
<li class="icon-application"><span class="mif-vertical-align-top"></span><span class="label"> vertical-align-top</span></li>
<li class="icon-application"><span class="mif-keyboard-return"></span><span class="label"> keyboard-return</span></li>
<li class="icon-application"><span class="mif-security"></span><span class="label"> security</span></li>
<li class="icon-application"><span class="mif-looks"></span><span class="label"> looks</span></li>
<li class="icon-application"><span class="mif-palette"></span><span class="label"> palette</span></li>
<li class="icon-application"><span class="mif-layers"></span><span class="label"> layers</span></li>
<li class="icon-application"><span class="mif-layers-clear"></span><span class="label"> layers-clear</span></li>
<li class="icon-application"><span class="mif-florist"></span><span class="label"> florist</span></li>
<li class="icon-application"><span class="mif-gas-station"></span><span class="label"> gas-station</span></li>
<li class="icon-application"><span class="mif-hotel"></span><span class="label"> hotel</span></li>
<li class="icon-application"><span class="mif-local-service"></span><span class="label"> local-service</span></li>
<li class="icon-application"><span class="mif-map2"></span><span class="label"> map2</span></li>
<li class="icon-application"><span class="mif-traff"></span><span class="label"> traff</span></li>
<li class="icon-application"><span class="mif-apps"></span><span class="label"> apps</span></li>
<li class="icon-application"><span class="mif-expand-less"></span><span class="label"> expand-less</span></li>
<li class="icon-application"><span class="mif-expand-more"></span><span class="label"> expand-more</span></li>
<li class="icon-application"><span class="mif-menu"></span><span class="label"> menu</span></li>
<li class="icon-application"><span class="mif-more-horiz"></span><span class="label"> more-horiz</span></li>
<li class="icon-application"><span class="mif-more-vert"></span><span class="label"> more-vert</span></li>
<li class="icon-application"><span class="mif-unfold-less"></span><span class="label"> unfold-less</span></li>
<li class="icon-application"><span class="mif-unfold-more"></span><span class="label"> unfold-more</span></li>
<li class="icon-application"><span class="mif-not"></span><span class="label"> not</span></li>
<li class="icon-application"><span class="mif-event-available"></span><span class="label"> event-available</span></li>
<li class="icon-application"><span class="mif-event-busy"></span><span class="label"> event-busy</span></li>
<li class="icon-application"><span class="mif-sd-card"></span><span class="label"> folder-sd-card</span></li>
<li class="icon-application"><span class="mif-sync-disabled"></span><span class="label"> sync-disabled</span></li>
<li class="icon-application"><span class="mif-sync-problem"></span><span class="label"> sync-problem</span></li>
<li class="icon-application"><span class="mif-vpn-lock"></span><span class="label"> vpn-lock</span></li>
<li class="icon-application"><span class="mif-vpn-publ"></span><span class="label"> vpn-publ</span></li>
<li class="icon-application"><span class="mif-school"></span><span class="label"> school</span></li>
<li class="icon-application"><span class="mif-mail-read"></span><span class="label"> mail-read</span></li>
<li class="icon-application"><span class="mif-quote"></span><span class="label"> quote</span></li>
<li class="icon-application"><span class="mif-home"></span><span class="label"> home</span></li>
<li class="icon-application"><span class="mif-pencil"></span><span class="label"> pencil</span></li>
<li class="icon-application"><span class="mif-eyedropper"></span><span class="label"> eyedropper</span></li>
<li class="icon-application"><span class="mif-paint"></span><span class="label"> paint</span></li>
<li class="icon-application"><span class="mif-image"></span><span class="label"> image</span></li>
<li class="icon-application"><span class="mif-images"></span><span class="label"> images</span></li>
<li class="icon-application"><span class="mif-camera"></span><span class="label"> camera</span></li>
<li class="icon-application"><span class="mif-headphones"></span><span class="label"> headphones</span></li>
<li class="icon-application"><span class="mif-music"></span><span class="label"> music</span></li>
<li class="icon-application"><span class="mif-film"></span><span class="label"> film</span></li>
<li class="icon-application"><span class="mif-video-camera"></span><span class="label"> video-camera</span></li>
<li class="icon-application"><span class="mif-dice"></span><span class="label"> dice</span></li>
<li class="icon-application"><span class="mif-books"></span><span class="label"> books</span></li>
<li class="icon-application"><span class="mif-stack"></span><span class="label"> stack</span></li>
<li class="icon-application"><span class="mif-tag"></span><span class="label"> tag</span></li>
<li class="icon-application"><span class="mif-tags"></span><span class="label"> tags</span></li>
<li class="icon-application"><span class="mif-barcode"></span><span class="label"> barcode</span></li>
<li class="icon-application"><span class="mif-qrcode"></span><span class="label"> qrcode</span></li>
<li class="icon-application"><span class="mif-cart"></span><span class="label"> cart</span></li>
<li class="icon-application"><span class="mif-credit-card"></span><span class="label"> credit-card</span></li>
<li class="icon-application"><span class="mif-calculator"></span><span class="label"> calculator</span></li>
<li class="icon-application"><span class="mif-help"></span><span class="label"> help</span></li>
<li class="icon-application"><span class="mif-envelop"></span><span class="label"> envelop</span></li>
<li class="icon-application"><span class="mif-location"></span><span class="label"> location</span></li>
<li class="icon-application"><span class="mif-compass"></span><span class="label"> compass</span></li>
<li class="icon-application"><span class="mif-compass2"></span><span class="label"> compass2</span></li>
<li class="icon-application"><span class="mif-map"></span><span class="label"> map</span></li>
<li class="icon-application"><span class="mif-history"></span><span class="label"> history</span></li>
<li class="icon-application"><span class="mif-bell"></span><span class="label"> bell</span></li>
<li class="icon-application"><span class="mif-calendar"></span><span class="label"> calendar</span></li>
<li class="icon-application"><span class="mif-printer"></span><span class="label"> printer</span></li>
<li class="icon-application"><span class="mif-keyboard"></span><span class="label"> keyboard</span></li>
<li class="icon-application"><span class="mif-download"></span><span class="label"> download</span></li>
<li class="icon-application"><span class="mif-upload"></span><span class="label"> upload</span></li>
<li class="icon-application"><span class="mif-floppy-disk"></span><span class="label"> floppy-disk</span></li>
<li class="icon-application"><span class="mif-drive"></span><span class="label"> drive</span></li>
<li class="icon-application"><span class="mif-database"></span><span class="label"> database</span></li>
<li class="icon-application"><span class="mif-undo"></span><span class="label"> undo</span></li>
<li class="icon-application"><span class="mif-redo"></span><span class="label"> redo</span></li>
<li class="icon-application"><span class="mif-bubble"></span><span class="label"> bubble</span></li>
<li class="icon-application"><span class="mif-bubbles"></span><span class="label"> bubbles</span></li>
<li class="icon-application"><span class="mif-user"></span><span class="label"> user</span></li>
<li class="icon-application"><span class="mif-users"></span><span class="label"> users</span></li>
<li class="icon-application"><span class="mif-user-plus"></span><span class="label"> user-plus</span></li>
<li class="icon-application"><span class="mif-user-minus"></span><span class="label"> user-minus</span></li>
<li class="icon-application"><span class="mif-user-check"></span><span class="label"> user-check</span></li>
<li class="icon-application"><span class="mif-hour-glass"></span><span class="label"> hour-glass</span></li>
<li class="icon-application"><span class="mif-search"></span><span class="label"> search</span></li>
<li class="icon-application"><span class="mif-zoom-in"></span><span class="label"> zoom-in</span></li>
<li class="icon-application"><span class="mif-zoom-out"></span><span class="label"> zoom-out</span></li>
<li class="icon-application"><span class="mif-enlarge"></span><span class="label"> enlarge</span></li>
<li class="icon-application"><span class="mif-shrink"></span><span class="label"> shrink</span></li>
<li class="icon-application"><span class="mif-enlarge2"></span><span class="label"> enlarge2</span></li>
<li class="icon-application"><span class="mif-shrink2"></span><span class="label"> shrink2</span></li>
<li class="icon-application"><span class="mif-key"></span><span class="label"> key</span></li>
<li class="icon-application"><span class="mif-wrench"></span><span class="label"> wrench</span></li>
<li class="icon-application"><span class="mif-equalizer"></span><span class="label"> equalizer</span></li>
<li class="icon-application"><span class="mif-equalizer-v"></span><span class="label"> equalizer-v</span></li>
<li class="icon-application"><span class="mif-cog"></span><span class="label"> cog</span></li>
<li class="icon-application"><span class="mif-cogs"></span><span class="label"> cogs</span></li>
<li class="icon-application"><span class="mif-magic-wand"></span><span class="label"> magic-wand</span></li>
<li class="icon-application"><span class="mif-bug"></span><span class="label"> bug</span></li>
<li class="icon-application"><span class="mif-trophy"></span><span class="label"> trophy</span></li>
<li class="icon-application"><span class="mif-gift"></span><span class="label"> gift</span></li>
<li class="icon-application"><span class="mif-spoon-fork"></span><span class="label"> spoon-fork</span></li>
<li class="icon-application"><span class="mif-rocket"></span><span class="label"> rocket</span></li>
<li class="icon-application"><span class="mif-meter"></span><span class="label"> meter</span></li>
<li class="icon-application"><span class="mif-hammer"></span><span class="label"> hammer</span></li>
<li class="icon-application"><span class="mif-fire"></span><span class="label"> fire</span></li>
<li class="icon-application"><span class="mif-bin"></span><span class="label"> bin</span></li>
<li class="icon-application"><span class="mif-target"></span><span class="label"> target</span></li>
<li class="icon-application"><span class="mif-power"></span><span class="label"> power</span></li>
<li class="icon-application"><span class="mif-switch"></span><span class="label"> switch</span></li>
<li class="icon-application"><span class="mif-power-cord"></span><span class="label"> power-cord</span></li>
<li class="icon-application"><span class="mif-clipboard"></span><span class="label"> clipboard</span></li>
<li class="icon-application"><span class="mif-list-numbered"></span><span class="label"> list-numbered</span></li>
<li class="icon-application"><span class="mif-list"></span><span class="label"> list</span></li>
<li class="icon-application"><span class="mif-list2"></span><span class="label"> list2</span></li>
<li class="icon-application"><span class="mif-tree"></span><span class="label"> tree</span></li>
<li class="icon-application"><span class="mif-cloud"></span><span class="label"> cloud</span></li>
<li class="icon-application"><span class="mif-cloud-download"></span><span class="label"> cloud-download</span></li>
<li class="icon-application"><span class="mif-cloud-upload"></span><span class="label"> cloud-upload</span></li>
<li class="icon-application"><span class="mif-download2"></span><span class="label"> download2</span></li>
<li class="icon-application"><span class="mif-upload2"></span><span class="label"> upload2</span></li>
<li class="icon-application"><span class="mif-earth"></span><span class="label"> earth</span></li>
<li class="icon-application"><span class="mif-link"></span><span class="label"> link</span></li>
<li class="icon-application"><span class="mif-flag"></span><span class="label"> flag</span></li>
<li class="icon-application"><span class="mif-attachment"></span><span class="label"> attachment</span></li>
<li class="icon-application"><span class="mif-eye"></span><span class="label"> eye</span></li>
<li class="icon-application"><span class="mif-bookmark"></span><span class="label"> bookmark</span></li>
<li class="icon-application"><span class="mif-bookmarks"></span><span class="label"> bookmarks</span></li>
<li class="icon-application"><span class="mif-contrast"></span><span class="label"> contrast</span></li>
<li class="icon-application"><span class="mif-brightness"></span><span class="label"> brightness</span></li>
<li class="icon-application"><span class="mif-star-empty"></span><span class="label"> star-empty</span></li>
<li class="icon-application"><span class="mif-star-half"></span><span class="label"> star-half</span></li>
<li class="icon-application"><span class="mif-star-full"></span><span class="label"> star-full</span></li>
<li class="icon-application"><span class="mif-warning"></span><span class="label"> warning</span></li>
<li class="icon-application"><span class="mif-notification"></span><span class="label"> notification</span></li>
<li class="icon-application"><span class="mif-question"></span><span class="label"> question</span></li>
<li class="icon-application"><span class="mif-plus"></span><span class="label"> plus</span></li>
<li class="icon-application"><span class="mif-minus"></span><span class="label"> minus</span></li>
<li class="icon-application"><span class="mif-info"></span><span class="label"> info</span></li>
<li class="icon-application"><span class="mif-cancel"></span><span class="label"> cancel</span></li>
<li class="icon-application"><span class="mif-blocked"></span><span class="label"> blocked</span></li>
<li class="icon-application"><span class="mif-cross"></span><span class="label"> cross</span></li>
<li class="icon-application"><span class="mif-checkmark"></span><span class="label"> checkmark</span></li>
<li class="icon-application"><span class="mif-spell-check"></span><span class="label"> spell-check</span></li>
<li class="icon-application"><span class="mif-enter"></span><span class="label"> enter</span></li>
<li class="icon-application"><span class="mif-exit"></span><span class="label"> exit</span></li>
<li class="icon-application"><span class="mif-tab"></span><span class="label"> tab</span></li>
<li class="icon-application"><span class="mif-move-up"></span><span class="label"> move-up</span></li>
<li class="icon-application"><span class="mif-move-down"></span><span class="label"> move-down</span></li>
<li class="icon-application"><span class="mif-sort-asc"></span><span class="label"> sort-asc</span></li>
<li class="icon-application"><span class="mif-sort-desc"></span><span class="label"> sort-desc</span></li>
<li class="icon-application"><span class="mif-command"></span><span class="label"> command</span></li>
<li class="icon-application"><span class="mif-shift"></span><span class="label"> shift</span></li>
<li class="icon-application"><span class="mif-crop"></span><span class="label"> crop</span></li>
<li class="icon-application"><span class="mif-filter"></span><span class="label"> filter</span></li>
<li class="icon-application"><span class="mif-bold"></span><span class="label"> bold</span></li>
<li class="icon-application"><span class="mif-underline"></span><span class="label"> underline</span></li>
<li class="icon-application"><span class="mif-italic"></span><span class="label"> italic</span></li>
<li class="icon-application"><span class="mif-strikethrough"></span><span class="label"> strikethrough</span></li>
<li class="icon-application"><span class="mif-page-break"></span><span class="label"> page-break</span></li>
<li class="icon-application"><span class="mif-superscript"></span><span class="label"> superscript</span></li>
<li class="icon-application"><span class="mif-subscript"></span><span class="label"> subscript</span></li>
<li class="icon-application"><span class="mif-table"></span><span class="label"> table</span></li>
<li class="icon-application"><span class="mif-insert-template"></span><span class="label"> insert-template</span></li>
<li class="icon-application"><span class="mif-pilcrow"></span><span class="label"> pilcrow</span></li>
<li class="icon-application"><span class="mif-ltr"></span><span class="label"> ltr</span></li>
<li class="icon-application"><span class="mif-rtl"></span><span class="label"> rtl</span></li>
<li class="icon-application"><span class="mif-section"></span><span class="label"> section</span></li>
<li class="icon-application"><span class="mif-paragraph-left"></span><span class="label"> paragraph-left</span></li>
<li class="icon-application"><span class="mif-paragraph-center"></span><span class="label"> paragraph-center</span></li>
<li class="icon-application"><span class="mif-paragraph-right"></span><span class="label"> paragraph-right</span></li>
<li class="icon-application"><span class="mif-paragraph-justify"></span><span class="label"> paragraph-justify</span></li>
<li class="icon-application"><span class="mif-indent-increase"></span><span class="label"> indent-increase</span></li>
<li class="icon-application">