Last active
November 19, 2018 05:54
-
-
Save kcak11/2cf4911d03f1d39206198a989b601d9a to your computer and use it in GitHub Desktop.
Icon Codes
When working with FontIcons or GlyphIcons, often it is difficult to get the icon code. This PEN has the script that facilitates extracting of icon code from a font family.
A Pen by K.C.Ashish Kumar on CodePen.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<h1>Fetch Icon Codes</h1> | |
<h3>Hover your mouse on the icon to see the code.</h3> | |
<div id="icons"></div> | |
<!-- | |
© 2018 https://kcak11.com / https://ashishkumarkc.com | |
--> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
© 2018 https://kcak11.com / https://ashishkumarkc.com | |
*/ | |
(function(rangeStart, rangeEnd) { | |
var markup = ""; | |
for (var i = rangeStart; i < rangeEnd; i++) { | |
if (i % 20 === 0 && i !== rangeStart) { | |
markup += "<br/>"; | |
} | |
markup += "<span icode=\"\\" + i.toString(16) + "\">&#" + i + ";</span>"; | |
} | |
document.getElementById("icons").innerHTML = markup; | |
}(58000, 60300)); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
© 2018 https://kcak11.com / https://ashishkumarkc.com | |
*/ | |
@import url("https://fonts.googleapis.com/icon?family=Material+Icons&css"); | |
body { | |
font-family: "Verdana"; | |
} | |
#icons span { | |
font-family: "Material Icons"; | |
font-size: 30px; | |
color: #f00; | |
margin: 10px; | |
display: inline-block; | |
width: 50px; | |
height: 50px; | |
cursor: default; | |
position: relative; | |
} | |
#icons span:hover:after { | |
content: attr(icode); | |
font-family: Verdana; | |
position: absolute; | |
bottom: -5px; | |
right: -5px; | |
background-color: #000; | |
color: #fff; | |
font-size: 11px; | |
padding: 5px; | |
border-radius: 11px; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment