Display all the awesome font icons on my website?

Question

I wish I could use all the icons from font-awesome 4.7 in my website without having to write the code of each icon.

I’m not talking about iframe because I want to use Jquery events in them.

Answer 1

If I understood you want to create something to display all available without having to access the documentation, this would be it?

You can use the document.styleSheets and then the cssRules to capture all added files in the document and filter to display only those of the font-awesome

Note that filtering has to keep all prefixed Rules fa- and suffixed :before, so for example:

var removeUnused = /^\.|\:{1,}before/g;
var isFont = /\.fa-.*?:before/;

var sheet, rules, fontawesome = [];

for (var i = 0, style = document.styleSheets, j = style.length; i < j; i++) {
    sheet = style[i];
    
    if (!sheet) continue;
    
    rules = sheet.cssRules;
    
    if (!rules) continue;
    
    for (var x = 0, y = rules.length; x < y; x++) {
         if (!isFont.test(rules[x].selectorText)) continue;
         
         fontawesome.push(rules[x].selectorText.replace(removeUnused, ""));
    }
}

console.log(fontawesome);

<style>
.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}.fa-glass:before{content:"\f000"}.fa-music:before{content:"\f001"}.fa-search:before{content:"\f002"}.fa-envelope-o:before{content:"\f003"}.fa-heart:before{content:"\f004"}.fa-star:before{content:"\f005"}.fa-star-o:before{content:"\f006"}.fa-user:before{content:"\f007"}.fa-film:before{content:"\f008"}.fa-th-large:before{content:"\f009"}
</style>

I didn’t add the CDN because CORS prevents access to cssRules from different domains, then this script will only work if you download the font-awesome and put on your website.

This way you will have all class, so with them you can create the elements as you wish, for example:

<script>
var removeUnused = /^\.|\:{1,}before/g;
var isFont = /\.fa-.*?:before/;

var sheet, rules, fontawesome = [];

for (var i = 0, style = document.styleSheets, j = style.length; i < j; i++) {
    sheet = style[i];

    if (!sheet) continue;

    rules = sheet.cssRules;

    if (!rules) continue;

    for (var x = 0, y = rules.length; x < y; x++) {
         if (!isFont.test(rules[x].selectorText)) continue;

         fontawesome.push(rules[x].selectorText.replace(removeUnused, ""));
    }
}

var icones = document.querySelector("#icones"),
    resultado = [];

for (var i = 0, j = fontawesome.length; i < j; i++) {
     resultado.push('<i class="' + fontawesome[i] + '"></i>');
}

icones.innerHTML = resultado.join(", "); //Virgula é para separar os icones
</script>