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:
<div class=”form-control”>
<input type=”text” name=”” class=”form-control social-icon”>
</div>
<input type=”submit” class=”btn btn-primary” name=”” value=”submit”>
</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.
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.
Hi samir,
great work!
Is it possible to fire up the icon picker when clicked in an icon and then change it?
thanks!
I was curious if you ever considered changing the layout of your website?
Its very well written; I love what youve got to say.
But maybe you could a little more in the way of content
so people could connect with it better. Youve got an awful lot of text for only having one
or two pictures. Maybe you could space it out better?