Category:Bulid Web Designs & Code

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

Domino Qiu Qiu Online

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!

Reply
web-admin

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.

Reply

Leave a Reply

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

four × two =

Sign up Newsletter