File: /var/www/clapboard/icons/demo.html
<!DOCTYPE html>
<html>
<head>
<title>Clapboard Web 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-back" viewBox="0 0 512 512">
<path d="m77 251c1-14 7-29 18-40l193-193c24-24 62-24 86 0 24 24 24 62 0 86l-152 152 152 152c24 24 24 62 0 86-24 24-62 24-86 0l-193-193c-14-14-20-32-18-50z"/>
</symbol>
<symbol id="icon-copy" viewBox="0 0 512 512">
<path d="m354 448l0 40c0 13-11 24-25 24l-276 0c-13 0-24-11-24-24l0-368c0-13 11-24 24-24l73 0 0 296c0 31 26 56 57 56z m0-344l0-104-171 0c-13 0-24 11-24 24l0 368c0 13 11 24 24 24l276 0c14 0 25-11 25-24l0-264-106 0c-13 0-24-11-24-24z m123-31l-67-66c-5-4-11-7-18-7l-6 0 0 96 98 0 0-6c0-6-3-13-7-17z"/>
</symbol>
<symbol id="icon-facebook" viewBox="0 0 512 512">
<path d="m249 8c-137 0-249 112-249 249 0 125 91 228 210 247l0-174-63 0 0-73 63 0 0-54c0-63 38-97 94-97 28 0 56 4 56 4l0 62-31 0c-31 0-41 19-41 39l0 46 69 0-11 73-58 0 0 174c119-19 210-122 210-247 0-137-111-249-249-249z"/>
</symbol>
<symbol id="icon-profile" viewBox="0 0 512 512">
<path d="m382 26c27 0 53 10 72 30 19 19 29 45 29 72l0 256c0 27-10 53-29 72-19 20-45 30-72 30l-252 0c-27 0-53-10-72-30-19-19-29-45-29-72l0-256c0-27 10-53 29-72 19-20 45-30 72-30z m0-26l-252 0c-34 0-66 13-90 37-23 24-37 57-37 91l0 256c0 34 14 67 37 91 24 24 56 37 90 37l252 0c34 0 66-13 90-37 23-24 37-57 37-91l0-256c0-17-4-33-10-49-6-16-16-30-27-42-12-11-26-21-41-27-16-7-32-10-49-10z m-145 477c-2 0-5 0-6-1-2-2-4-3-5-5-2-3-2-7-1-10 1-3 3-6 6-8l50-25 0-21c-10-11-19-23-25-37-4-1-8-3-11-5-7-6-13-14-16-23-3-9-4-19-3-28 1-5 3-9 6-12 3-3 7-6 11-8 0-26 9-51 26-70 17-19 41-31 67-32 3 0 6 1 9 4 2 2 3 5 3 9 0 3-1 6-3 9-3 2-6 3-9 3-7 0-67 4-68 87l0 13-12 0c-1 0-2 1-3 1-1 1-2 2-2 3 0 9 4 17 9 24 2 0 4 0 5 0l9 0 3 8c6 14 14 26 25 37l5 4 0 48-64 34c-2 1-4 2-6 1z m165-19c-3 0-5-1-6-2l-26-13 0-48 5-4c10-10 19-23 24-37l3-8 9 0c2 0 3-1 5-2 5-6 9-14 9-23 0-1-1-2-2-3-1-1-2-1-3-1l-12 0 0-13c0-85-65-86-68-86-2 0-3-1-5-1-1-1-3-2-4-3-1-1-2-3-3-4 0-2-1-3-1-5 1-3 2-7 4-9 3-2 6-4 9-4 26 2 50 13 67 32 17 19 26 45 26 70 4 2 8 5 11 8 3 4 5 8 6 12 1 10 0 19-3 28-3 9-9 17-16 23-3 3-7 5-11 6-6 13-15 26-25 36l0 21 11 6c3 1 5 4 6 6 2 3 2 6 1 9 0 3-2 5-4 7-3 2-5 3-8 2z m-20-432c27 0 53 10 72 30 19 19 29 45 29 72l0 256c0 27-10 53-29 72-19 20-45 30-72 30l-252 0c-27 0-53-10-72-30-19-19-29-45-29-72l0-256c0-27 10-53 29-72 19-20 45-30 72-30z m0-26l-252 0c-34 0-66 13-90 37-23 24-37 57-37 91l0 256c0 34 14 67 37 91 24 24 56 37 90 37l252 0c34 0 66-13 90-37 23-24 37-57 37-91l0-256c0-17-4-33-10-49-6-16-16-30-27-42-12-11-26-21-41-27-16-7-32-10-49-10z m-52 140c-3 0-7-1-9-4-2-2-4-5-4-8 0-2 0-3 0-5 1-1 2-3 3-4 1-1 3-2 4-3 2 0 3-1 5-1 2 0 3 0 5 1 1 1 3 1 4 3 1 1 2 2 2 3 1 2 1 4 2 5 0 2-1 3-1 5-1 1-2 3-3 4-1 1-2 2-4 3-1 0-3 1-4 1z m-46 0l-191 0c-3 0-6-2-9-4-2-3-3-6-3-9 0-3 1-7 3-9 3-3 6-4 9-4l191 0c3 0 6 1 8 4 3 2 4 6 4 9 0 3-1 6-4 9-2 2-5 4-8 4z m146 0l-55 0c-4 0-7-2-9-4-2-3-4-6-4-9 0-3 1-7 4-9 2-3 5-4 9-4l55 0c4 0 7 1 9 4 3 2 4 6 4 9 0 3-2 6-4 9-2 2-5 4-9 4z m-212 84l-120 0c-3 0-6-1-9-4-2-2-3-5-3-9 0-3 1-6 3-9 3-2 6-3 9-3l120 0c4 0 7 1 9 3 3 3 4 6 4 9 0 4-1 7-4 9-2 3-5 4-9 4z m-47 85l-73 0c-3 0-6-2-9-4-2-2-3-6-3-9 0-4 1-7 3-9 3-3 6-4 9-4l73 0c4 0 7 1 9 4 3 2 4 5 4 9 0 3-1 7-4 9-2 2-5 4-9 4z"/>
</symbol>
<symbol id="icon-earth" viewBox="0 0 512 512">
<path d="m255 463c-40 0-79-12-111-33-33-22-59-53-74-89-15-36-19-76-11-114 8-38 27-74 55-101 28-28 63-47 102-54 39-8 79-4 115 11 37 15 68 40 90 73 22 32 34 71 34 110 0 26-5 51-15 75-10 24-25 46-44 64-18 19-41 33-65 43-24 10-50 15-76 15z m0-371c-35 0-69 10-98 29-29 19-52 46-65 78-13 32-17 67-10 101 7 33 24 64 48 89 25 24 56 41 91 47 34 7 69 3 101-10 32-13 60-35 79-64 20-28 30-62 30-96 0-23-5-46-13-67-9-21-22-40-39-56-16-17-36-29-57-38-21-9-44-13-67-13z m-243 186c-2 0-3 0-5-1-1 0-2-1-3-2-2-1-2-2-3-4-1-1-1-2-1-4l0-1c0-2 0-4 1-5 0-2 1-3 2-4 1-1 2-2 4-3 1-1 3-1 4-1 2 0 4 0 5 0 2 1 3 2 4 3 1 1 2 3 3 4 1 1 1 3 1 5 0 1 0 3-1 5 0 1-1 3-2 4-1 1-3 2-4 3-2 1-3 1-5 1z m483-40c-2 0-4-1-5-1-1-1-3-1-4-2-1-1-2-3-2-4-1-2-1-3-1-5l0-1c0-3 1-6 3-8 2-2 5-4 9-4 3 0 6 2 8 4 2 2 3 5 3 8 0 3-1 6-3 9-2 2-5 3-8 4z m-127 252c-3 0-6-1-8-3-2-1-3-4-4-6-1-3 0-6 1-8 1-2 3-4 5-6 37-19 69-48 90-83 22-36 34-77 34-118 0-3 1-6 3-9 2-2 5-3 9-3 3 0 6 1 8 3 2 3 3 6 3 9 0 46-12 91-36 130-24 39-59 71-100 93-2 0-3 1-5 1z m-353-248l-2 0c-3-1-6-2-7-5-2-2-3-5-3-8 7-53 32-102 70-140 38-38 87-63 140-72 3 0 6 1 9 2 3 2 4 5 5 8 0 3 0 6-2 9-2 2-5 4-8 5-48 7-93 30-127 64-34 35-57 79-64 127 0 3-2 5-4 7-2 1-5 2-7 3z m96 155c-2 0-4 0-5-1-2-1-3-2-5-4-1-1-1-2-2-4 0-1 0-3 0-4 0-2 1-3 2-5 1-1 2-2 3-3 39-29 41-52 36-60-7-13-11-27-12-42-1-14 2-28 7-42 6-11 15-21 26-29 11-8 24-13 37-15 4-1 8-1 13-1 19-2 31-4 39-23 9-18-12-64-20-78 0-1-1-2-1-4 0-1 0-3 0-4 0-2 1-3 2-5 1-1 2-2 3-3 2-1 3-1 5-1 1-1 3-1 4 0 2 0 3 1 5 2 1 1 2 2 3 3 4 7 38 64 21 100-5 11-13 21-24 27-11 7-23 10-35 9l-11 1c-10 2-19 6-27 11-8 6-15 14-20 22-5 20-4 41 5 60 12 20 7 55-41 90-2 2-5 3-8 3z m330-103c-2 0-4-1-6-2-2-1-3-2-4-4-5-8-11-15-17-21-3-3-6-6-8-9-8-9-18-16-28-20-7-4-14-8-20-12-8-7-14-15-18-24-4-9-5-20-4-30 0-23 31-49 37-54 2-1 3-2 5-2 1-1 3-1 4-1 2 1 4 1 5 2 1 1 3 2 4 3 1 1 1 3 2 4 0 2 0 3 0 5 0 2-1 3-2 4-1 2-2 3-3 4-12 9-28 26-28 35 0 19 2 27 12 35 6 3 11 7 17 10 14 6 26 15 36 26l7 8c7 8 14 16 19 25 1 2 2 4 2 6 0 2-1 4-2 6-1 2-2 4-4 5-2 1-4 1-6 1z m-242 161c-1 0-3 0-5 0-3-1-5-3-7-6-1-3-1-6 0-9 1-3 2-5 5-6 2-2 5-2 8-2 15-7 27-17 36-31 1-7 0-14-2-21-5-13-5-28-2-42 6-13 15-24 26-32 12-9 25-15 39-17 20-5 39 1 74 17 13 6 24 14 32 25 9 11 16 24 19 37 0 1 0 3 0 4 0 2-1 3-2 5 0 1-1 2-3 3-1 1-2 2-4 2-1 0-3 0-5 0-1 0-3-1-4-2-1 0-2-1-3-3-1-1-2-2-2-4-3-10-8-19-14-27-6-7-14-14-23-19-36-15-48-18-60-15-10 1-19 5-28 11-8 6-15 14-19 23-2 10-1 20 2 29 4 11 4 22 3 33-5 17-32 36-44 43-5 2-11 4-17 4z"/>
</symbol>
<symbol id="icon-list" viewBox="0 0 512 512">
<path d="m384 29c27 0 53 10 72 29 20 19 30 45 30 72l0 252c0 27-10 53-30 72-19 19-45 29-72 29l-256 0c-27 0-53-10-72-29-20-19-30-45-30-72l0-252c0-27 10-53 30-72 19-19 45-29 72-29z m0-26l-256 0c-34 0-67 14-91 37-24 24-37 56-37 90l0 252c0 34 13 66 37 90 24 23 57 37 91 37l256 0c34 0 67-14 91-37 24-24 37-56 37-90l0-252c0-17-3-33-10-49-6-15-16-29-27-41-12-11-26-21-42-27-16-6-32-10-49-10z m0 26c27 0 53 10 72 29 20 19 30 45 30 72l0 252c0 27-10 53-30 72-19 19-45 29-72 29l-256 0c-27 0-53-10-72-29-20-19-30-45-30-72l0-252c0-27 10-53 30-72 19-19 45-29 72-29z m0-26l-256 0c-34 0-67 14-91 37-24 24-37 56-37 90l0 252c0 34 13 66 37 90 24 23 57 37 91 37l256 0c34 0 67-14 91-37 24-24 37-56 37-90l0-252c0-17-3-33-10-49-6-15-16-29-27-41-12-11-26-21-42-27-16-6-32-10-49-10z m-254 169c0-8 6-14 14-14l203 0c7 0 13 6 13 14 0 7-6 13-13 13l-203 0c-8 0-14-6-14-13z m0 82c0-7 6-13 14-13l203 0c7 0 13 6 13 13 0 8-6 14-13 14l-203 0c-8 0-14-6-14-14z m0 79c0-8 6-14 14-14l154 0c8 0 14 6 14 14 0 7-6 13-14 13l-154 0c-8 0-14-6-14-13z m200 0c0-8 7-14 14-14l90 0c8 0 14 6 14 14 0 7-6 13-14 13l-90 0c-7 0-14-6-14-13z m59-60c8 0 14 6 14 13l0 90c0 8-6 14-14 14-7 0-13-6-13-14l0-90c0-7 6-13 13-13z"/>
</symbol>
<symbol id="icon-linkedin" viewBox="0 0 512 512">
<path d="m251 8c-137 0-248 111-248 248 0 137 111 248 248 248 137 0 247-111 247-248 0-137-110-248-247-248z m-61 351l-50 0 0-162 50 0z m-25-182c-16 0-26-11-26-25 0-14 10-25 26-25 17 0 26 11 27 25 0 14-10 25-27 25z m208 182l-50 0 0-90c0-21-7-35-25-35-14 0-22 10-26 19-1 3-2 8-2 13l0 93-50 0 0-110c0-20-1-37-1-52l43 0 3 23 1 0c6-11 22-26 50-26 33 0 57 22 57 69z"/>
</symbol>
<symbol id="icon-share" viewBox="0 0 512 512">
<path d="m512 256c0 141-115 256-256 256-141 0-256-115-256-256 0-141 115-256 256-256 141 0 256 115 256 256z m-220 26c-9 0-17 3-24 8l-40-26c1-5 1-11 0-16l40-26c7 5 15 8 24 8 20 0 37-17 37-38 0-21-17-38-37-38-21 0-38 17-38 38 0 3 0 6 1 8l-40 26c-7-5-15-8-24-8-21 0-37 17-37 38 0 21 16 38 37 38 9 0 17-3 24-8l40 26c-1 2-1 5-1 8 0 21 17 38 38 38 20 0 37-17 37-38 0-21-17-38-37-38z"/>
</symbol>
<symbol id="icon-twitter" viewBox="0 0 512 512">
<path d="m251 8c-137 0-248 111-248 248 0 137 111 248 248 248 137 0 247-111 247-248 0-137-110-248-247-248z m119 187c0 3 0 5 0 8 0 81-62 175-175 175-35 0-67-10-94-28 5 1 10 1 15 1 28 0 55-10 76-26-27-1-50-19-58-43 10 1 18 1 28-1-14-3-26-10-35-21-9-11-14-25-14-39l0-1c8 5 18 7 28 8-9-6-16-13-20-22-5-9-8-19-8-29 0-12 3-22 9-31 15 19 34 34 56 45 22 11 46 18 70 19-8-42 23-76 60-76 18 0 34 8 45 20 14-3 27-8 39-15-4 14-14 26-27 34 13-2 25-5 36-10-9 12-19 23-31 32z"/>
</symbol>
<symbol id="icon-close" viewBox="0 0 512 512">
<path d="m487 21c-29-28-75-28-104 0l-129 130-129-130c-29-28-75-28-104 0-28 29-28 75 0 104l130 129-130 129c-28 29-28 75 0 104 29 28 75 28 104 0l129-129 129 129c29 28 75 28 104 0 28-29 28-75 0-104l-129-129 129-129c28-29 28-75 0-104z"/>
</symbol>
<symbol id="icon-track" viewBox="0 0 512 512">
<path d="m489 269c-15-14-34-21-54-20l-8 0c2-2 3-3 5-5 13-13 21-31 21-50l0-32c0-19-8-37-21-50-13-14-32-21-51-21l0-1-310 0c-19 0-37 8-50 21-7 7-12 15-16 24-3 8-5 18-5 27l0 32c0 39 32 71 71 71l17 0c-2 1-3 3-5 4-14 13-22 32-23 51l0 28c1 42 35 74 77 73l226 0c3 0 5-1 6-2 2-2 3-4 3-6 0-5-4-8-9-8l-226 0c-32 1-59-24-61-56l0-29c2-30 28-55 59-55l300 0c32-1 59 24 60 55l0 30c-1 32-28 56-60 55l-18 0c-2 0-4 1-6 2-1 2-2 4-2 6 0 3 1 5 2 6 2 2 4 3 6 3l18 0c41 1 76-32 77-73l0-29c-1-19-9-38-23-51z m-418-20c-30-1-55-25-55-56l0-31c0-14 6-28 16-39 11-10 25-16 39-16l310 0 0 0c31 0 56 25 56 55l0 32c0 28-21 52-50 55-2 0-4 0-6 0z m316 0c-2 0-4 0-6 0l-254 0c3 0 7-1 10 0z m3 173c-2 0-5-1-6-3-1-1-1-2-2-3-1-2-1-4 0-6 1-2 3-4 5-4 2-1 4-1 6 0 1 0 2 1 3 1 0 1 1 2 1 3 1 2 1 4 0 6 0 1-1 2-1 3-1 1-2 2-3 2-1 0-2 1-3 1z m-102-233l-189 0c-2 0-5-1-6-3-2-2-3-4-3-6 0-2 1-5 3-6 1-2 4-3 6-3l189 0c2 0 4 1 6 3 1 1 2 4 2 6 0 2-1 4-2 6-2 2-4 3-6 3z m142 156l-284 0c-2 0-4-1-6-3-2-3-3-6-2-10 1-3 5-5 8-5l284 0c4 0 7 2 8 5 1 4 1 7-2 10-1 2-4 3-6 3z m-73-156l-39 0c-2 0-5-1-6-3-2-2-3-4-3-6 0-2 1-5 3-6 1-2 4-3 6-3l39 0c2 0 4 1 6 3 1 1 2 4 2 6 0 2-1 4-2 6-2 2-4 3-6 3z"/>
</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-back">
<use xlink:href="#icon-back"></use>
</svg>
<input type="text" readonly="readonly" value='<svg class="icon-back"><use xlink:href="#icon-back"></use></svg>'>
</li>
<li>
<svg class="icon-copy">
<use xlink:href="#icon-copy"></use>
</svg>
<input type="text" readonly="readonly" value='<svg class="icon-copy"><use xlink:href="#icon-copy"></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-profile">
<use xlink:href="#icon-profile"></use>
</svg>
<input type="text" readonly="readonly" value='<svg class="icon-profile"><use xlink:href="#icon-profile"></use></svg>'>
</li>
<li>
<svg class="icon-earth">
<use xlink:href="#icon-earth"></use>
</svg>
<input type="text" readonly="readonly" value='<svg class="icon-earth"><use xlink:href="#icon-earth"></use></svg>'>
</li>
<li>
<svg class="icon-list">
<use xlink:href="#icon-list"></use>
</svg>
<input type="text" readonly="readonly" value='<svg class="icon-list"><use xlink:href="#icon-list"></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-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-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-close">
<use xlink:href="#icon-close"></use>
</svg>
<input type="text" readonly="readonly" value='<svg class="icon-close"><use xlink:href="#icon-close"></use></svg>'>
</li>
<li>
<svg class="icon-track">
<use xlink:href="#icon-track"></use>
</svg>
<input type="text" readonly="readonly" value='<svg class="icon-track"><use xlink:href="#icon-track"></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>