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
    • 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: 547
Share this post
FacebookTwitterLinkedIn
About the author

Samir Jana

I am working as a Web Developer for the last 4 years, and the projects I’ve been involved in have ranged from simple web applications used by thousands of users every day. Most of the applications that I’ve worked on are still in use today. Whenever I've worked on a team with other engineers and blogger that help people learn more.

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

Cool Ball
Cool Ball is a puzzle element of 2D balance ball game. This is a very simple and interesting and attractive game. Install this game now. Get it on Google Play
Subscribe to our Newsletter
Search anything
Questions
Add leading zeros to a number in CODEIGNITER 1 Answer | 0 Votes
How to get first name from full in PHP 1 Answer | 0 Votes
How reload a page after clicked SweetAlert ok 1 Answer | 0 Votes
How set in gender default male and female in MySQL database 2 Answers | 0 Votes
How to animate my ionic app using CSS? 1 Answer | 0 Votes
Recent Programming Article
  • 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
  • Live search like google in Codeigniter, jQuery
    May 18, 2018
  • facebook twitter share
    Add facebook & twitter share link in your website
    May 6, 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
  • Most downloaded app lock in Play Store
    March 15, 2018
  • Xiaomi Mijia Technical
    February 16, 2018
  • Xiaomi shoe Start Process
    February 16, 2018
© 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.