I need list of all class name of Font-Awesome

Question

I build app that will present a lot of icons so I need list of all Font-Awesome class name like [\"fa-dropbox\",\"fa-rocket\",\"fa-globe\", ....] so on is ther

Answer 1

Here is a snippet that works based on the loaded css. It assumes you have loaded the stylesheet with a name of font-awesome.css among other things but you could tweak this for your use. Theoretically, this will continue to work as future versions of font-awesome are released and new icons are added. That of course assume he keeps the css consistent over time.

var icons = $.map($.map(document.styleSheets, function(s) { 
    if(s.href && s.href.endsWith('font-awesome.css')) 
        return s; 
    return null; 
})[0].rules, function(r) { 
    if(r.cssText.indexOf('::before { content: ') > 0) 
        return r.cssText.substring(4,r.cssText.indexOf('::')); 
    return null; });

Answer 2

Here's the list of all Fontawesome Icons":

Fontawesome Gallery

Here's another list of all font awesome icons

Code Sample: <i class="fa fa-rocket" width="50px" height="50px"></i>

Answer 3

try this

<script type="text/javascript">
function getStyle() {
var index = 0; //index of stylesheet declare in head tage
var classesList = document.styleSheets[index].rules || document.styleSheets[index].cssRules
for (var x = 0; x < classesList.length; x++) 
{
if (classesList[x].cssText.match(/fa-/g) && classesList[x].cssText.match(/::/g)) 
{
var cc = classesList[x].cssText.split(' ')[0].split('::')[0];
console.log(cc);
}
}
};
getStyle();
</script>

Answer 4

For future updates, copy paste the complete list from the cheatsheet (http://fortawesome.github.io/Font-Awesome/cheatsheet/) into an editor (notepad++ in my case). And do the following regular expression find & replace actions :

remove the special character at the begin and the characters between block quotes []

find: ^.*(fa-[^\s]*).*
replace: \1

and if you want to wrap everything in an array:

find: ^.*(fa-[^\s]*).*
replace: "\1",

you only need to start the string with "[" and end it with "]" to make the array complete

Answer 5

This one is more like floribon's answer but in vanilla JS.

Head over to Font Awesome Cheatsheet, fire up the console and write.

var q=document.querySelectorAll('.row .col-md-4')
var names = []
for (var i=0;i<q.length;i++){
try{
names.push(q[i].innerHTML.match(/\s\sfa-.*\n/).toString().trim())
}
catch(e){}
}
names=names.filter(name => name.length)
console.log(names)

PS: This is subject to change when there's a change in DOM structure of the cheatsheet (unlikely) but you get the idea.

PPS: If the output is too large you can create a function to append a textarea at the bottom of the page so that you can easily copy.

append = function(names){
ns = names.join('\n')
txtarea=document.createElement("textarea")
txtarea.innerHTML=ns
document.body.appendChild(txtarea)
}

and replace the last line in the first code with

append(names)

Answer 6

In latest font awesome 5.9 version we have around 1534 free icons, Divided into 3 categories

1. Solid icons
2. Regular icons
3. Brand icons

To use solid icons we need to add an additional class "fas" apart from Icon name

<i class="fas fa-address-book"></i>

Similarly to use Regular icons use "far" class name

<i class="far fa-address-book"></i>

To use brand icons use "fab"

<i class="fab fa-adobe"></i>

If you don't want to use default icon names by font awesome. You can use CSS content values to display icons as shown below

  .login::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f007";
}
<span class="icons login"></span> Login

I have listed down complete 1534 free icons along with their CSS content values in this article

1534 font awesome icons list,usage,css content values cheatsheet