<!DOCTYPE html> <html lang=“en”> <head>
<meta charset="UTF-8"> <title>minicons</title> <style> body { font-family: sans-serif; margin: 0; padding: 10px 20px; text-align: center; } .preview { width: 100px; display: inline-block; margin: 10px; } .preview .inner { display: inline-block; width: 100%; text-align: center; background: #f5f5f5; -webkit-border-radius: 3px 3px 0 0; -moz-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0; } .preview .inner i { line-height: 85px; font-size: 40px; color: #333; } .label { display: inline-block; width: 100%; box-sizing: border-box; padding: 5px; font-size: 10px; font-family: Monaco, monospace; color: #666; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: #ddd; -webkit-border-radius: 0 0 3px 3px; -moz-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; color: #666; } @font-face { font-family: "minicons"; src: url("./minicons.eot?a557a12db25dc29088367894802a0133?#iefix") format("embedded-opentype"),
url(“./minicons.woff2?a557a12db25dc29088367894802a0133”) format(“woff2”), url(“./minicons.woff?a557a12db25dc29088367894802a0133”) format(“woff”), url(“./minicons.ttf?a557a12db25dc29088367894802a0133”) format(“truetype”), url(“./minicons.svg?a557a12db25dc29088367894802a0133#minicons”) format(“svg”); }
i {
line-height: 1;
}
i:before, i[class*=“ mi-”]:before {
font-family: minicons !important; font-style: normal; font-weight: normal !important; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.mi-calendar-f:before {
content: "\f101";
} .mi-calendar:before {
content: "\f102";
} .mi-contact-f:before {
content: "\f103";
} .mi-contact:before {
content: "\f104";
} .mi-facebook-f:before {
content: "\f105";
} .mi-facebook:before {
content: "\f106";
} .mi-github-f:before {
content: "\f107";
} .mi-github:before {
content: "\f108";
} .mi-google-plus-f:before {
content: "\f109";
} .mi-google-plus:before {
content: "\f10a";
} .mi-home-f:before {
content: "\f10b";
} .mi-home:before {
content: "\f10c";
} .mi-info-f:before {
content: "\f10d";
} .mi-info:before {
content: "\f10e";
} .mi-instagram-f:before {
content: "\f10f";
} .mi-instagram:before {
content: "\f110";
} .mi-label-f:before {
content: "\f111";
} .mi-labels-f:before {
content: "\f112";
} .mi-labels:before {
content: "\f113";
} .mi-label:before {
content: "\f114";
} .mi-lock-f:before {
content: "\f115";
} .mi-lock:before {
content: "\f116";
} .mi-person-f:before {
content: "\f117";
} .mi-person:before {
content: "\f118";
} .mi-sitemap-f:before {
content: "\f119";
} .mi-sitemap:before {
content: "\f11a";
} .mi-tel-f:before {
content: "\f11b";
} .mi-tel:before {
content: "\f11c";
} .mi-template:before {
content: "\f11d";
} .mi-twitter-f:before {
content: "\f11e";
} .mi-twitter:before {
content: "\f11f";
} .mi-youtube-f:before {
content: "\f120";
} .mi-youtube:before {
content: "\f121";
}
</style>
</head> <body>
<h1>minicons</h1> <div class="preview"> <span class="inner"> <i class="mi-calendar-f"></i> </span> <br> <span class='label'>calendar-f</span> </div> <div class="preview"> <span class="inner"> <i class="mi-calendar"></i> </span> <br> <span class='label'>calendar</span> </div> <div class="preview"> <span class="inner"> <i class="mi-contact-f"></i> </span> <br> <span class='label'>contact-f</span> </div> <div class="preview"> <span class="inner"> <i class="mi-contact"></i> </span> <br> <span class='label'>contact</span> </div> <div class="preview"> <span class="inner"> <i class="mi-facebook-f"></i> </span> <br> <span class='label'>facebook-f</span> </div> <div class="preview"> <span class="inner"> <i class="mi-facebook"></i> </span> <br> <span class='label'>facebook</span> </div> <div class="preview"> <span class="inner"> <i class="mi-github-f"></i> </span> <br> <span class='label'>github-f</span> </div> <div class="preview"> <span class="inner"> <i class="mi-github"></i> </span> <br> <span class='label'>github</span> </div> <div class="preview"> <span class="inner"> <i class="mi-google-plus-f"></i> </span> <br> <span class='label'>google-plus-f</span> </div> <div class="preview"> <span class="inner"> <i class="mi-google-plus"></i> </span> <br> <span class='label'>google-plus</span> </div> <div class="preview"> <span class="inner"> <i class="mi-home-f"></i> </span> <br> <span class='label'>home-f</span> </div> <div class="preview"> <span class="inner"> <i class="mi-home"></i> </span> <br> <span class='label'>home</span> </div> <div class="preview"> <span class="inner"> <i class="mi-info-f"></i> </span> <br> <span class='label'>info-f</span> </div> <div class="preview"> <span class="inner"> <i class="mi-info"></i> </span> <br> <span class='label'>info</span> </div> <div class="preview"> <span class="inner"> <i class="mi-instagram-f"></i> </span> <br> <span class='label'>instagram-f</span> </div> <div class="preview"> <span class="inner"> <i class="mi-instagram"></i> </span> <br> <span class='label'>instagram</span> </div> <div class="preview"> <span class="inner"> <i class="mi-label-f"></i> </span> <br> <span class='label'>label-f</span> </div> <div class="preview"> <span class="inner"> <i class="mi-labels-f"></i> </span> <br> <span class='label'>labels-f</span> </div> <div class="preview"> <span class="inner"> <i class="mi-labels"></i> </span> <br> <span class='label'>labels</span> </div> <div class="preview"> <span class="inner"> <i class="mi-label"></i> </span> <br> <span class='label'>label</span> </div> <div class="preview"> <span class="inner"> <i class="mi-lock-f"></i> </span> <br> <span class='label'>lock-f</span> </div> <div class="preview"> <span class="inner"> <i class="mi-lock"></i> </span> <br> <span class='label'>lock</span> </div> <div class="preview"> <span class="inner"> <i class="mi-person-f"></i> </span> <br> <span class='label'>person-f</span> </div> <div class="preview"> <span class="inner"> <i class="mi-person"></i> </span> <br> <span class='label'>person</span> </div> <div class="preview"> <span class="inner"> <i class="mi-sitemap-f"></i> </span> <br> <span class='label'>sitemap-f</span> </div> <div class="preview"> <span class="inner"> <i class="mi-sitemap"></i> </span> <br> <span class='label'>sitemap</span> </div> <div class="preview"> <span class="inner"> <i class="mi-tel-f"></i> </span> <br> <span class='label'>tel-f</span> </div> <div class="preview"> <span class="inner"> <i class="mi-tel"></i> </span> <br> <span class='label'>tel</span> </div> <div class="preview"> <span class="inner"> <i class="mi-template"></i> </span> <br> <span class='label'>template</span> </div> <div class="preview"> <span class="inner"> <i class="mi-twitter-f"></i> </span> <br> <span class='label'>twitter-f</span> </div> <div class="preview"> <span class="inner"> <i class="mi-twitter"></i> </span> <br> <span class='label'>twitter</span> </div> <div class="preview"> <span class="inner"> <i class="mi-youtube-f"></i> </span> <br> <span class='label'>youtube-f</span> </div> <div class="preview"> <span class="inner"> <i class="mi-youtube"></i> </span> <br> <span class='label'>youtube</span> </div>
</body> </html>