File: //proc/1526/task/1529/cwd/zaklada/html/lib/icons/demo.html
<!DOCTYPE html>
<html>
<head>
<title>Dinamo Zaklada SVG Sprite</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style type="text/css">
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-family:inherit;font-size:100%;vertical-align:baseline}
body{line-height:1;color:#000;background:#fff}
ol,ul{list-style:none}
table{border-collapse:separate;border-spacing:0;vertical-align:middle}
caption,th,td{text-align:left;font-weight:normal;vertical-align:middle}
a img{border:none}
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
body{font-family:'Dosis','Tahoma',sans-serif}
.container{margin:15px auto;width:80%}
h1{margin:40px 0 20px;font-weight:700;font-size:38px;line-height:32px;color:#fb565e}
h2{font-size:18px;padding:0 0 21px 5px;margin:45px 0 0 0;text-transform:uppercase;font-weight:500; color: #fb565e;}
p {margin: 10px 0 ; line-height:1.3em; color: #454545;}
.small{font-size:14px;color:#a5adb4;}
.small a{color:#a5adb4;}
.small a:hover{color:#fb565e}
.glyphs{margin:0 0 60px 0;padding:30px 0 20px 30px;color:rgba(0,0,0,0.8);border:1px solid #d8e0e5;-webkit-border-radius:3px;border-radius:3px;}
.glyphs li{margin:0 30px 20px 0;padding:0;display:inline-block;overflow:hidden}
.glyphs input{margin:0;margin-top:5px;padding:8px;line-height:16px;font-size:16px;display:block;width:150px;height:40px;border:1px solid #d8e0e5;-webkit-border-radius:5px;border-radius:5px;background:#fff;outline:0;float:right;}
.glyphs input:focus{border:1px solid #fbde4a;-webkit-box-shadow:inset 0 0 3px #fbde4a;box-shadow:inset 0 0 3px #fbde4a}
.glyphs input:hover{-webkit-box-shadow:inset 0 0 3px #fbde4a;box-shadow:inset 0 0 3px #fbde4a}
/*
github.com style (c) Vasily Polovnyov <vast@whiteants.net>
*/
.hljs {
display: block; padding: 0.5em;
color: #333;
background: #f8f8f8
}
.hljs-comment,
.hljs-template_comment,
.diff .hljs-header,
.hljs-javadoc {
color: #998;
font-style: italic
}
.hljs-keyword,
.css .rule .hljs-keyword,
.hljs-winutils,
.javascript .hljs-title,
.nginx .hljs-title,
.hljs-subst,
.hljs-request,
.hljs-status {
color: #333;
font-weight: bold
}
.hljs-number,
.hljs-hexcolor,
.ruby .hljs-constant {
color: #099;
}
.hljs-string,
.hljs-tag .hljs-value,
.hljs-phpdoc,
.tex .hljs-formula {
color: #d14
}
.hljs-title,
.hljs-id,
.coffeescript .hljs-params,
.scss .hljs-preprocessor {
color: #900;
font-weight: bold
}
.javascript .hljs-title,
.lisp .hljs-title,
.clojure .hljs-title,
.hljs-subst {
font-weight: normal
}
.hljs-class .hljs-title,
.haskell .hljs-type,
.vhdl .hljs-literal,
.tex .hljs-command {
color: #458;
font-weight: bold
}
.hljs-tag,
.hljs-tag .hljs-title,
.hljs-rules .hljs-property,
.django .hljs-tag .hljs-keyword {
color: #000080;
font-weight: normal
}
.hljs-attribute,
.hljs-variable,
.lisp .hljs-body {
color: #008080
}
.hljs-regexp {
color: #009926
}
.hljs-symbol,
.ruby .hljs-symbol .hljs-string,
.lisp .hljs-keyword,
.tex .hljs-special,
.hljs-prompt {
color: #990073
}
.hljs-built_in,
.lisp .hljs-title,
.clojure .hljs-built_in {
color: #0086b3
}
.hljs-preprocessor,
.hljs-pragma,
.hljs-pi,
.hljs-doctype,
.hljs-shebang,
.hljs-cdata {
color: #999;
font-weight: bold
}
.hljs-deletion {
background: #fdd
}
.hljs-addition {
background: #dfd
}
.diff .hljs-change {
background: #0086b3
}
.hljs-chunk {
color: #aaa
}
.tip {
font-size: 16px;
line-height: 25px;
margin-bottom: 30px;
}
.tip > .number {
display: inline-block;
font-size: 16px;
line-height: 16px;
margin-right: 12px;
padding: 3px 7px;
-webkit-border-radius: 50px;
border-radius: 50px;
background-color: #fb565e;
color: #fff;
text-align: center;
}
code {
background: #faf9ff;
border: 1px solid #bab9c0;
-webkit-border-radius: 3px;
border-radius: 3px;
padding: 0 4px;
font-size: 14px;
}
pre code {
display: block;
padding: 4px 6px;
}
[class^="icon-"],
[class*=" icon-"] {
margin: 10px;
height: 32px;
width: 32px;
float: left;
fill: currentColor;
}
</style>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="icon-angle-left" viewBox="0 0 512 512">
<path d="m354 13l-244 243 244 244 60-61-183-183 183-183z"/>
</symbol>
<symbol id="icon-angle-right" viewBox="0 0 512 512">
<path d="m158 500l244-244-244-243-60 60 183 183-183 183z"/>
</symbol>
<symbol id="icon-arrow-down" viewBox="0 0 512 512">
<path d="m439 98l-183 183-183-183-60 60 243 244 244-244z"/>
</symbol>
<symbol id="icon-chevron-down" viewBox="0 0 512 512">
<path d="m3 93c-2 3-3 8-3 12 0 4 2 8 5 12l230 305c2 3 5 6 9 7 4 2 8 3 12 3 4 0 8-1 12-3 4-1 7-4 9-7l230-305c3-4 5-8 5-12 0-4-1-9-3-12-2-4-5-7-9-10-4-2-9-3-14-3l-460 0c-5 0-10 1-14 3-4 3-7 6-9 10z"/>
</symbol>
<symbol id="icon-chevron-left" viewBox="0 0 512 512">
<path d="m452 500c-4 2-10 3-15 3-5-1-10-2-14-5l-366-226c-4-2-7-5-9-9-2-4-3-8-3-12 0-4 1-8 3-11 2-4 5-7 9-9l366-227c4-2 9-4 14-4 5 0 11 1 15 3 5 2 8 5 11 9 3 4 4 9 4 13l0 453c0 4-1 9-4 13-3 4-6 7-11 9z"/>
</symbol>
<symbol id="icon-chevron-right" viewBox="0 0 512 512">
<path d="m60 500c4 2 10 3 15 3 5-1 10-2 14-5l366-226c4-2 7-5 9-9 2-4 3-8 3-12 0-4-1-8-3-11-2-4-5-7-9-9l-366-227c-4-2-9-4-14-4-5 0-11 1-15 3-5 2-8 5-11 9-3 4-4 9-4 13l0 453c0 4 1 9 4 13 3 4 6 7 11 9z"/>
</symbol>
<symbol id="icon-facebook" viewBox="0 0 512 512">
<path d="m191 512l0-240-67 0 0-87 67 0 0-74c0-58 40-111 132-111 37 0 65 3 65 3l-2 81c0 0-28 0-59 0-33 0-38 14-38 38l0 63 99 0-4 87-95 0 0 240z"/>
</symbol>
<symbol id="icon-fax" viewBox="0 0 512 512">
<path d="m223 113l121 0 0 49-121 0z m-73 73l0-145 266 0 0 145c20 0 38 8 52 21 13 14 21 32 21 52l0 145-73 0 0 72-266 0 0-72-24 0 0-218z m49-97l0 97 169 0 0-97z m0 242l0 97 169 0 0-97z m217-97c-6 0-12 3-17 7-4 5-7 11-7 18 0 6 3 12 7 17 5 4 11 7 17 7 7 0 13-3 17-7 5-5 8-11 8-17 0-7-3-13-8-18-4-4-10-7-17-7z m-363-48l25 0c6 0 12 2 17 7 4 5 7 11 7 17l0 170c0 6-3 12-7 17-5 4-11 7-17 7l-25 0c-13 0-25-5-34-14-9-10-14-22-14-35l0-121c0-13 5-25 14-34 9-9 21-14 34-14z"/>
</symbol>
<symbol id="icon-ig-icon" viewBox="0 0 512 512">
<path d="m502 146c0-20-4-41-11-60-7-17-16-32-29-44-12-13-27-23-44-29-19-7-39-11-60-11-26-2-35-2-102-2-67 0-76 0-102 2-21 0-41 4-60 11-17 6-32 16-44 29-13 12-22 27-29 44-7 19-11 39-11 60-1 26-2 35-2 102 0 67 0 75 2 102 0 20 4 41 11 60 7 16 16 31 29 44 12 12 27 22 44 28 19 8 39 12 60 13 26 1 35 1 102 1 67 0 76 0 102-1 21-1 41-5 60-12 17-6 32-16 44-28 13-13 22-28 29-44 7-19 11-40 11-60 1-27 2-35 2-102 0-68 0-76-2-103z m-246 229c-70 0-127-57-127-127 0-71 57-128 127-128 34 0 66 14 90 38 24 23 37 56 37 90 0 33-13 66-37 90-24 23-56 37-90 37z m132-230c-16 0-30-13-30-29 0-4 1-8 3-12 1-3 3-7 6-9 3-3 6-5 10-7 3-1 7-2 11-2 4 0 8 1 11 2 4 2 7 4 10 7 3 2 5 6 6 9 2 4 3 8 3 12 0 16-14 29-30 29z m-132 185c45 0 82-37 82-82 0-46-37-83-82-83-46 0-83 37-83 83 0 45 37 82 83 82z"/>
</symbol>
<symbol id="icon-linkedin" viewBox="0 0 512 512">
<path d="m121 488l0-313-107 0 0 313z m-54-356c37 0 61-24 61-54-1-31-24-54-60-54-36 0-60 23-60 54 0 30 23 54 59 54z m112 356l107 0 0-175c0-9 0-19 3-25 8-19 25-38 55-38 38 0 54 28 54 71l0 167 106 0 0-180c0-96-52-140-122-140-58 0-83 31-97 52l1 0 0-45-107 0c2 29 0 313 0 313z"/>
</symbol>
<symbol id="icon-location" viewBox="0 0 512 512">
<path d="m109 67c39-39 92-61 147-61 55 0 108 22 147 61 39 39 61 91 61 147 0 55-22 107-61 146l-147 147-147-147c-19-19-34-42-45-67-10-25-16-52-16-79 0-28 6-55 16-80 11-25 26-48 45-67z m147 206c16 0 31-6 42-18 11-11 17-26 17-41 0-16-6-31-17-42-11-12-26-18-42-18-16 0-31 6-42 18-11 11-17 26-17 42 0 15 6 30 17 41 11 12 26 18 42 18z"/>
</symbol>
<symbol id="icon-mail" viewBox="0 0 512 512">
<path d="m508 388l0-264c0-25-20-45-44-45l-412 0c-25 0-45 20-45 45l0 264c0 25 20 45 45 45l412 0c24 0 44-20 44-45z m-38-268c9 10 4 20-1 25l-120 110 115 119c4 4 6 11 2 15-4 5-13 4-17 2l-128-110-63 57-63-57-129 110c-4 2-12 3-16-2-4-4-2-11 2-15l114-119-119-110c-5-5-11-15-1-25 10-9 20-5 28 2l184 149 184-149c8-7 18-11 28-2z"/>
</symbol>
<symbol id="icon-phone" viewBox="0 0 512 512">
<path d="m314 456c-142-26-236-161-210-302 1-7 6-11 12-11l60-3c3-1 6 0 9 2 2 2 4 5 5 8l15 67c1 2 1 5 0 8-2 3-4 5-6 6l-39 22c13 47 42 88 81 115l33-28c2-2 5-3 8-4 3 0 6 1 8 3l57 37c3 2 5 4 6 8 1 3 1 6-1 9l-23 55c-1 3-3 5-6 6-3 2-6 2-9 2z m-88-332c17 8 28 24 29 42 1 6-5 11-11 10l-6-1c-4-1-7-4-8-8 0-4-2-8-4-12-3-3-6-6-9-8-4-1-6-6-5-10l1-6c1-6 8-9 13-7z m18-100c71 20 118 87 111 159 0 6-5 10-11 9l-6-1c-5-1-8-5-8-10 5-61-33-116-92-132-5-2-8-6-7-11l2-6c1-6 6-9 11-8z m-9 50c44 14 73 55 70 101 0 6-5 10-10 9l-7-1c-4-1-8-5-8-10 2-34-20-65-52-75-5-1-7-6-6-11l1-6c1-5 7-9 12-7z"/>
</symbol>
<symbol id="icon-search" viewBox="0 0 512 512">
<path d="m416 380l79 78c6 6 9 13 9 21 0 8-4 15-9 21-5 5-13 8-21 8-7 0-15-3-20-8l-79-79c-47 36-105 53-164 48-59-6-113-34-152-78-39-44-60-102-58-161 2-59 26-115 68-157 41-41 97-66 156-68 59-1 117 19 161 58 45 39 72 94 78 153 6 58-12 117-48 164z m-183 32c46 0 90-19 123-51 33-33 51-77 51-123 0-47-18-91-51-124-33-32-77-51-123-51-46 0-91 19-123 51-33 33-51 77-51 124 0 46 18 90 51 123 32 32 77 51 123 51z m87-145l-58 0 0 58c0 7-3 15-9 20-5 6-12 9-20 9-8 0-15-3-21-9-5-5-8-13-8-20l0-58-58 0c-8 0-15-4-21-9-5-5-8-13-8-20 0-8 3-16 8-21 6-5 13-9 21-9l58 0 0-58c0-7 3-15 8-20 6-6 13-9 21-9 8 0 15 3 20 9 6 5 9 13 9 20l0 58 58 0c8 0 15 4 20 9 6 5 9 13 9 21 0 7-3 15-9 20-5 5-12 9-20 9z"/>
</symbol>
<symbol id="icon-share" viewBox="0 0 512 512">
<path d="m384 320c-23 0-44 8-60 21l-102-64c3-14 3-28 0-42l102-64c16 13 37 21 60 21 52 0 95-43 95-96 0-53-43-96-95-96-53 0-96 43-96 96 0 7 1 14 2 21l-102 64c-16-13-37-21-60-21-52 0-95 43-95 96 0 53 43 96 95 96 23 0 44-8 60-21l102 64c-1 7-2 14-2 21 0 53 43 96 96 96 52 0 95-43 95-96 0-53-43-96-95-96z"/>
</symbol>
<symbol id="icon-triangle" viewBox="0 0 512 512">
<path d="m450 277c3-2 6-5 8-9 2-4 3-8 3-12 0-4-1-8-3-12-2-4-5-7-8-9l-333-230c-4-3-9-4-13-5-5 0-10 1-14 3-4 2-7 6-10 10-2 4-3 8-3 13l0 460c0 5 1 9 3 13 3 4 6 8 10 10 4 2 9 3 14 3 4-1 9-2 13-5z"/>
</symbol>
<symbol id="icon-twitter" viewBox="0 0 512 512">
<path d="m512 99c-19 8-39 14-60 16 21-13 38-33 46-57-21 12-43 20-67 25-10-11-22-19-35-25-13-5-27-8-42-8-58 0-104 47-104 104 0 8 1 16 2 24-87-5-165-46-216-109-10 16-15 34-14 52 0 36 18 68 46 87-16-1-33-5-47-13l0 1c0 51 36 93 84 102-9 3-18 4-28 4-6 0-13-1-19-2 13 41 52 71 98 72-36 28-82 45-131 45-8 0-17 0-25-1 47 29 102 46 161 46 193 0 299-158 299-296 0-4 0-9-1-13 21-15 39-34 53-54z"/>
</symbol>
<symbol id="icon-yt-icon" viewBox="0 0 512 512">
<path d="m501 124c-3-11-8-20-16-28-8-8-18-14-29-17-40-11-200-11-200-11 0 0-160 0-200 11-11 3-21 9-29 17-8 8-13 17-16 28-11 40-11 124-11 124 0 0 0 83 11 123 6 22 23 39 45 45 40 11 200 11 200 11 0 0 160 0 200-11 22-6 39-23 45-45 11-40 11-123 11-123 0 0 0-84-11-124z m-296 200l0-153 133 76z"/>
</symbol>
<symbol id="icon-email-new" viewBox="0 0 512 512">
<path d="m481 68c-2-1-4-1-7 0l-439 0c-3 0-6 0-8 1l227 226z m23 21l-228 228c-6 6-14 9-22 9-9 0-17-3-23-9l-226-226c-1 3-1 5-1 8l0 314c0 8 3 16 9 22 6 6 14 9 22 9l440 0c8 0 16-3 22-9 6-6 9-14 9-22l0-314c0-3-1-6-2-10z m-447 324l-22 0 0-22 114-114 22 22z m417 0l-22 0-114-114 22-22 114 114z"/>
</symbol>
</svg>
<div class="container">
<p class="small">This SVG sprite was created with <a href="http://fontastic.me/">Fontastic</a></p>
<h2>icons reference</h2>
<ul class="glyphs">
<li>
<svg class="icon-angle-left">
<use xlink:href="#icon-angle-left"></use>
</svg>
<input type="text" readonly="readonly" value='<svg class="icon-angle-left"><use xlink:href="#icon-angle-left"></use></svg>'>
</li>
<li>
<svg class="icon-angle-right">
<use xlink:href="#icon-angle-right"></use>
</svg>
<input type="text" readonly="readonly" value='<svg class="icon-angle-right"><use xlink:href="#icon-angle-right"></use></svg>'>
</li>
<li>
<svg class="icon-arrow-down">
<use xlink:href="#icon-arrow-down"></use>
</svg>
<input type="text" readonly="readonly" value='<svg class="icon-arrow-down"><use xlink:href="#icon-arrow-down"></use></svg>'>
</li>
<li>
<svg class="icon-chevron-down">
<use xlink:href="#icon-chevron-down"></use>
</svg>
<input type="text" readonly="readonly" value='<svg class="icon-chevron-down"><use xlink:href="#icon-chevron-down"></use></svg>'>
</li>
<li>
<svg class="icon-chevron-left">
<use xlink:href="#icon-chevron-left"></use>
</svg>
<input type="text" readonly="readonly" value='<svg class="icon-chevron-left"><use xlink:href="#icon-chevron-left"></use></svg>'>
</li>
<li>
<svg class="icon-chevron-right">
<use xlink:href="#icon-chevron-right"></use>
</svg>
<input type="text" readonly="readonly" value='<svg class="icon-chevron-right"><use xlink:href="#icon-chevron-right"></use></svg>'>
</li>
<li>
<svg class="icon-facebook">
<use xlink:href="#icon-facebook"></use>
</svg>
<input type="text" readonly="readonly" value='<svg class="icon-facebook"><use xlink:href="#icon-facebook"></use></svg>'>
</li>
<li>
<svg class="icon-fax">
<use xlink:href="#icon-fax"></use>
</svg>
<input type="text" readonly="readonly" value='<svg class="icon-fax"><use xlink:href="#icon-fax"></use></svg>'>
</li>
<li>
<svg class="icon-ig-icon">
<use xlink:href="#icon-ig-icon"></use>
</svg>
<input type="text" readonly="readonly" value='<svg class="icon-ig-icon"><use xlink:href="#icon-ig-icon"></use></svg>'>
</li>
<li>
<svg class="icon-linkedin">
<use xlink:href="#icon-linkedin"></use>
</svg>
<input type="text" readonly="readonly" value='<svg class="icon-linkedin"><use xlink:href="#icon-linkedin"></use></svg>'>
</li>
<li>
<svg class="icon-location">
<use xlink:href="#icon-location"></use>
</svg>
<input type="text" readonly="readonly" value='<svg class="icon-location"><use xlink:href="#icon-location"></use></svg>'>
</li>
<li>
<svg class="icon-mail">
<use xlink:href="#icon-mail"></use>
</svg>
<input type="text" readonly="readonly" value='<svg class="icon-mail"><use xlink:href="#icon-mail"></use></svg>'>
</li>
<li>
<svg class="icon-phone">
<use xlink:href="#icon-phone"></use>
</svg>
<input type="text" readonly="readonly" value='<svg class="icon-phone"><use xlink:href="#icon-phone"></use></svg>'>
</li>
<li>
<svg class="icon-search">
<use xlink:href="#icon-search"></use>
</svg>
<input type="text" readonly="readonly" value='<svg class="icon-search"><use xlink:href="#icon-search"></use></svg>'>
</li>
<li>
<svg class="icon-share">
<use xlink:href="#icon-share"></use>
</svg>
<input type="text" readonly="readonly" value='<svg class="icon-share"><use xlink:href="#icon-share"></use></svg>'>
</li>
<li>
<svg class="icon-triangle">
<use xlink:href="#icon-triangle"></use>
</svg>
<input type="text" readonly="readonly" value='<svg class="icon-triangle"><use xlink:href="#icon-triangle"></use></svg>'>
</li>
<li>
<svg class="icon-twitter">
<use xlink:href="#icon-twitter"></use>
</svg>
<input type="text" readonly="readonly" value='<svg class="icon-twitter"><use xlink:href="#icon-twitter"></use></svg>'>
</li>
<li>
<svg class="icon-yt-icon">
<use xlink:href="#icon-yt-icon"></use>
</svg>
<input type="text" readonly="readonly" value='<svg class="icon-yt-icon"><use xlink:href="#icon-yt-icon"></use></svg>'>
</li>
<li>
<svg class="icon-email-new">
<use xlink:href="#icon-email-new"></use>
</svg>
<input type="text" readonly="readonly" value='<svg class="icon-email-new"><use xlink:href="#icon-email-new"></use></svg>'>
</li>
</ul>
<h2>How to add SVG sprite icons to your project?</h2>
<div class="tip"><p></p><div class="number">1</div>Upload the icons.svg file to your server. In our examples below we assume that the sprite file will be available at: <code>http://yoursite.com/images/icons.svg</code><p></p></div><div class="tip"><p></p><div class="number">2</div>Go to "Icons Reference" and choose an icon that you want to have on your HTML page. Then click and copy its markup to your HTML page. For instance, the markup for a twitter icon could look like this:<p></p><pre><code><span class="hljs-tag"><<span class="hljs-title">svg</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"icon-twitter"</span>></span><span class="hljs-tag"><<span class="hljs-title">use</span> <span class="hljs-attribute">xlink:href</span>=<span class="hljs-value">"#icon-twitter"</span>></span><span class="hljs-tag"></<span class="hljs-title">use</span>></span><span class="hljs-tag"></<span class="hljs-title">svg</span>></span>
</code></pre></div><div class="tip"><p></p><div class="number">3</div>Now it's time to add the sprite file URL to the icon markup. In the example below, the URL is <code>/images/icons.svg</code>. So now the twitter icon markup could look like this:<p></p><pre><code><span class="hljs-tag"><<span class="hljs-title">svg</span> <span class="hljs-attribute">class</span>=<span class="hljs-value">"icon-twitter"</span>></span><span class="hljs-tag"><<span class="hljs-title">use</span> <span class="hljs-attribute">xlink:href</span>=<span class="hljs-value">"/images/icons.svg#icon-twitter"</span>></span><span class="hljs-tag"></<span class="hljs-title">use</span>></span><span class="hljs-tag"></<span class="hljs-title">svg</span>></span>
</code></pre></div><div class="tip"><p></p><div class="number">4</div>Add the code below to the CSS file that you use for your html page:<p></p><pre><code><span class="hljs-attr_selector">[class^="icon-"]</span>, <span class="hljs-attr_selector">[class*=" icon-"]</span> <span class="hljs-rules">{
<span class="hljs-rule"><span class="hljs-attribute">height</span>:<span class="hljs-value"> <span class="hljs-number">32</span>px</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">width</span>:<span class="hljs-value"> <span class="hljs-number">32</span>px</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">display</span>:<span class="hljs-value"> inline-block</span></span>;
<span class="hljs-rule"><span class="hljs-attribute">fill</span>:<span class="hljs-value"> currentColor</span></span>;
<span class="hljs-rule">}</span></span>
</code></pre><p>You can use <code>height</code> and <code>width</code> properties to control icon size. To define icon color use <code>fill</code> property. Note: <code>currentColor</code> keyword inherits the color value of a parent element.</p></div><div class="tip"><p></p><div class="number">5</div>For IE capability you can use a great polyfill: <a href="https://github.com/jonathantneal/svg4everybody" target="blank">svg4everybody</a><p></p></div><div class="tip"><p> <b>Remember: </b>with Icon Cloud you don't have to worry about IE capability, the sprite file and other stuff. We'll take care of all of that for you, just click the "Publish" button and give it a try.</p></div>
</div>
<script type="text/javascript">
(function() {
var glyphs, _i, _len, _ref;
_ref = document.getElementsByClassName('glyphs');
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
glyphs = _ref[_i];
glyphs.addEventListener('click', function(event) {
if (event.target.tagName === 'INPUT') {
return event.target.select();
}
});
}
}).call(this);
</script>
</body>
</html>