WordPress’ Customizer is one of my favorite parts of WordPress. You will usually see me products taking full advantage of Customizer. Right now I’m working on a library for Customizer, which will consist of some custom WordPress controls written by me.
The very first is a Font Awesome picker customizer control. Font Awesome fonts are used by a lot of themes and they are really amazing. Sadly, I couldn’t find any icon picker for Font Awesome.
You can find it in O2 library here. It’s a part of the library so you will have to download the entire library. Feel free to delete other controls if you’re not using them.
Place /o2/ folder in your theme, and include it by adding the following code:
define( 'O2_DIRECTORY', get_template_directory() . '/inc/o2/' ); define( 'O2_DIRECTORY_URI', get_template_directory_uri() . '/inc/o2/' ); require get_template_directory() . '/inc/o2/controls/icon-picker/icon-picker-control.php';
First you need to define directory and directory URI of the /o2/ folder after that you need to include icon-picker-control.php file.
And that’s all you need to do.
You can add it to your customizer like this:
$wp_customize->add_setting( 'o2_fa_icon_picker', array( 'default' => 'fa-facebook', 'capability' => 'edit_theme_options' )); $wp_customize->add_control(new O2_Customizer_Icon_Picker_Control($wp_customize, 'o2_fa_icon_picker', array( 'label' => __('Icons', 'textdomain'), 'description' => __('Choose an icon', 'textdomain'), 'iconset' => 'fa', 'section' => 'your_section', 'priority' => 5, 'settings' => 'o2_fa_icon_picker' )));
It will a list of all the icons. If only want to list few icons then you can do it like this:
$wp_customize->add_control(new O2_Customizer_Icon_Picker_Control($wp_customize, 'o2_fa_icon_picker', array( 'label' => __('Icons', 'textdomain'), 'description' => __('Choose an icon', 'textdomain'), 'iconset' => 'fa', 'section' => 'your_section', 'priority' => 5, 'settings' => 'o2_fa_icon_picker', 'choices' => array( 'fa-facebook' => __('Facebook', 'textdomain'), 'fa-twitter' => __('Twitter', 'textdomain'), 'fa-dribbble' => __('Dribbble', 'textdomain'), 'fa-wordpress' => __('WordPress', 'textdomain'), 'fa-github' => __('Github', 'textdomain'), ) )));
That will do. If you face any issues then comment below, or feel free to send a pull request.
It’s just the first control, so you can expect few more posts like this in near future.
Update: Icon picker now also supports Genericons and Dashicons, so you can now change the value of iconset to use these two as well.
Also, if you’re using it then please leave a comment telling me your thoughts and the new controls you’d like to see.
Love this control?
If you love this control of O2 library then consider donating from here to support this product.
Link is dead … any new one pls ? Thank you
Which link are you talking about? π
sir this is a brilliant work but if you insert search option to find the icon of the icon dropdown it will be the best.
Thanks
Oh, just noticed. Here it is: https://github.com/HardeepAsrani/o2/tree/development/controls/icon-picker
sir if you insert an icon search box within it then it will be best.
Pingback: Syntax Highlighter Control For WordPress Customizer – Hardeep Asrani
Thank you !
Hope it worked. π
If not i will make it, i just neet a basic example π
All the best. π
Hello Hardeep,
First, i want to congratulate you on this beautiful icon picker.
Great work, great code.
I’m actually working on a theme and was searching for a solution to give the user the ability to change icons directly within the customizer. I’m using kirki, but as you know, kirki uses only dashicons.
So, i’m very lucky to have found your plugin.
Giving you back a little bit of your hard-work, I’ve implemented Glyphicons Halfings (used in bootstrap till v3.3.7)
Since I’m very new to Git Hub, i don’t know yet how to give you the code from there so this is the link to a zip folder of o2 with the added font family.
https://drive.google.com/open?id=0B5QvGn4LlSHuNl83UXBBRVBINzA
It would be great to have an option to choose from the integrated font family and a search box at the top of the list to quickly find the wanted icon.
Again, thanks a lot for sharing your great work !
WEBSITE BOOKMARKED π
Hey,
Thanks for the kind words. This directory is close to my heart but unfortunately I don’t get time to work as much as I want on it, so that’s why it has not many controls. I will hope to review your patch soon and implement it, as well as Material Icons.
Anyway, thanks. Getting to know that people actually use my controls will help me in focusing more on them. π
Hello Hardeep,
I wanted to help you by integrating Material Icons, but for some reason, i couldn’t get the font “image” to be visible in the Customizer before the label.
This is the link for material-icons.php (930 icons), i hope that this file will save you some time.
https://drive.google.com/open?id=0B5QvGn4LlSHuamRNS1pwUVJJdEU
SYA π
In my limited experience with Material Icons, they work a little different than usual font icons, so will have to try to see how it goes. π
Hello:
I have added this library to the wp_customizer. I really like this a lot. Just a question how would I echo the stored key and values so that I can show the icon in my theme? Thanks!
Bill
Hi Bill,
You can use get_theme_mod() to get the value. Let me know if it helps. π
Hi Hardeep, where I’ve to put the define and require code?
Depends on your needs. You can put it in the functions.php file. π
Hi , I am using the code to call icon
get_theme_mod(‘o2_fa_icon_picker’);
but it only give fa-facebook not the icon ? How to call icon please help
Yes, it will input the value only. You need to get it inside in HTML like this:
Hi,
First of all thanks and brilliant, I set up all you said in this article.
I have one doubt if I need all the icons means how can i set in choose attribute in that array.
In this example you put,
‘choices’ => array(
‘fa-facebook’ => __(‘Facebook’, ‘textdomain’),
‘fa-twitter’ => __(‘Twitter’, ‘textdomain’),
‘fa-dribbble’ => __(‘Dribbble’, ‘textdomain’),
‘fa-wordpress’ => __(‘WordPress’, ‘textdomain’),
‘fa-github’ => __(‘Github’, ‘textdomain’),
)
like this, i want all the icons means i will type all icons in the choices array. I think this is too hard.
Is there any settings i to do?
Then you just remove the choices parameter and it’ll get all the icons by default. Let me know if it works. π
I tried before itself many times but doesn’t work. If I give a choices parameter it’s working perfectly but I remove the parameter, customizer doesn’t show anything.
Can you use the contact form to email me so I could take a look?
Thank you, I solved it.
I’ve got the same problem. Could you write how did u solve it ?
Hi,
I’ve set up everything according to the instructions. I can see the picker and It displays the icon in the template, but in the picker I’ve got only the default icon and the glass icon when i change it to the glass icon even the default icon dissappears. Can you help me. Great work by the way π
Solved It, just had to change the position to static of the dd-container class, and It works fine. Sorry for three comments in a row. Maybe this will help someone else
Can you please explain the issue? What was the issue?
After setting up the plugin in the personalize panel i could only see the first icon, the drop down menu didn’t appear. I had to change te css settings position to static of the dd-container class, after that i could see all of the icons list.
Thanks for replying. I’ll take a look at it. π
I can see this problem. Can you explain me ?
Fatal error: Class ‘O2_Customizer_Icon_Picker_Control’ not found in C:\xampp\htdocs\nishat\wp-content\themes\Ifreelancetalent\inc\customizer100.php on line 95
Did you include the O2 library’s Icon Picker control to your theme?
Hi Hardeep,
I got the same error as Nishath Khandakar – Fatal error: Class βO2_Customizer_Icon_Picker_Controlβ not found …
Library is included, all paths and urls are correct …
Any ideas ?
Thanks
Can you send me the zip of the entire theme so I could see if everything is in proper place?
Hello Hardeep,
Same problem.
What is your email to send my WP template ?
You can use this site’s contact page, and send me a link to the .zip file of your theme.
I’ve sent you an email from 2 days.
I hope you have the solution because i don’t have found it ! π
Hello Hardeep,
Same problem.
What is your email please?
Saw the template. There are multiple issue:
1.
It should be:
2. You didn’t add the setting:
3. You also need to replace your_section with the name of your section.
Good evening Hardeep. Thanks for this plugin. I am finding it difficult to make the icons work. I updated your plugin to Awesome Font 5.11.2 but not all the icons are displayed. Do you have any suggestions? Thanks
Hello Mr. Hardeep Asrani,
I implemented the library in my WordPress Theme and everything works perfectly, Thank you very much and be well.