Display all awesome font icons on my website?

If I understand you want to create something to display all available without having to go to the documentation, would that be it?

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

Note that filtering must keep all rules prefixed with fa- and suffixed with :before , 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 did not add CDN because CORS prevents access to cssRules of different domains, so this script will only work if you download the font-awesome and put it on your site.

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