Your browser lacks required capabilities. Please upgrade it or switch to another to continue.
Loading…
''NOTE:'' This base64 version does NOT require the webfonts directory to be included, it only needs the "all-b64.css" in the same directory as the HTML. However, the "all-b64.css" file only has the WOFF font format built in. See the Stylesheet section for the main difference between this and the non-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>]