Add Icons to WordPress Customizer Setting Panel

Categories:

Recently WordPress makes customizer necessary for all theme submitted WP directory if you are working with it then you must want to know how to place Icons in Customizer Options there are some other issue as well apart from just placing icons like mane of sanitization fields and making other change.

But today we just talk about how you can style your customizer using CSS and place Icons in customizer . For Icons you donโ€™t need any external font icons because WordPress itself have some included Icons with package. You can check all dashicons hereย they are beautiful and under GPL licences or check on Github.

Icons in wordpress customizer

Place Icon in Customizer Options

First step to create a CSS file name it whatever you prefer like customizer.css and now you just need to CSS Class and ID of every field option or section where you wish to place Icons may be in top panel or under section user developer tool to view panel CSS Class or ID as shown in below picture.

add icons in wordpress customizer

Here is you can see ID #accordion-panel-level_panel_geranal ย now you have ID of panel so you can use it in css but one more thing you should consider while using Icons if you used this ID only then icons will place into sub section and panel automatically under this panel. You need to point icon only to general settings class n above Picture second arrow point to it. So now you complete CSS looks like thisย #accordion-panel-panel_general > h3.accordion-section-title

CSS Styling

Lets start styling I use before and li to complete my css before for icons place.

li#accordion-panel-level_panel_geranal > h3.accordion-section-title:before {
content: "\f107";
font-family: dashicons;
padding: 3px;
}

PHP Codes

Now save this file within your theme directory you also need a special code in function.php to call this file.

Comments

14 responses to “Add Icons to WordPress Customizer Setting Panel”

  1. domain Avatar
    domain

    Good article. I’m experiencing a few of these issues
    as well..

  2. Vijay Kumar Avatar

    Thanks for giving the detailed information about CSS styling. The article could be very useful for everyone.

  3. Jagdish kashyap Avatar

    Oh Man, you saved my lot’s of time.
    I have been searching this from while.

    Thanks!

  4. Vijay Avatar

    Hmm, That is the thing…. I was looking for what it is?? This is detailed guides about CSS. Now I have added icons on my site using your fully guide.
    Thanks

  5. rasigunyogi Avatar

    Thanks for giving the detailed information about CSS styling. The article could be very useful for everyone.
    I have added icons on my site using your fully guide.
    Thanks

  6. Sai Sannihith Cheerla Avatar

    Good article and neatly explained. Thumbs up!

  7. Deepak Jha Avatar

    Thanks a lot mate.. I will try it on my website and see if it works for me or not.

  8. filmywap Avatar
    filmywap

    Nice Post i realy need it

  9. Rovshen Avatar
    Rovshen

    thank you! Very helpfull

  10. SD Maid Pro Avatar

    Nice article for neat CSS Styling ๐Ÿ™‚

  11. Pranshu Kharkwal Avatar
    Pranshu Kharkwal

    Worked like charm. Thanks a lot for post it. You are literally a life saver.

  12. Mohit Kumar Avatar

    nice article . Really informative.Got idea about how to add icons in wp cutomizer setting panel.

  13. Pickup Lines Avatar
    Pickup Lines

    Cool Man, Working Perfectly

  14. Anushka Vashishta Avatar

    Thanks Sandy. It saved my lot of time. Really appreciate your efforts for putting this information altogether.

Leave a Reply

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