cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
                  <!-- Content -->
    <div class="container-fluid content">
    
      <header>
        <h1>A Simple Icon Explorer</h1>
         <p>A simple method of extracting icons from iconic fonts like fontawesome<br/>We are simply reading the font's CSS file then using a regex expression to find the icon classes. For a full explanation read this <a href="http://arnique.net/web-design/73/a-cool-use-of-regex-extracting-and-displaying-icon-fonts-like-font-awesome/">article</a></p>
      </header>
    
    
      <!-- Row -->
      <div class="row gutter-10">
        <!-- Col -->
        <div class="col-sm-2">
          <input class="form-control input-class" type="text" placeholder="icon class"></input>
        </div>
        <!-- /Col -->
        
        <!-- Col -->
        <div class="col-sm-8">
          <div class="input-group">
            <input type="text" class="form-control input-path" placeholder="enter the font CSS url or path">
            <div class="input-group-btn">
              <a class="btn btn-primary dropdown-toggle btn-path" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Examples <span class="caret"></span></a>
              <ul class="dropdown-menu dropdown-menu-right dd-path">
                <li data-class="fa" data-path="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css"><a href="#">Font Awesome</a></li>
                <li data-class="zmdi" data-path="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.1.1/css/material-design-iconic-font.css"><a href="#">Material Design</a></li>
                <li data-class="" data-path="https://cdnjs.cloudflare.com/ajax/libs/ionicons/1.5.2/css/ionicons.css"><a href="#">ion Icons</a></li>
                <li data-class="cc" data-path="https://cdnjs.cloudflare.com/ajax/libs/cc-icons/1.2.1/css/cc-icons.min.css"><a href="#">Creative Commons</a></li>
                <li data-class="wi" data-path="https://cdnjs.cloudflare.com/ajax/libs/weather-icons/1.3.2/css/weather-icons.css"><a href="#">Weather Icons</a></li>
                <li data-class="devicons" data-path="https://cdnjs.cloudflare.com/ajax/libs/devicons/1.8.0/css/devicons.min.css"><a href="#">Devicons</a></li>
                <li data-class="" data-path="https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.css"><a href="#">Foundation</a></li>
                <li data-class="octicon" data-path="https://cdnjs.cloudflare.com/ajax/libs/octicons/2.4.1/octicons.min.css"><a href="#">Octicons</a></li>
              </ul>
            </div>
          </div>
        </div>
        <!-- /Col -->
        
        <!-- Col -->
        <div class="col-sm-2">
          <a href="#" class="btn btn-danger btn-block btn-load">load</a>        
        </div>
        <!-- /Col -->
      </div>
      <!-- /Row -->
          
      <div class="alert alert-info">
        <ul class="msg-list">
        </ul>
      </div>
      
      <div class="loader"></div>
          
      <ul class="icon-list row gutter-10"></ul>
      
    </div>
    <!-- /Content -->
  
    <footer>
      &copy; 2015. More web design wisdom at <a href="http://arnique.net">Arnique.net</a>
    </footer>
            
          
!
            
              body {
  font: 15px  "Roboto Condensed", Arial, sans-serif;
  line-height: 1.7em;
  color: #737376; 
  background: #fff;
  border-top: 5px solid #24262C;
}

a {
  color: blue;
  text-decoration: none;
}

header {
  text-align: center; 
  margin: 80px 0 30px 0;
}
header p {
  font-weight: 300;
  font-size:16px;
  max-width:600px;
  margin:0 auto;
}

footer {
  text-align:center;
  margin:60px auto 0 auto;
  padding:20px 0;
  border-top: 1px solid #ddd;
}

.btn,.input-group .form-control,.dropdown-menu,.alert,.form-control {
	border-radius: 0;
	box-shadow: none;
	text-shadow: none;
}

.gutter-10.row {
  margin-right: -5px;
  margin-left: -5px;
}

.gutter-10 > [class^="col-"], .gutter-10 > [class^=" col-"] {
  padding-right: 5px;
  padding-left: 5px;
}

.content {
  max-width:800px;
}

.loader {
  width: 100%;
  height:100px;
  background:#fff url(../images/loader.gif) center center no-repeat;
  text-align:center;
  display:none;
}

.loader img {
  display: inline-block;
  width:32px;
  height:32px;
  margin-top:60px;
}

.icon-list {
  list-style:none;
  margin:30px 0;
  padding:0;
}

.icon-list li {
  margin-bottom:10px;
  display: block;
}
.icon-list div {
  position: relative;
  text-align: center;
  box-sizing: border-box;
  background: #eee; 
  height: 100px;
  overflow:hidden;
  cursor: pointer;
}

.icon-list  i {
  display:block;
  width:100%;
  height:100%;
  line-height: 100px;
  font-size: 40px;
  color: #24262C;
}

.icon-list  span {
  display:block;
  background: rgba(0,0,0,0.4);
  color: #fff;
  padding:7px 0;
  line-height:16px;
  width:100%;
  position: absolute;
  top:100%;
  height: 100%;
  left:0;
  transition: all 0.5s;
}

.icon-list li:hover  span {
  top:0;
}

.alert {
  margin:15px 0;
}

.form-control, .btn {
  border:1px solid transparent;
  padding:10px 15px;
  height:42px;
  margin:5px 0;
}
.form-control {
  background: #efefef;
}

.input-class {
  color: #286090;
  font-weight:bold;
}


            
          
!
            
                    // Declare our variables
      var $iconList, $loader, $loadBtn, $classInput, $pathInput, $ddPath, $alert;
      var regex = /\.([\w-]+):before\s*{\s*content:\s*(["']\\\w+["']);*\s*}/gm;

      // Message functions
      function showMsg(msg, type) {
        $alert.removeClass("alert-info alert-success alert-danger").addClass(type)
        $alert.find(".msg-list").append("<li>" + msg + "</li>");
      }

      function clearMsgs() {
        $alert.find(".msg-list").html("");
      }

      // Icon loader
      function loadIcons(path) {
        clearMsgs();
        showMsg("loading file...", "alert-info");
        $iconList.html("");
        $loader.fadeIn();
        loadSheet(path);

        $.ajax({
          crossOrigin: true,
          url: path,
          dataType: "text",
          success: function(data) {
            parseCss(data);
          },
          error: function(err) {
            $loader.fadeOut();
            showMsg("<b>ERROR:</b> Could not load the file! Check your path.", "alert-danger");
          }
        });
      }

      // CSS parser
      function parseCss(text) {
        showMsg("Looking for icons... ", "alert-success");
        var listMarkup = "";
        var match;
        var className = $inputClass.val();
        var n = 0;

        if (text) {
          while (match = regex.exec(text)) {
            n++;
            var name = match[1];
            var code = match[2]; // incase you need this
            listMarkup += "<li class='col-xs-4 col-sm-2' title='" + name + "'><div><i class='" + className + " " + name + "'></i><span>" + name + "</span></div></li>";
          }
          $loader.fadeOut();

          if (n > 0) {
            showMsg("<b>" + n + "</b> icons were extracted! Cant see them? Enter the correct class name then reload", "alert-success");
            $iconList.html(listMarkup);
          } else {
            showMsg("<b>No</b> icons were found! Make sure you are loading the correct CSS file.", "alert-danger");
          }
        }
      }

      // Stylesheet loader
      function loadSheet(path) {
        var similar = 0;
        $("link").each(function(e) {
          if ($(this).attr("href") == path) similar++;
        });

        if (similar == 0) {
          $('<link>').attr('rel', 'stylesheet')
            .attr('type', 'text/css')
            .attr('href', path)
            .appendTo('head');
        }
      }

      // Hookup everything when dom is ready
      $().ready(function() {
        // Set our variables
        $iconList = $(".icon-list");
        $loader = $(".loader");
        $btnLoad = $(".btn-load");
        $btnPath = $(".btn-path");
        $inputClass = $(".input-class");
        $inputPath = $(".input-path");
        $ddPath = $(".dd-path");
        $alert = $(".alert");

        // Initial message
        showMsg("Waiting for user...", "alert-info");

        // Handle path drop down selection 
        $ddPath.on("click", "li", function(e) {
          e.preventDefault();
          $inputClass.val($(this).data("class"));
          $inputPath.val($(this).data("path"));
          loadIcons($(this).data("path"));
        });

        // Handle load button click
        $btnLoad.click(function(e) {
          e.preventDefault();
          var path = $inputPath.val();
          if (path) loadIcons(path);
        });

      });
            
          
!
999px
Loading ..................

Console