Icon Codes

App.md

Fetch Glyph Icon Codes

icon-codes.markdown

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.

License.

index.html

<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
-->

script.js

/*
© 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));

style.css

/*
© 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;
}