@public-ui/themes
Version:
Contains the style guides and themes of various corporate designs for KoliBri - The accessible HTML-Standard.
2,564 lines (2,289 loc) • 367 kB
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Examples | IcoFont</title>
<link rel="stylesheet" type="text/css" href="./icofont.min.css" />
<style type="text/css">
body {
margin: 0;
padding: 0;
background: #f6f6f9;
}
.header {
border-bottom: 1px solid #dcdce1;
padding: 10px 0;
margin-bottom: 10px;
}
.container {
width: 980px;
margin: 0 auto;
}
.ico-title {
font-size: 2em;
}
.iconlist {
margin: 0;
padding: 0;
list-style: none;
text-align: center;
width: 100%;
display: flex;
flex-wrap: wrap;
flex-direction: row;
}
.iconlist li {
position: relative;
margin: 5px;
width: 150px;
cursor: pointer;
}
.iconlist li .icon-holder {
position: relative;
text-align: center;
border-radius: 3px;
overflow: hidden;
padding-bottom: 5px;
background: #ffffff;
border: 1px solid #e4e5ea;
transition: all 0.2s linear 0s;
}
.iconlist li .icon-holder:hover {
background: #00c3da;
color: #ffffff;
}
.iconlist li .icon-holder:hover .icon i {
color: #ffffff;
}
.iconlist li .icon-holder .icon {
padding: 20px;
text-align: center;
}
.iconlist li .icon-holder .icon i {
font-size: 3em;
color: #1f1142;
}
.iconlist li .icon-holder span {
font-size: 14px;
display: block;
margin-top: 5px;
border-radius: 3px;
}
</style>
</head>
<body>
<div class="header">
<div class="container">
<h1 class="ico-title">IcoFont Icons</h1>
</div>
</div>
<div class="container">
<ul class="iconlist">
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-angry-monster"></i>
</div>
<span> angry-monster </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-bathtub"></i>
</div>
<span> bathtub </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-bird-wings"></i>
</div>
<span> bird-wings </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-bow"></i>
</div>
<span> bow </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-castle"></i>
</div>
<span> castle </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-circuit"></i>
</div>
<span> circuit </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-crown-king"></i>
</div>
<span> crown-king </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-crown-queen"></i>
</div>
<span> crown-queen </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-dart"></i>
</div>
<span> dart </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-disability-race"></i>
</div>
<span> disability-race </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-diving-goggle"></i>
</div>
<span> diving-goggle </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-eye-open"></i>
</div>
<span> eye-open </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-flora-flower"></i>
</div>
<span> flora-flower </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-flora"></i>
</div>
<span> flora </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-gift-box"></i>
</div>
<span> gift-box </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-halloween-pumpkin"></i>
</div>
<span> halloween-pumpkin </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-hand-power"></i>
</div>
<span> hand-power </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-hand-thunder"></i>
</div>
<span> hand-thunder </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-king-monster"></i>
</div>
<span> king-monster </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-love"></i>
</div>
<span> love </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-magician-hat"></i>
</div>
<span> magician-hat </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-native-american"></i>
</div>
<span> native-american </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-owl-look"></i>
</div>
<span> owl-look </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-phoenix"></i>
</div>
<span> phoenix </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-robot-face"></i>
</div>
<span> robot-face </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-sand-clock"></i>
</div>
<span> sand-clock </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-shield-alt"></i>
</div>
<span> shield-alt </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-ship-wheel"></i>
</div>
<span> ship-wheel </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-skull-danger"></i>
</div>
<span> skull-danger </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-skull-face"></i>
</div>
<span> skull-face </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-snowmobile"></i>
</div>
<span> snowmobile </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-space-shuttle"></i>
</div>
<span> space-shuttle </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-star-shape"></i>
</div>
<span> star-shape </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-swirl"></i>
</div>
<span> swirl </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-tattoo-wing"></i>
</div>
<span> tattoo-wing </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-throne"></i>
</div>
<span> throne </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-tree-alt"></i>
</div>
<span> tree-alt </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-triangle"></i>
</div>
<span> triangle </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-unity-hand"></i>
</div>
<span> unity-hand </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-weed"></i>
</div>
<span> weed </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-woman-bird"></i>
</div>
<span> woman-bird </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-bat"></i>
</div>
<span> bat </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-bear-face"></i>
</div>
<span> bear-face </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-bear-tracks"></i>
</div>
<span> bear-tracks </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-bear"></i>
</div>
<span> bear </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-bird-alt"></i>
</div>
<span> bird-alt </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-bird-flying"></i>
</div>
<span> bird-flying </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-bird"></i>
</div>
<span> bird </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-birds"></i>
</div>
<span> birds </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-bone"></i>
</div>
<span> bone </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-bull"></i>
</div>
<span> bull </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-butterfly-alt"></i>
</div>
<span> butterfly-alt </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-butterfly"></i>
</div>
<span> butterfly </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-camel-alt"></i>
</div>
<span> camel-alt </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-camel-head"></i>
</div>
<span> camel-head </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-camel"></i>
</div>
<span> camel </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-cat-alt-1"></i>
</div>
<span> cat-alt-1 </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-cat-alt-2"></i>
</div>
<span> cat-alt-2 </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-cat-alt-3"></i>
</div>
<span> cat-alt-3 </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-cat-dog"></i>
</div>
<span> cat-dog </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-cat-face"></i>
</div>
<span> cat-face </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-cat"></i>
</div>
<span> cat </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-cow-head"></i>
</div>
<span> cow-head </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-cow"></i>
</div>
<span> cow </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-crab"></i>
</div>
<span> crab </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-crocodile"></i>
</div>
<span> crocodile </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-deer-head"></i>
</div>
<span> deer-head </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-dog-alt"></i>
</div>
<span> dog-alt </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-dog-barking"></i>
</div>
<span> dog-barking </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-dog"></i>
</div>
<span> dog </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-dolphin"></i>
</div>
<span> dolphin </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-duck-tracks"></i>
</div>
<span> duck-tracks </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-eagle-head"></i>
</div>
<span> eagle-head </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-eaten-fish"></i>
</div>
<span> eaten-fish </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-elephant-alt"></i>
</div>
<span> elephant-alt </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-elephant-head-alt"></i>
</div>
<span> elephant-head-alt </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-elephant-head"></i>
</div>
<span> elephant-head </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-elephant"></i>
</div>
<span> elephant </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-elk"></i>
</div>
<span> elk </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-fish-1"></i>
</div>
<span> fish-1 </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-fish-2"></i>
</div>
<span> fish-2 </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-fish-3"></i>
</div>
<span> fish-3 </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-fish-4"></i>
</div>
<span> fish-4 </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-fish-5"></i>
</div>
<span> fish-5 </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-fish"></i>
</div>
<span> fish </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-fox-alt"></i>
</div>
<span> fox-alt </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-fox"></i>
</div>
<span> fox </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-frog-tracks"></i>
</div>
<span> frog-tracks </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-frog"></i>
</div>
<span> frog </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-froggy"></i>
</div>
<span> froggy </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-giraffe-head-1"></i>
</div>
<span> giraffe-head-1 </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-giraffe-head-2"></i>
</div>
<span> giraffe-head-2 </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-giraffe-head"></i>
</div>
<span> giraffe-head </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-giraffe"></i>
</div>
<span> giraffe </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-goat-head"></i>
</div>
<span> goat-head </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-gorilla"></i>
</div>
<span> gorilla </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-hen-tracks"></i>
</div>
<span> hen-tracks </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-horse-head-1"></i>
</div>
<span> horse-head-1 </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-horse-head-2"></i>
</div>
<span> horse-head-2 </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-horse-head"></i>
</div>
<span> horse-head </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-horse-tracks"></i>
</div>
<span> horse-tracks </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-jellyfish"></i>
</div>
<span> jellyfish </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-kangaroo"></i>
</div>
<span> kangaroo </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-lemur"></i>
</div>
<span> lemur </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-lion-head-1"></i>
</div>
<span> lion-head-1 </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-lion-head-2"></i>
</div>
<span> lion-head-2 </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-lion-head"></i>
</div>
<span> lion-head </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-lion"></i>
</div>
<span> lion </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-monkey-2"></i>
</div>
<span> monkey-2 </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-monkey-3"></i>
</div>
<span> monkey-3 </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-monkey-face"></i>
</div>
<span> monkey-face </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-monkey"></i>
</div>
<span> monkey </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-octopus-alt"></i>
</div>
<span> octopus-alt </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-octopus"></i>
</div>
<span> octopus </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-owl"></i>
</div>
<span> owl </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-panda-face"></i>
</div>
<span> panda-face </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-panda"></i>
</div>
<span> panda </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-panther"></i>
</div>
<span> panther </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-parrot-lip"></i>
</div>
<span> parrot-lip </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-parrot"></i>
</div>
<span> parrot </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-paw"></i>
</div>
<span> paw </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-pelican"></i>
</div>
<span> pelican </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-penguin"></i>
</div>
<span> penguin </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-pig-face"></i>
</div>
<span> pig-face </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-pig"></i>
</div>
<span> pig </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-pigeon-1"></i>
</div>
<span> pigeon-1 </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-pigeon-2"></i>
</div>
<span> pigeon-2 </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-pigeon"></i>
</div>
<span> pigeon </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-rabbit"></i>
</div>
<span> rabbit </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-rat"></i>
</div>
<span> rat </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-rhino-head"></i>
</div>
<span> rhino-head </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-rhino"></i>
</div>
<span> rhino </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-rooster"></i>
</div>
<span> rooster </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-seahorse"></i>
</div>
<span> seahorse </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-seal"></i>
</div>
<span> seal </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-shrimp-alt"></i>
</div>
<span> shrimp-alt </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-shrimp"></i>
</div>
<span> shrimp </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-snail-1"></i>
</div>
<span> snail-1 </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-snail-2"></i>
</div>
<span> snail-2 </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-snail-3"></i>
</div>
<span> snail-3 </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-snail"></i>
</div>
<span> snail </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-snake"></i>
</div>
<span> snake </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-squid"></i>
</div>
<span> squid </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-squirrel"></i>
</div>
<span> squirrel </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-tiger-face"></i>
</div>
<span> tiger-face </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-tiger"></i>
</div>
<span> tiger </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-turtle"></i>
</div>
<span> turtle </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-whale"></i>
</div>
<span> whale </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-woodpecker"></i>
</div>
<span> woodpecker </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-zebra"></i>
</div>
<span> zebra </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-acer"></i>
</div>
<span> brand-acer </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-adidas"></i>
</div>
<span> brand-adidas </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-adobe"></i>
</div>
<span> brand-adobe </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-air-new-zealand"></i>
</div>
<span> brand-air-new-zealand </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-airbnb"></i>
</div>
<span> brand-airbnb </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-aircell"></i>
</div>
<span> brand-aircell </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-airtel"></i>
</div>
<span> brand-airtel </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-alcatel"></i>
</div>
<span> brand-alcatel </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-alibaba"></i>
</div>
<span> brand-alibaba </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-aliexpress"></i>
</div>
<span> brand-aliexpress </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-alipay"></i>
</div>
<span> brand-alipay </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-amazon"></i>
</div>
<span> brand-amazon </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-amd"></i>
</div>
<span> brand-amd </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-american-airlines"></i>
</div>
<span> brand-american-airlines </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-android-robot"></i>
</div>
<span> brand-android-robot </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-android"></i>
</div>
<span> brand-android </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-aol"></i>
</div>
<span> brand-aol </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-apple"></i>
</div>
<span> brand-apple </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-appstore"></i>
</div>
<span> brand-appstore </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-asus"></i>
</div>
<span> brand-asus </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-ati"></i>
</div>
<span> brand-ati </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-att"></i>
</div>
<span> brand-att </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-audi"></i>
</div>
<span> brand-audi </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-axiata"></i>
</div>
<span> brand-axiata </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-bada"></i>
</div>
<span> brand-bada </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-bbc"></i>
</div>
<span> brand-bbc </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-bing"></i>
</div>
<span> brand-bing </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-blackberry"></i>
</div>
<span> brand-blackberry </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-bmw"></i>
</div>
<span> brand-bmw </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-box"></i>
</div>
<span> brand-box </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-burger-king"></i>
</div>
<span> brand-burger-king </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-business-insider"></i>
</div>
<span> brand-business-insider </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-buzzfeed"></i>
</div>
<span> brand-buzzfeed </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-cannon"></i>
</div>
<span> brand-cannon </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-casio"></i>
</div>
<span> brand-casio </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-china-mobile"></i>
</div>
<span> brand-china-mobile </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-china-telecom"></i>
</div>
<span> brand-china-telecom </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-china-unicom"></i>
</div>
<span> brand-china-unicom </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-cisco"></i>
</div>
<span> brand-cisco </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-citibank"></i>
</div>
<span> brand-citibank </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-cnet"></i>
</div>
<span> brand-cnet </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-cnn"></i>
</div>
<span> brand-cnn </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-cocal-cola"></i>
</div>
<span> brand-cocal-cola </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-compaq"></i>
</div>
<span> brand-compaq </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-debian"></i>
</div>
<span> brand-debian </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-delicious"></i>
</div>
<span> brand-delicious </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-dell"></i>
</div>
<span> brand-dell </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-designbump"></i>
</div>
<span> brand-designbump </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-designfloat"></i>
</div>
<span> brand-designfloat </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-disney"></i>
</div>
<span> brand-disney </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-dodge"></i>
</div>
<span> brand-dodge </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-dove"></i>
</div>
<span> brand-dove </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-drupal"></i>
</div>
<span> brand-drupal </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-ebay"></i>
</div>
<span> brand-ebay </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-eleven"></i>
</div>
<span> brand-eleven </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-emirates"></i>
</div>
<span> brand-emirates </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-espn"></i>
</div>
<span> brand-espn </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-etihad-airways"></i>
</div>
<span> brand-etihad-airways </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-etisalat"></i>
</div>
<span> brand-etisalat </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-etsy"></i>
</div>
<span> brand-etsy </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-fastrack"></i>
</div>
<span> brand-fastrack </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-fedex"></i>
</div>
<span> brand-fedex </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-ferrari"></i>
</div>
<span> brand-ferrari </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-fitbit"></i>
</div>
<span> brand-fitbit </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-flikr"></i>
</div>
<span> brand-flikr </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-forbes"></i>
</div>
<span> brand-forbes </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-foursquare"></i>
</div>
<span> brand-foursquare </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-foxconn"></i>
</div>
<span> brand-foxconn </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-fujitsu"></i>
</div>
<span> brand-fujitsu </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-general-electric"></i>
</div>
<span> brand-general-electric </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-gillette"></i>
</div>
<span> brand-gillette </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-gizmodo"></i>
</div>
<span> brand-gizmodo </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-gnome"></i>
</div>
<span> brand-gnome </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-google"></i>
</div>
<span> brand-google </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-gopro"></i>
</div>
<span> brand-gopro </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-gucci"></i>
</div>
<span> brand-gucci </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-hallmark"></i>
</div>
<span> brand-hallmark </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-hi5"></i>
</div>
<span> brand-hi5 </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-honda"></i>
</div>
<span> brand-honda </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-hp"></i>
</div>
<span> brand-hp </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-hsbc"></i>
</div>
<span> brand-hsbc </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-htc"></i>
</div>
<span> brand-htc </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-huawei"></i>
</div>
<span> brand-huawei </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-hulu"></i>
</div>
<span> brand-hulu </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-hyundai"></i>
</div>
<span> brand-hyundai </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-ibm"></i>
</div>
<span> brand-ibm </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-icofont"></i>
</div>
<span> brand-icofont </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-icq"></i>
</div>
<span> brand-icq </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-ikea"></i>
</div>
<span> brand-ikea </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-imdb"></i>
</div>
<span> brand-imdb </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-indiegogo"></i>
</div>
<span> brand-indiegogo </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-intel"></i>
</div>
<span> brand-intel </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-ipair"></i>
</div>
<span> brand-ipair </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-jaguar"></i>
</div>
<span> brand-jaguar </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-java"></i>
</div>
<span> brand-java </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-joomla"></i>
</div>
<span> brand-joomla </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-kickstarter"></i>
</div>
<span> brand-kickstarter </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-kik"></i>
</div>
<span> brand-kik </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-lastfm"></i>
</div>
<span> brand-lastfm </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-lego"></i>
</div>
<span> brand-lego </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-lenovo"></i>
</div>
<span> brand-lenovo </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-levis"></i>
</div>
<span> brand-levis </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-lexus"></i>
</div>
<span> brand-lexus </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-lg"></i>
</div>
<span> brand-lg </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-life-hacker"></i>
</div>
<span> brand-life-hacker </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-linux-mint"></i>
</div>
<span> brand-linux-mint </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-linux"></i>
</div>
<span> brand-linux </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-lionix"></i>
</div>
<span> brand-lionix </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-loreal"></i>
</div>
<span> brand-loreal </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-louis-vuitton"></i>
</div>
<span> brand-louis-vuitton </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-mac-os"></i>
</div>
<span> brand-mac-os </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-marvel-app"></i>
</div>
<span> brand-marvel-app </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-mashable"></i>
</div>
<span> brand-mashable </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-mazda"></i>
</div>
<span> brand-mazda </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-mcdonals"></i>
</div>
<span> brand-mcdonals </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-mercedes"></i>
</div>
<span> brand-mercedes </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-micromax"></i>
</div>
<span> brand-micromax </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-microsoft"></i>
</div>
<span> brand-microsoft </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-mobileme"></i>
</div>
<span> brand-mobileme </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-mobily"></i>
</div>
<span> brand-mobily </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-motorola"></i>
</div>
<span> brand-motorola </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-msi"></i>
</div>
<span> brand-msi </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-mts"></i>
</div>
<span> brand-mts </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-myspace"></i>
</div>
<span> brand-myspace </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-mytv"></i>
</div>
<span> brand-mytv </span>
</div>
</li>
<li>
<div class="icon-holder">
<div class="icon">
<i class="icofont-brand-nasa"></i>
</div>
<span> brand-nasa </span>
</div>
</li