IconIx

FontAwesome - Icon picker plugin.

For use the plugin you need use FontAwesomeIconSet

All FontAwesomeIconSet vesions equal to FontAwesome versions.

Web Page Demo

Quick start

HTML

  <!-- Picker button -->
  <button id="picker">Picker</button>

  <!-- Picker preview -->
  <div id="preview">Preview</div>

  <!-- Picker output -->
  <input id="output">Output</input>

CSS

<!-- Include FontAwesome 5.15.3 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.css" />

<!-- Include css -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/iconix.min.css" />

JS

<!-- Include iconset js -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/iconset.min.js"></script>

<!-- Include  js -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/iconix.min.js"></script>

Init

/** Init IconIx */
new IconIx({
  picker: "#picker",
  output: "#output",
  preview: "#preview",
});

/** Init IconIx with full options */

let option = {
  title: false,
  picker: "#your-picker",
  output: "#your-output",
  preview: "#your-preview",

  page_size: 50,

  searchPlaceholder: "Search icon 🔎🔎",
  paginatorNextButton: "next",
  paginatorPrevButton: "prev",

  header: true,
  paginate: true,
  searchable: true,
  hideOnSelect: true,

  iconSize: "45px",
  iconMargin: "5px",
  iconPadding: "5px",
  iconFontSize: "30px",
};

new IconIx(option);

Quick start if you use Node.js

npm

  npm i icon-ix font-awesome-iconset

import

/** Import IconIx */
import IconIx from "icon-ix";
/** Import IconSet */
import ICON_SET from "font-awesome-iconset";

IconIx.ICONS = ICON_SET;

new IconIx({
  picker: "#your-picker",
  output: "#your-output",
  preview: "#your-preview",
});