Place Icon in Customizer Options

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...

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.

Place icon in 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.

Place icon in customizer and view Class and ID

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.

 

PHP Codes

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

That’s all you need to do with this method you can style your customizer in any way you want. If you have any question or query either want to know more about how to place icon in customizer please put in comment box.

personal technology columnist, author and founder of wRock.org, a widely read tech and how-to blog since 2009. Wants to explore and share interesting Tips, Tutorials and More. Also WordPress Theme Designer @ here. Contact: Contact

Leave a Reply

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