IconPicker

Display an input as an Icon Picker to ease the user icon selection.

Colors No
Sizes No
Javascript Yes
Variables No

Click on icon to open the iconPicker.

<input type="text" id="iconPicker" data-action="iconPicker" value="fa fa-icon fa-star" />
<p class="help">Click on icon to open the iconPicker.</p>

You don't have to write any JavaScript code. Just add data-action="iconPicker" attribute to the input element and see the magic happens.


Javascript

The extension comes with a JavaScript implementation to display / close the IconPicker. Don't forget to include it in your project.

<script type="text/javascript" src="/node_modules/bulma-extensions/bulma-iconpicker/dist/bulma-iconpicker.min.js"></script>

you can customize icon sets by overwriting iconPickerOptions variable like following:

let iconPickerOptions = {
iconSets: [ {
name: 'simpleLine', // Name displayed on tab
css: 'https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css', // CSS url containing icons rules
prefix: 'icon-', // CSS rules prefix to identify icons
displayPrefix: ''
},
{
name: 'fontAwesome', // Name displayed on tab
css: 'https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css', // CSS url containing icons rules
prefix: 'fa-', // CSS rules prefix to identify icons
displayPrefix: 'fa fa-icon'
} ]
};