Skip to content

Instantly share code, notes, and snippets.

@w3core

w3core/index.html

Created February 13, 2017 14:28
Show Gist options
  • Save w3core/4ef7b49979a6054af3747b4aa6c9a69f to your computer and use it in GitHub Desktop.
Save w3core/4ef7b49979a6054af3747b4aa6c9a69f to your computer and use it in GitHub Desktop.
Download ZIP
Generates more useful CSS selectors from SVG file that was built by http://icomoon.io/ service.
Raw
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta content="application/xhtml+xml; charset=utf-8" http-equiv="content-type" />
<title></title>
<style type="text/css">
html, body {margin:0; padding:0; height:100%}
*, :before, :after {vertical-align:middle; height:50px; line-height:50px!important;}
:before, :after {font-size:32px; position:absolute; width:50px; text-align:center;}
:before {left:0px;}
:after {right:0px;}
pre {
display: block;
height: 150px;
overflow: auto;
line-height: 1.5em!important;
margin: 0;
background-color: #eee;
border-bottom: 1px solid #ddd;
resize: vertical;
}
i {
cursor:pointer;
display:inline-block;
position:relative;
box-sizing:border-box;
width:50%;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
font-style:normal;
border-bottom:1px solid #ddd;
color:#333;
}
i:hover {background:#eee;}
i:hover:before, i:hover:after {color:#31a0e7}
i:nth-child(odd) {padding-left:50px; padding-right:10px;}
i:nth-child(even) {padding-right:50px; padding-left:10px;}
i:nth-child(odd) {border-right:1px solid #ddd}
</style>
</head>
<body>
<script type="text/javascript">
var path = location.search.substr(1) || location.pathname;
var $name = path.replace(/[\/]+$/, "").split("/").pop();
var $filepath = (path || "") + $name;
function load (file) {
var x = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
x.open("GET",file,false);
x.send();
return x.responseText;
}
var id = (new Date()).getTime().toString();
var svg = document.createElement("html");
svg.innerHTML = load($filepath+".svg").replace(/(\&\#x)/ig, "");
svg = svg.querySelectorAll("[glyph-name]");
var html = "";
var css = "";
css += "\
@font-face {\n\
font-family: '"+$name+"';\n\
src:url('"+$filepath+".eot?"+id+"');\n\
src:url('"+$filepath+".eot?#iefix"+id+"') format('embedded-opentype'),\n\
url('"+$filepath+".ttf?"+id+"') format('truetype'),\n\
url('"+$filepath+".woff?"+id+"') format('woff'),\n\
url('"+$filepath+".svg?"+id+"#ico') format('svg');\n\
font-weight: normal;\n\
font-style: normal;\n\
}\n\
."+$name+":before, ."+$name+"-after:after {\n\
font-family: '"+$name+"';\n\
speak: none;\n\
font-style: normal;\n\
font-weight: normal;\n\
font-variant: normal;\n\
text-transform: none;\n\
line-height: 1;\n\
-webkit-font-smoothing: antialiased;\n\
-moz-osx-font-smoothing: grayscale;\n\
}";
for (var i=0; i<svg.length; i++) {
var name = svg[i].getAttribute('glyph-name');
var code = svg[i].getAttribute('unicode').replace(';', '');
css += '\n.'+$name+'-'+name+':before,.'+$name+'-'+name+'-after:after{content:"\\'+ code +'"}';
html += '<i class="'+$name+' '+$name+'-'+name+'">'+$name+' '+$name+'-'+name+'</i><i class="'+$name+'-after '+$name+'-'+name+'-after">'+$name+'-after '+$name+'-'+name+'-after</i>';
}
html = '<style type="text/css">'+css+'</style>'
+ '<pre>'+css+'</pre>'
+ html;
document.body.innerHTML = html;
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment