Generate Bootsrap Icon List from CSS String

by David Joseph Guzsik

HTML

<div id="iconContainer"></div>

CSS

i[class^="icon"] {
    background-image: url("http://i.imgur.com/QpJM8Lo.png");
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-position: right bottom;
    display: inline-block;
}
.apple:before {
	color: blue;
    content: 'icon-apple';
}
.icon-apple {
	background-position: 32px 32px;
}

JavaScript

var css = ".apple:before {\n\tcolor: blue;\n\tcontent: 'icon-apple';\n}\n.icon-apple {\n\tbackground-position: 32px 32px;\n}";
/*
.apple:before {
	color: blue;
    content: 'icon-apple';
}
.icon-apple {
	background-position: 32px 32px;
}
*/

function getIcons(cssStr){
    var matches = cssStr.match(/\.icon\-\w*.*\{/g), icons = [];
    for (var i=0,l=matches.length; i<l; i++) icons.push(matches[i].replace(/\.icon\-/g,'').replace(/\W/g,''));
    return icons;
}

var icons = getIcons(css);

    for (var i=0,l=icons.length; i<l; i++){
        var el = document.createElement('i');
        el.className = 'icon-'+icons[i];
        document.getElementById("iconContainer").appendChild(el);
    }