font-awesome-logo

Create a Font Awesome icons list Popup for Quick Icon Selection in WordPress .

Font awesome icons are one of the widely used vector icons on the web. Many website use these beautiful icons on their landing pages, home pages and service pages. These icons provide a comprehensive idea about your services. Font awesome icons also add a pretty web design and look website professional. There is many ways to use these icons. If you are WordPress theme developer you need these font awesome icons list in your wordpress dashboard for their use in header, footer, side bars and in widgets of your WordPress website.

Where to Use This Font Awesome Icon Pop up

This Icon populated pop up will be target to use in WordPress dashboard widget for quick selection of icon . and save its value in the WordPress database and used saved value later on at front end of the theme. For example it is useful for custom option page of theme where you desire to select an icon and save it in wordpress options database or you can use this select box in wordpress widget input and save the value which further use to display font awesome icons in widget area or anywhere in your wordpress theme or template.

How to Implement

We are using a free available plugin named Simple Font awesome Icon Picker and integrating it in our theme. You can see live demo of plugin. Download this plugin and add its two files in below given function in your functions.php file. Remember to add JQuery and font awesome 4.7.0 library in this function. Code is given below. Change the local path according to your folders containing files. See code below:-

function ulook_load_scripts_fontawesome_icon_picker() {
 
 $fontawsome_url='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css';
 wp_enqueue_style( 'ulook-fontawsome-4.7.0', $fontawsome_url, false, '1.0' );
 wp_enqueue_script('ulook_fa_picker-js', get_stylesheet_directory_uri() . '/assets/js/simple-iconpicker.js', array(), '1.0.0', true );
 wp_enqueue_style( 'ulook-fa-picker-css', get_template_directory_uri() . '/assets/css/simple-iconpicker.css' , false, '1.0');
	
	
}
add_action( 'admin_enqueue_scripts', 'ulook_load_scripts_fontawesome_icon_picker' );

Above function will enqueue script in admin dashboard. Now add following code in your themes JS file containing JQuery Code.

jQuery(document).ready(function($){

 $('.input1').iconpicker(".input1");
});


Now you can use following code to create text box. When you click on the box it will create popup with Font awesome icons. When you select an icon its class name will be inserted in the text box.

<input name="a" class="input1 input" id="" type="text" value="" />

On clicking the text box you will see a pop up containing all font awesome icons of ver.4.7.0. the screen shot is given below:

screenshot-fontawesome-icons
screenshot
Spread the love

 

4 Comments

  1. daftar judi ceme online terbaru - June 25, 2019 at 1:03 am

    I blog quite often and I seriously thank you for your content. This article has truly peaked my interest. I’m going to bookmark your website and keep checking for new details about once per week.

  2. Domino Qiu Qiu Online - July 9, 2019 at 4:47 pm

    Hi there would you mind letting me know which webhost you’re using?
    I’ve loaded your blog in 3 different web browsers and I must say this
    blog loads a lot faster then most. Can you recommend
    a good hosting provider at a fair price? Kudos, I appreciate it!

    • web-admin - August 7, 2019 at 5:52 pm

      Welcome to ulookwebdesign. We have a reseller hosting account. The company use server at uk base. We can provide you 3GB space and 20GB bandwidth for only $50 per year.

  3. hickoryfoodfactory.com - July 25, 2019 at 2:59 pm

    I go to see daily some sites and websites to read posts, but this blog gives feature based posts.

Leave a Reply

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

20 − twelve =

Go to Top