Font Awesome Icon Picker in Bootstrap

July 30, 2018 By Samir Jana

Font Awesome Icon Picker

Create a font awesome icon picker easily using font awesome plugin in bootstrap. If you are using bootstrap and you have something knowledge of JS then you can do it quickly in your web page. I have done it using fontawesome-iconpicker.min.css and fontawesome-iconpicker.js lick in my local sever(xampp).

fontawesome-iconpicker.js is a simple plugin which allows the user to select Font Awesome icons from a filterable dropdown popup, Where you can search any Font Awesome icons and choose anyone that icon class show in your input box. When an icon is selected, the plugin will automatically fill the input field with the corresponding icon class. If you wish, you can store those icon class into the database and show anywhere on your page to fetch icon class from the database.

Create a form

First, create a simple bootstrap form, you can create only an input box to check it. I have created a form you can create the same form on your web page. You try it in your local server(xampp, wamp). Form example code:

<form>

</div>

</form>

CSS file

Use fontawesome-iconpicker.min.css link to display Font Awesome icons in a filterable dropdown popup. I have use bootstrap.min.css and all.css CDN link these link help to display icons properly and you have knowledge of bootstrap, so I will not say anything more about bootstrap. Apply these CSS link, I will provide you a link to download these CSS and JS link with demo code.

JS file

As well as you have to use jquery.min.js with bootstrap.min.js and fontawesome-iconpicker.js. Because you need to initialize the jQuery code to display icon filterable dropdown popup on an input box. Add below JS link and jQuery code on your web page.

$('.social-icon').iconpicker();

// here social-icon is the input class name, you can change the class name, give same class name which class name have in your input box.

</script>

Click here to download the full code and see the demo

The Font Awesome Icon Picker is a fully customizable plugin for Twitter Bootstrap, with a powerful base. I hope this tutorial will more helpful for you.

Conclusion:

In this post , I have shown you the fontawesome icon picker integration. You can easily integrate on your application. If you like this post, please share it on social media.

Post Views: 986

About the author

Samir Jana

My work is usually in PHP Framework, earlier I had worked on Codeigniter framework, Laravel framework, WordPress development, PHP API, and Ionic app. Now I'm learning NodeJS. I love learning new things and update myself with the latest technologies.