/home/arranoyd/mice/wp-content/themes/phlox/auxin/css/fonts/options-icon/AxiAdminCustomFont.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>AxiAdminCustomFont</title>
<style>
body {
margin:0;
padding:10px 20px;
background:#fff;
color:#222;
}
h1, div, footer {
font-family:"Helvetica Neue", Arial, sans-serif;
}
h1 {
margin:0 0 20px;
font-size:32px;
font-weight:normal;
}
h1 small {
font-size: 0.8em;
padding-left: 2em;
}
.icons {
margin-bottom:40px;
-webkit-column-count:5;
-moz-column-count:5;
column-count:5;
-webkit-column-gap:20px;
-moz-column-gap:20px;
column-gap:20px;
}
.icons__item,
.icons__item i {
line-height:2em;
cursor:pointer;
overflow:hidden;
}
.icons__item:hover {
color:#3c90be;
}
.icons__item i {
display:inline-block;
width:32px;
text-align:center;
}
.icons__item:hover i {
-webkit-transform:scale(1.5);
transform:scale(1.5);
}
footer {
margin-top:40px;
font-size:14px;
color:#999;
}
/* Generated by grunt-webfont */
@font-face {
font-family:"AxiAdminCustomFont";
src:url("AxiAdminCustomFont.eot?1b18058dc3297f5781776d92e83e756f");
src:url("AxiAdminCustomFont.eot?#iefix") format("embedded-opentype"),
url("AxiAdminCustomFont.woff?1b18058dc3297f5781776d92e83e756f") format("woff"),
url("AxiAdminCustomFont.ttf?1b18058dc3297f5781776d92e83e756f") format("truetype");
font-weight:normal;
font-style:normal;
}
.axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] {
font-family:"AxiAdminCustomFont";
display:inline-block;
vertical-align:middle;
line-height:1;
font-weight:normal;
font-style:normal;
speak:none;
text-decoration:inherit;
text-transform:none;
text-rendering:auto;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}
/* Icons */
.axiAdminIcon-bg-attachment-fixed:before {
content:"\f101";
}
.axiAdminIcon-bg-attachment-scroll:before {
content:"\f102";
}
.axiAdminIcon-bg-size-1:before {
content:"\f103";
}
.axiAdminIcon-bg-size-2:before {
content:"\f104";
}
.axiAdminIcon-bg-size-3:before {
content:"\f105";
}
.axiAdminIcon-blog-content-length-1:before {
content:"\f106";
}
.axiAdminIcon-blog-content-length-2:before {
content:"\f107";
}
.axiAdminIcon-blog-layout-1:before {
content:"\f108";
}
.axiAdminIcon-blog-layout-2:before {
content:"\f109";
}
.axiAdminIcon-blog-layout-3:before {
content:"\f10a";
}
.axiAdminIcon-blog-layout-4:before {
content:"\f10b";
}
.axiAdminIcon-blog-layout-5:before {
content:"\f10c";
}
.axiAdminIcon-bottom-center:before {
content:"\f10d";
}
.axiAdminIcon-bottom-left:before {
content:"\f10e";
}
.axiAdminIcon-bottom-mid:before {
content:"\f10f";
}
.axiAdminIcon-bottom-right:before {
content:"\f110";
}
.axiAdminIcon-boxed:before {
content:"\f111";
}
.axiAdminIcon-breadcrumb-divider1:before {
content:"\f112";
}
.axiAdminIcon-breadcrumb-divider2:before {
content:"\f113";
}
.axiAdminIcon-breadcrumb-divider3:before {
content:"\f114";
}
.axiAdminIcon-center-center:before {
content:"\f115";
}
.axiAdminIcon-center-left:before {
content:"\f116";
}
.axiAdminIcon-center-right:before {
content:"\f117";
}
.axiAdminIcon-center-top:before {
content:"\f118";
}
.axiAdminIcon-content-boxed:before {
content:"\f119";
}
.axiAdminIcon-content-full-with-spaces:before {
content:"\f11a";
}
.axiAdminIcon-content-full:before {
content:"\f11b";
}
.axiAdminIcon-default:before {
content:"\f11c";
}
.axiAdminIcon-full:before {
content:"\f11d";
}
.axiAdminIcon-grid1:before {
content:"\f11e";
}
.axiAdminIcon-grid11:before {
content:"\f11f";
}
.axiAdminIcon-grid111:before {
content:"\f120";
}
.axiAdminIcon-grid1111:before {
content:"\f121";
}
.axiAdminIcon-grid11111:before {
content:"\f122";
}
.axiAdminIcon-grid112:before {
content:"\f123";
}
.axiAdminIcon-grid12:before {
content:"\f124";
}
.axiAdminIcon-grid13:before {
content:"\f125";
}
.axiAdminIcon-grid21:before {
content:"\f126";
}
.axiAdminIcon-grid211:before {
content:"\f127";
}
.axiAdminIcon-grid31:before {
content:"\f128";
}
.axiAdminIcon-left-top:before {
content:"\f129";
}
.axiAdminIcon-mid-left:before {
content:"\f12a";
}
.axiAdminIcon-mid-mid:before {
content:"\f12b";
}
.axiAdminIcon-mid-right:before {
content:"\f12c";
}
.axiAdminIcon-none:before {
content:"\f12d";
}
.axiAdminIcon-padding-none:before {
content:"\f12e";
}
.axiAdminIcon-padding-x-y:before {
content:"\f12f";
}
.axiAdminIcon-padding-x:before {
content:"\f130";
}
.axiAdminIcon-padding-y:before {
content:"\f131";
}
.axiAdminIcon-pattern:before {
content:"\f132";
}
.axiAdminIcon-repeat-x:before {
content:"\f133";
}
.axiAdminIcon-repeat-xy:before {
content:"\f134";
}
.axiAdminIcon-repeat-y:before {
content:"\f135";
}
.axiAdminIcon-right-center:before {
content:"\f136";
}
.axiAdminIcon-right-top:before {
content:"\f137";
}
.axiAdminIcon-scroll-down-arrow-outline:before {
content:"\f138";
}
.axiAdminIcon-scroll-down-arrow:before {
content:"\f139";
}
.axiAdminIcon-sidebar-left-left:before {
content:"\f13a";
}
.axiAdminIcon-sidebar-left-right:before {
content:"\f13b";
}
.axiAdminIcon-sidebar-left:before {
content:"\f13c";
}
.axiAdminIcon-sidebar-none:before {
content:"\f13d";
}
.axiAdminIcon-sidebar-right-right:before {
content:"\f13e";
}
.axiAdminIcon-sidebar-right:before {
content:"\f13f";
}
.axiAdminIcon-text-align-center:before {
content:"\f140";
}
.axiAdminIcon-text-align-justify:before {
content:"\f141";
}
.axiAdminIcon-text-align-left:before {
content:"\f142";
}
.axiAdminIcon-text-align-right:before {
content:"\f143";
}
.axiAdminIcon-top-center:before {
content:"\f144";
}
.axiAdminIcon-top-left:before {
content:"\f145";
}
.axiAdminIcon-top-mid:before {
content:"\f146";
}
.axiAdminIcon-top-right:before {
content:"\f147";
}
</style>
</head>
<body>
<h1>AxiAdminCustomFont</h1>
<div class="icons" id="icons">
<div class="icons__item" data-name="bg-attachment-fixed"><i class="axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] axiAdminIcon-bg-attachment-fixed"></i> axiAdminIcon-bg-attachment-fixed</div>
<div class="icons__item" data-name="bg-attachment-scroll"><i class="axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] axiAdminIcon-bg-attachment-scroll"></i> axiAdminIcon-bg-attachment-scroll</div>
<div class="icons__item" data-name="bg-size-1"><i class="axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] axiAdminIcon-bg-size-1"></i> axiAdminIcon-bg-size-1</div>
<div class="icons__item" data-name="bg-size-2"><i class="axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] axiAdminIcon-bg-size-2"></i> axiAdminIcon-bg-size-2</div>
<div class="icons__item" data-name="bg-size-3"><i class="axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] axiAdminIcon-bg-size-3"></i> axiAdminIcon-bg-size-3</div>
<div class="icons__item" data-name="blog-content-length-1"><i class="axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] axiAdminIcon-blog-content-length-1"></i> axiAdminIcon-blog-content-length-1</div>
<div class="icons__item" data-name="blog-content-length-2"><i class="axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] axiAdminIcon-blog-content-length-2"></i> axiAdminIcon-blog-content-length-2</div>
<div class="icons__item" data-name="blog-layout-1"><i class="axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] axiAdminIcon-blog-layout-1"></i> axiAdminIcon-blog-layout-1</div>
<div class="icons__item" data-name="blog-layout-2"><i class="axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] axiAdminIcon-blog-layout-2"></i> axiAdminIcon-blog-layout-2</div>
<div class="icons__item" data-name="blog-layout-3"><i class="axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] axiAdminIcon-blog-layout-3"></i> axiAdminIcon-blog-layout-3</div>
<div class="icons__item" data-name="blog-layout-4"><i class="axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] axiAdminIcon-blog-layout-4"></i> axiAdminIcon-blog-layout-4</div>
<div class="icons__item" data-name="blog-layout-5"><i class="axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] axiAdminIcon-blog-layout-5"></i> axiAdminIcon-blog-layout-5</div>
<div class="icons__item" data-name="bottom-center"><i class="axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] axiAdminIcon-bottom-center"></i> axiAdminIcon-bottom-center</div>
<div class="icons__item" data-name="bottom-left"><i class="axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] axiAdminIcon-bottom-left"></i> axiAdminIcon-bottom-left</div>
<div class="icons__item" data-name="bottom-mid"><i class="axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] axiAdminIcon-bottom-mid"></i> axiAdminIcon-bottom-mid</div>
<div class="icons__item" data-name="bottom-right"><i class="axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] axiAdminIcon-bottom-right"></i> axiAdminIcon-bottom-right</div>
<div class="icons__item" data-name="boxed"><i class="axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] axiAdminIcon-boxed"></i> axiAdminIcon-boxed</div>
<div class="icons__item" data-name="breadcrumb-divider1"><i class="axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] axiAdminIcon-breadcrumb-divider1"></i> axiAdminIcon-breadcrumb-divider1</div>
<div class="icons__item" data-name="breadcrumb-divider2"><i class="axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] axiAdminIcon-breadcrumb-divider2"></i> axiAdminIcon-breadcrumb-divider2</div>
<div class="icons__item" data-name="breadcrumb-divider3"><i class="axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] axiAdminIcon-breadcrumb-divider3"></i> axiAdminIcon-breadcrumb-divider3</div>
<div class="icons__item" data-name="center-center"><i class="axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] axiAdminIcon-center-center"></i> axiAdminIcon-center-center</div>
<div class="icons__item" data-name="center-left"><i class="axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] axiAdminIcon-center-left"></i> axiAdminIcon-center-left</div>
<div class="icons__item" data-name="center-right"><i class="axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] axiAdminIcon-center-right"></i> axiAdminIcon-center-right</div>
<div class="icons__item" data-name="center-top"><i class="axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] axiAdminIcon-center-top"></i> axiAdminIcon-center-top</div>
<div class="icons__item" data-name="content-boxed"><i class="axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] axiAdminIcon-content-boxed"></i> axiAdminIcon-content-boxed</div>
<div class="icons__item" data-name="content-full-with-spaces"><i class="axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] axiAdminIcon-content-full-with-spaces"></i> axiAdminIcon-content-full-with-spaces</div>
<div class="icons__item" data-name="content-full"><i class="axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] axiAdminIcon-content-full"></i> axiAdminIcon-content-full</div>
<div class="icons__item" data-name="default"><i class="axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] axiAdminIcon-default"></i> axiAdminIcon-default</div>
<div class="icons__item" data-name="full"><i class="axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] axiAdminIcon-full"></i> axiAdminIcon-full</div>
<div class="icons__item" data-name="grid1"><i class="axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] axiAdminIcon-grid1"></i> axiAdminIcon-grid1</div>
<div class="icons__item" data-name="grid11"><i class="axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] axiAdminIcon-grid11"></i> axiAdminIcon-grid11</div>
<div class="icons__item" data-name="grid111"><i class="axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] axiAdminIcon-grid111"></i> axiAdminIcon-grid111</div>
<div class="icons__item" data-name="grid1111"><i class="axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] axiAdminIcon-grid1111"></i> axiAdminIcon-grid1111</div>
<div class="icons__item" data-name="grid11111"><i class="axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] axiAdminIcon-grid11111"></i> axiAdminIcon-grid11111</div>
<div class="icons__item" data-name="grid112"><i class="axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] axiAdminIcon-grid112"></i> axiAdminIcon-grid112</div>
<div class="icons__item" data-name="grid12"><i class="axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] axiAdminIcon-grid12"></i> axiAdminIcon-grid12</div>
<div class="icons__item" data-name="grid13"><i class="axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] axiAdminIcon-grid13"></i> axiAdminIcon-grid13</div>
<div class="icons__item" data-name="grid21"><i class="axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] axiAdminIcon-grid21"></i> axiAdminIcon-grid21</div>
<div class="icons__item" data-name="grid211"><i class="axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] axiAdminIcon-grid211"></i> axiAdminIcon-grid211</div>
<div class="icons__item" data-name="grid31"><i class="axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] axiAdminIcon-grid31"></i> axiAdminIcon-grid31</div>
<div class="icons__item" data-name="left-top"><i class="axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] axiAdminIcon-left-top"></i> axiAdminIcon-left-top</div>
<div class="icons__item" data-name="mid-left"><i class="axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] axiAdminIcon-mid-left"></i> axiAdminIcon-mid-left</div>
<div class="icons__item" data-name="mid-mid"><i class="axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] axiAdminIcon-mid-mid"></i> axiAdminIcon-mid-mid</div>
<div class="icons__item" data-name="mid-right"><i class="axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] axiAdminIcon-mid-right"></i> axiAdminIcon-mid-right</div>
<div class="icons__item" data-name="none"><i class="axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] axiAdminIcon-none"></i> axiAdminIcon-none</div>
<div class="icons__item" data-name="padding-none"><i class="axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] axiAdminIcon-padding-none"></i> axiAdminIcon-padding-none</div>
<div class="icons__item" data-name="padding-x-y"><i class="axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] axiAdminIcon-padding-x-y"></i> axiAdminIcon-padding-x-y</div>
<div class="icons__item" data-name="padding-x"><i class="axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] axiAdminIcon-padding-x"></i> axiAdminIcon-padding-x</div>
<div class="icons__item" data-name="padding-y"><i class="axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] axiAdminIcon-padding-y"></i> axiAdminIcon-padding-y</div>
<div class="icons__item" data-name="pattern"><i class="axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] axiAdminIcon-pattern"></i> axiAdminIcon-pattern</div>
<div class="icons__item" data-name="repeat-x"><i class="axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] axiAdminIcon-repeat-x"></i> axiAdminIcon-repeat-x</div>
<div class="icons__item" data-name="repeat-xy"><i class="axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] axiAdminIcon-repeat-xy"></i> axiAdminIcon-repeat-xy</div>
<div class="icons__item" data-name="repeat-y"><i class="axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] axiAdminIcon-repeat-y"></i> axiAdminIcon-repeat-y</div>
<div class="icons__item" data-name="right-center"><i class="axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] axiAdminIcon-right-center"></i> axiAdminIcon-right-center</div>
<div class="icons__item" data-name="right-top"><i class="axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] axiAdminIcon-right-top"></i> axiAdminIcon-right-top</div>
<div class="icons__item" data-name="scroll-down-arrow-outline"><i class="axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] axiAdminIcon-scroll-down-arrow-outline"></i> axiAdminIcon-scroll-down-arrow-outline</div>
<div class="icons__item" data-name="scroll-down-arrow"><i class="axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] axiAdminIcon-scroll-down-arrow"></i> axiAdminIcon-scroll-down-arrow</div>
<div class="icons__item" data-name="sidebar-left-left"><i class="axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] axiAdminIcon-sidebar-left-left"></i> axiAdminIcon-sidebar-left-left</div>
<div class="icons__item" data-name="sidebar-left-right"><i class="axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] axiAdminIcon-sidebar-left-right"></i> axiAdminIcon-sidebar-left-right</div>
<div class="icons__item" data-name="sidebar-left"><i class="axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] axiAdminIcon-sidebar-left"></i> axiAdminIcon-sidebar-left</div>
<div class="icons__item" data-name="sidebar-none"><i class="axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] axiAdminIcon-sidebar-none"></i> axiAdminIcon-sidebar-none</div>
<div class="icons__item" data-name="sidebar-right-right"><i class="axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] axiAdminIcon-sidebar-right-right"></i> axiAdminIcon-sidebar-right-right</div>
<div class="icons__item" data-name="sidebar-right"><i class="axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] axiAdminIcon-sidebar-right"></i> axiAdminIcon-sidebar-right</div>
<div class="icons__item" data-name="text-align-center"><i class="axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] axiAdminIcon-text-align-center"></i> axiAdminIcon-text-align-center</div>
<div class="icons__item" data-name="text-align-justify"><i class="axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] axiAdminIcon-text-align-justify"></i> axiAdminIcon-text-align-justify</div>
<div class="icons__item" data-name="text-align-left"><i class="axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] axiAdminIcon-text-align-left"></i> axiAdminIcon-text-align-left</div>
<div class="icons__item" data-name="text-align-right"><i class="axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] axiAdminIcon-text-align-right"></i> axiAdminIcon-text-align-right</div>
<div class="icons__item" data-name="top-center"><i class="axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] axiAdminIcon-top-center"></i> axiAdminIcon-top-center</div>
<div class="icons__item" data-name="top-left"><i class="axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] axiAdminIcon-top-left"></i> axiAdminIcon-top-left</div>
<div class="icons__item" data-name="top-mid"><i class="axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] axiAdminIcon-top-mid"></i> axiAdminIcon-top-mid</div>
<div class="icons__item" data-name="top-right"><i class="axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] axiAdminIcon-top-right"></i> axiAdminIcon-top-right</div>
</div>
<h1>Usage</h1>
<pre><code><i class="axiAdminIcon, [class^="axiAdminIcon-"], [class*=" axiAdminIcon-"] axiAdminIcon-<span id="name">name</span>"></i></code></pre>
<footer>Generated by <a href="https://github.com/sapegin/grunt-webfont">grunt-webfont</a>.</footer>
<script>
(function() {
document.getElementById('icons').onclick = function(e) {
e = e || window.event;
var name = e.target.getAttribute('data-name') || e.target.parentNode.getAttribute('data-name');
document.getElementById('name').innerHTML = name;
}
})();
</script>
</body>
</html>