Skip to content
Vanilla JS Font Awesome icon selector widget
JavaScript CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets adding interactive config for demo May 5, 2019
cdn better structure Mar 5, 2019
demo adding interactive config for demo May 5, 2019
LICENSE Initial commit Feb 27, 2019 Update Mar 5, 2019

WARNING: Do not use on a production site. Wait for a stable release.


Vanilla JS Font Awesome icon selector widget with zero dependancies, easy installation & cross browser support.

Check out the live demo here


  1. First, make sure you have FontAwesome installed. I recommend using the latest version of FontAwesome in order to ensure all icons show up properly.

  2. Clone or download this repository.

  3. Link to the FASelector CSS at the top of your HTML file.
    <link rel="stylesheet" type="text/css" href="">

  4. Link to the FASelector JS just before the closing body tag in your HTML file.
    <script src=""></script>

  5. You will now be able to add your FASelectorWidget anywhere in your HTML file by using the onclick and ID attributes. (Note, the widget element must be nestable. A, SPAN, DIV etc.. work for all browsers, some elements like BUTTON, don't work in firefox.)
    onclick="openFaSelector(this,event)" id="fa-selector"

Example Element:
<span onclick="openFaSelector(this,event)" id="fa-selector">My Button</span>

Change Selector Theme

You can change the selector theme by adding the "data-theme" tag.

Supported Browsers (Latest)

  • Google Chrome
  • Mozilla Firefox
  • Opera
  • Microsoft Edge
  • Internet Explorer
  • Safari
You can’t perform that action at this time.