Bootstrap-Iconpicker Issue #25

Get Character instead of CSS Class

by Victor Valencia

HTML

<head>
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
  <button><i class="fa fa-glass"></i> fa-glass</button>
  <button><i class="fa fa-music"></i> fa-music</button>
  <button><i class="fa fa-search"></i> fa-search</button>

  <div id="log"></div>
</body>

CSS

#log {  
  width: 100%;
}

JavaScript

$(function(){
  /**
    * Gets styles by a classname
    * 
    * @notice The className must be 1:1 the same as in the CSS
    * @param string className_
    */
  function getStyle(className_) {

    var styleSheets = window.document.styleSheets;
    var styleSheetsLength = styleSheets.length;
    for(var i = 0; i < styleSheetsLength; i++){
      var classes = styleSheets[i].rules || styleSheets[i].cssRules;
      if (!classes)
        continue;
      var classesLength = classes.length;
      for (var x = 0; x < classesLength; x++) {
        if (classes[x].selectorText == className_) {
          var ret;
          if(classes[x].cssText){
            ret = classes[x].cssText;
          } else {
            ret = classes[x].style.cssText;
          }
          if(ret.indexOf(classes[x].selectorText) == -1){
            ret = classes[x].selectorText + "{" + ret + "}";
          }
          return ret;
        }
      }
    }

  }

  /**
    * Gets css content
    * 
    * @notice The className must be 1:1 the same as in the CSS
    * @param string className_
    */
  function getCssContent(className_) {
      return getStyle(className_).split('"')[1].charCodeAt(0).toString(16);
  }

  var log = $("#log");
  log.append("<p>.fa-glass => " + getCssContent('.fa-glass::before') + "</p>");
  log.append("<p>.fa-music => " + getCssContent('.fa-music::before') + "</p>");
  log.append("<p>.fa-search => " + getCssContent('.fa-search::before') + "</p>");

});