vue-fontawesome-picker is a Font Awesome icon picker that enables the user to select Font Awesome icons from a searchable popup picker window and insert a CSS and/or Unicode class into the input field.

vue icon picker, font awesome icons, vuetify icon picker, font awesome icon picker, font awesome icon picker npm

How to make use of it:

Install and download:

# Yarn 
$ yarn add vfa-picker 

# NPM 
$ npm install vfa-picker --save

1. To get started, be sure to download the latest Font Awesome Iconic fonts.

<link rel="stylesheet" href="/path/to/fontawesome/all.css" />

2. Install and import Font Awesome Icon Picker.

import Vue from "vue";
import VueFontAwesomePicker from "vfa-picker";

3. Register the component.

Vue.use(VueFontAwesomePicker);

4. Use the component.

<template>
  <vfa-picker is-both="true" v-bind.sync="category">
    <template v-slot:activator="{ on }">
      <input v-model="category.class" @click="on" placeholder="Icon Class" type="text" />
      <input v-model="category.unicode" @click="on" placeholder="Icon Unicode" type="text" />
    </template>
  </vfa-picker>
</template>

<script>
export default {
    name: "BasicBothExample",
    data() {
      return {
          category: {
              class: undefined,
              unicode: undefined
          }
      }
    }
}
</script>

5. Props.

{
isUnicode: {
  type: [Boolean, String],
  required: false,
  default: false
},
isBoth: {
  type: [Boolean, String],
  required: false,
  default: false
},
itemsPerPage: {
  type: Number,
  required: false,
  default: 36
},
closeOnContainerClick: {
  type: Boolean,
  required: false,
  default: true
},
width: {
  type: String,
  default: "80%"
},
height: {
  type: String,
  default: "70%"
},
value: {
  type: String
},
only: {
  type: Array,
  default() {
    return ["solid", "regular", "brands"];
  }
},
searchable: {
  type: [Boolean, String],
  default: true
}

6. Trigger an event when the icon changes.

this.$emit("input", {
  class: icon.class,
  unicode: icon.unicode
});

font awesome icon picker, vue-fontawesome-picker Plugin/Github

See Demo And Download

Official Website(minabtech): Click Here

This superior jQuery/javascript plugin is developed by minabtech. For extra advanced usage, please go to the official website.