dataflow1117@gmail.com
FacebookTwitter

en English
af Afrikaanssq Albanianam Amharicar Arabichy Armenianaz Azerbaijanieu Basquebe Belarusianbn Bengalibs Bosnianbg Bulgarianca Catalanceb Cebuanony Chichewazh-CN Chinese (Simplified)zh-TW Chinese (Traditional)co Corsicanhr Croatiancs Czechda Danishnl Dutchen Englisheo Esperantoet Estoniantl Filipinofi Finnishfr Frenchfy Frisiangl Galicianka Georgiande Germanel Greekgu Gujaratiht Haitian Creoleha Hausahaw Hawaiianiw Hebrewhi Hindihmn Hmonghu Hungarianis Icelandicig Igboid Indonesianga Irishit Italianja Japanesejw Javanesekn Kannadakk Kazakhkm Khmerko Koreanku Kurdish (Kurmanji)ky Kyrgyzlo Laola Latinlv Latvianlt Lithuanianlb Luxembourgishmk Macedonianmg Malagasyms Malayml Malayalammt Maltesemi Maorimr Marathimn Mongolianmy Myanmar (Burmese)ne Nepalino Norwegianps Pashtofa Persianpl Polishpt Portuguesepa Punjabiro Romanianru Russiansm Samoangd Scottish Gaelicsr Serbianst Sesothosn Shonasd Sindhisi Sinhalask Slovaksl Slovenianso Somalies Spanishsu Sudanesesw Swahilisv Swedishtg Tajikta Tamilte Teluguth Thaitr Turkishuk Ukrainianur Urduuz Uzbekvi Vietnamesecy Welshxh Xhosayi Yiddishyo Yorubazu Zulu

DataInFlow
DataInFlow
A Market place of programming
  • Home
  • Tutorial
    • HTML Tutorial
    • PHP TUTORIAL
  • Article
    • Technology
    • Entertainment and News
    • Game
    • Recipes
  • Queries
  • Programming
    • HTML
    • CSS
    • jQuery
    • JavaScript
    • WordPress
    • PHP
    • Codeigniter
    • Laravel
    • Ionic
    • Angular JS
    • Node JS
    • Vue JS
    • Android
    • ASP .NET
  • Sports
    • Cricket
    • Football
    • Football Live Score
  • Web Tools
  • Home
  • Tutorial
    • HTML Tutorial
    • PHP TUTORIAL
  • Programming
  • Queries
  • Sports
    • Cricket
    • Football
    • Football Live Score
  • Article
    • Entertainment and News
    • Technology
    • Recipes
    • Game
  • Web Tools
  • About Us
  • Contact

Font Awesome Icon Picker in Bootstrap

July 30, 2018By 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:

1
2
3
4
5
6
<form>
    <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.

1
2
3
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">
<link href="css/fontawesome-iconpicker.min.css" rel="stylesheet">

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.

1
2
3
4
5
6
7
<script src="//code.jquery.com/jquery-2.2.1.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="js/fontawesome-iconpicker.js"></script>
<script type="text/javascript">
    $('.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: 1,486
Share this post
FacebookTwitterLinkedIn
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.

Related posts
Load more results functionality with jQuery , Ajax and PHP
January 14, 2019
facebook twitter share
Add facebook & twitter share link in your website
May 6, 2018
Simple image cropping with cropper js
April 29, 2018
HTML 5 audio player with playlist using jquery
April 28, 2018
Image Animation Using CSS and HTML
March 21, 2018
jquery mouse event
Jquery mouse event and example
March 19, 2018
Leave Comment

Cancel reply

Your email address will not be published. Required fields are marked *

clear formSubmit

Subscribe to our Newsletter
Search anything
Questions
What is the best editor/IDE for php? 5 Answers | 0 Votes
how to search similar names given by 2 or 3 words ? 11 Answers | 0 Votes
How is the answer coming 1 Answer | 0 Votes
How to set a session variable in laravel 5.2 3 Answers | 0 Votes
How to change input placeholder name using jquery? 2 Answers | 0 Votes
Recent Programming Article
  • Menu hide from sidebar in ionic 3
    May 29, 2019
  • Generate bootstrap modal in angular 6
    May 28, 2019
  • Load more results functionality with jQuery , Ajax and PHP
    January 14, 2019
  • Facebook login with JavaScript SDK
    September 1, 2018
  • Facebook login in Codeigniter and MySQL
    June 28, 2018
Hire us

Hi
Do you want to make web application with php and php framework(CI, Laravel)? Want to make android application with hybrid framework ? Then contact with us. We provide support for developing website and web application at very affordable price.
E-Mail us at: dataflow1117@gmail.com

Recent Technlogy News
  • Astrology Software: Perfect Tool for Astrologers to Earn Money Online
    November 7, 2019
  • Actionable Steps to Secure Workplace for Dummies
    October 14, 2019
  • The Best Spy Glasses in 2019 You Can Buy now
    September 5, 2019
© Copyright 2017-2018 DataInFlow

About Us    Privacy policy    Contact us

Login

Lost your password?

Reset Password

Log in

Insert/edit link

Enter the destination URL

Or link to existing content

    No search term specified. Showing recent items. Search or use up and down arrow keys to select an item.