{"id":106387,"date":"2023-04-28T16:05:36","date_gmt":"2023-04-28T10:35:36","guid":{"rendered":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/?post_type=documents&amp;p=106387"},"modified":"2023-04-28T16:05:36","modified_gmt":"2023-04-28T10:35:36","slug":"add-icons-in-elementor-accordion","status":"publish","type":"documents","link":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/docs\/add-icons-in-elementor-accordion\/","title":{"rendered":"How to Add Icons in Elementor Accordion?"},"content":{"rendered":"\n<p>Adding icons to an accordion in Elementor can make it more visually appealing and help to grab the viewer&#8217;s attention. By adding icons, you can also make the content more organized and easier to navigate.<\/p>\n\n\n\n<p>To add icons to your accordion in Elementor, you can use the Accordion widget from The Plus Addons for Elementor. With this widget, you can easily add and customize icons for accordion items.<\/p>\n\n\n\n<p><em>To check the complete feature overview documentation of The Plus Addons for Elementor Accordion widget, <a href=\"\/docs\/elementor-accordion-widget-settings-overview\/\" target=\"_blank\" rel=\"noreferrer noopener\">click here<\/a>.<\/em><\/p>\n\n\n\n<p><strong><em>Requirement&nbsp; &#8211; This widget is a part of The Plus Addons for Elementor, make sure its installed &amp; activated to enjoy all its powers.<\/em><\/strong><\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-a89b3969 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button has-custom-width wp-block-button__width-75 is-style-fill\"><a class=\"wp-block-button__link has-nxt-global-color-8-color has-nxt-global-color-1-background-color has-text-color has-background wp-element-button\" href=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/widgets\/accordion?utm_source=tpae&amp;utm_medium=docs&amp;utm_campaign=text\" style=\"border-radius:5px\" target=\"_blank\" rel=\"noreferrer noopener\">LIVE WIDGET LINK<\/a><\/div>\n<\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>To add icons in accordion, add the widget on the page, then go to <strong>Icon Option<\/strong> tab and turn on the <strong>Show Icon<\/strong> toggle (if turned off).<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"332\" height=\"473\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/04\/accordion-icon-options.png\" alt=\"accordion icon options\" class=\"wp-image-106391\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/04\/accordion-icon-options.png 332w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/04\/accordion-icon-options-211x300.png 211w\" sizes=\"(max-width: 332px) 100vw, 332px\" \/><\/figure>\n\n\n\n<p>From the <strong>Icon Font<\/strong> dropdown, select the icon library, then you can set standard and active state icons for accordion items separately.\u00a0<\/p>\n\n\n\n<p>Then from the <strong>Title HTML Tag<\/strong> dropdown, you can add different HTML tag to the accordion items.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1133\" height=\"504\" src=\"https:\/\/etemplates.wdesignkit.com\/wp-content\/uploads\/sites\/55\/2023\/04\/accordion-icon-options-demo.png\" alt=\"accordion icon options demo\" class=\"wp-image-106392\" srcset=\"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/04\/accordion-icon-options-demo.png 1133w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/04\/accordion-icon-options-demo-300x133.png 300w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/04\/accordion-icon-options-demo-1024x456.png 1024w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/04\/accordion-icon-options-demo-768x342.png 768w, https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-content\/uploads\/sites\/55\/2023\/04\/accordion-icon-options-demo-600x267.png 600w\" sizes=\"(max-width: 1133px) 100vw, 1133px\" \/><\/figure>\n","protected":false},"author":16,"featured_media":106400,"parent":0,"comment_status":"open","ping_status":"open","template":"","format":"standard","docs":[529,527],"class_list":["post-106387","documents","type-documents","status-publish","format-standard","has-post-thumbnail","hentry","docs-accordion","docs-plus-widgets"],"acf":[],"_links":{"self":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/106387","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents"}],"about":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/types\/documents"}],"author":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/users\/16"}],"replies":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/comments?post=106387"}],"version-history":[{"count":0,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/documents\/106387\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media\/106400"}],"wp:attachment":[{"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/media?parent=106387"}],"wp:term":[{"taxonomy":"docs","embeddable":true,"href":"https:\/\/etemplates.wdesignkit.com\/theplusaddons\/wp-json\/wp\/v2\/docs?post=106387"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}