Your browser lacks required capabilities. Please upgrade it or switch to another to continue.
Loading…
''NOTE:'' This version REQUIRES the webfonts directory to be included with your project, along with the "all.css" file, in the same directory as the HTML. If you are hosting this and having problems with the font not working, the base64 version can be used as a workaround for that security problem. See the Stylesheet section for the main difference between this and the base64 version.
<<= setup.FAS_validNames.length>> FA solid icons + <<= setup.FAR_validNames.length>> FA regular icons + <<= setup.FAB_validNames.length>> FA brand icons = <<= setup.FAS_validNames.length + setup.FAR_validNames.length + setup.FAB_validNames.length>> total icons
You can click any of the icons to get a list of the class names for them in the UI bar to the left.
<<button "Show Valid Font Awesome Solid Icons">><<script>>
var el, siz = "32px", div = document.getElementById("allFASicons");
for (var i = 0; i < setup.FAS_validNames.length; i++) {
el = document.createElement("span");
el.id = "fas-fa-" + setup.FAS_validNames[i];
el.className = "fas fa-" + setup.FAS_validNames[i];
el.style.color = "white";
el.style.width = siz;
el.style.height = siz;
el.style.padding = "2px";
el.style["line-height"] = siz;
el.style["font-size"] = "24px";
el.style["text-align"] = "center";
el.title = "fa-" + setup.FAS_validNames[i];
div.appendChild(el);
}
$(".fas").on("mouseup", showFontID);
<</script>><</button>>
<div id="allFASicons"></div>
<<button "Show Valid Font Awesome Regular Icons">><<script>>
var el, siz = "32px", div = document.getElementById("allFARicons");
for (var i = 0; i < setup.FAR_validNames.length; i++) {
el = document.createElement("span");
el.id = "far-fa-" + setup.FAR_validNames[i];
el.className = "far fa-" + setup.FAR_validNames[i];
el.style.color = "white";
el.style.width = siz;
el.style.height = siz;
el.style.padding = "2px";
el.style["line-height"] = siz;
el.style["font-size"] = "24px";
el.style["text-align"] = "center";
el.title = "fa-" + setup.FAR_validNames[i];
div.appendChild(el);
}
$(".far").on("mouseup", showFontID);
<</script>><</button>>
<div id="allFARicons"></div>
<<button "Show Valid Font Awesome Brand Icons">><<script>>
var el, siz = "32px", div = document.getElementById("allFABicons");
for (var i = 0; i < setup.FAB_validNames.length; i++) {
el = document.createElement("span");
el.id = "fab-fa-" + setup.FAB_validNames[i];
el.className = "fab fa-" + setup.FAB_validNames[i];
el.style.color = "white";
el.style.width = siz;
el.style.height = siz;
el.style.padding = "2px";
el.style["line-height"] = siz;
el.style["font-size"] = "24px";
el.style["text-align"] = "center";
el.title = "fa-" + setup.FAB_validNames[i];
div.appendChild(el);
}
$(".fab").on("mouseup", showFontID);
<</script>><</button>>
<div id="allFABicons"></div>
Clicked: [<span id="faName"></span>]