Font Awesome 5 Picker In Pure JavaScript – FontAwesome-Selector

Preview:

Description:

A simple, themeable Font Awesome selector that enables the visitor to quickly pick a Font Awesome 5 icon from the popup.

Supports Solid, Regular, and Brands icon types.

How to use it:

Load the latest Font Awesome iconic font in the html file.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

Load the FontAwesome-Selector’s JavaScript and CSS files.

<link rel="stylesheet" href="/path/to/faSelectorStyle.min.css">
<script src="/path/to/faSelectorWidget.min.js"></script>

Add the fa-selector ID to the trigger element.

<span id="fa-selector">Icon Picker</span>

Make the trigger element to open the Font Awesome picker when clicked.

<span onclick="openFaSelector(this,event)" id="fa-selector">Icon Picker</span>

Change the theme (defaults to Classic) to Modern.

<span onclick="openFaSelector(this,event)" id="fa-selector" data-theme="modern">Icon Picker</span>