Documentation

Everything you need to start with Bulma-extensions.

IconPicker

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

View on Github
NPM Package 2.1.0
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 the data-action="iconPicker" attribute to the input element and see the magic happen.

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>

Customize icon sets by overwriting the iconPickerOptions variable as in the 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'
  } ]
};