{"id":2592,"date":"2026-10-20T08:35:19","date_gmt":"2026-10-20T07:35:19","guid":{"rendered":"https:\/\/wpgeodirectory.com\/documentation\/article\/change-category-icon-style\/"},"modified":"2026-10-20T08:39:38","modified_gmt":"2026-10-20T07:39:38","slug":"change-category-icon-style","status":"publish","type":"gd_place","link":"https:\/\/wpgeodirectory.com\/documentation\/article\/core-widgets\/change-category-icon-style\/","title":{"rendered":"How to change the category icon style in GeoDirectory&#8217;s category list"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">The category list from <code>&#091;gd_categories&#093;<\/code> (the GD &gt; Categories block or widget) has design options for its icons and cards. You can set them in the block settings or as shortcode attributes.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Design options<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>design_type<\/code>: <code>icon-left<\/code>, <code>icon-top<\/code> or <code>image<\/code> (the category image as a card background).<\/li>\n\n\n\n<li><code>icon_size<\/code>: boxed sizes such as <code>box-medium<\/code> or <code>box-large<\/code>, or plain sizes <code>h1<\/code> to <code>h6<\/code>.<\/li>\n\n\n\n<li><code>icon_color<\/code>: leave empty to use each category&#8217;s own colour, or pick one colour for all.<\/li>\n\n\n\n<li><code>hide_icon<\/code>: set to 1 to show text only.<\/li>\n\n\n\n<li><code>use_image<\/code>: set to 1 to show the category image instead of the icon.<\/li>\n\n\n\n<li><code>row_items<\/code>: how many categories per row, 1 to 6.<\/li>\n\n\n\n<li><code>card_color<\/code> and <code>card_shadow<\/code>: the card background and shadow.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">For example, square cards with the icon on top and four per row:<\/p>\n\n\n\n<pre class=\"wp-block-prismatic-blocks\"><code class=\"language-markup\">&#091;gd_categories design_type=&#039;icon-top&#039; icon_size=&#039;box-medium&#039; row_items=&#039;4&#039; hide_count=&#039;1&#039;&#093;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">The design options appear when your site uses the Bootstrap (AUI) styles, which is the default for new sites.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Change the icons themselves<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Each category has its own icon and colour. Edit a category at Places &gt; Place Categories and set:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><em>Category Icon<\/em>: a Font Awesome icon, used by the category list.<\/li>\n\n\n\n<li><em>Category Color<\/em>: the colour of that icon.<\/li>\n\n\n\n<li><em>Map Icon<\/em>: an image used for markers on the map. If you leave it empty, one is generated from the Font Awesome icon and colour.<\/li>\n\n\n\n<li><em>Default Listing Image<\/em>: used by the image design type and for listings that have no image.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">See <a href=\"https:\/\/wpgeodirectory.com\/documentation\/article\/core-widgets\/gd-categories\/\">GD &gt; Categories<\/a> for the full list of options.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The category list from &#091;gd_categories&#093; (the GD &gt; Categories block or widget) has design options for its icons and cards. You can set them in the block settings or as shortcode attributes. Design options For example, square cards with the icon on top and four per row: The design options appear when your site uses [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"article\/tags":[],"article\/categories":[213,422],"class_list":["post-2592","gd_place","type-gd_place","status-publish","hentry","gd_placecategory-extensions-features","gd_placecategory-core-widgets"],"_links":{"self":[{"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/article\/2592","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/article"}],"about":[{"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/types\/gd_place"}],"author":[{"embeddable":true,"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/comments?post=2592"}],"version-history":[{"count":1,"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/article\/2592\/revisions"}],"predecessor-version":[{"id":2775,"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/article\/2592\/revisions\/2775"}],"wp:attachment":[{"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/media?parent=2592"}],"wp:term":[{"taxonomy":"gd_place_tags","embeddable":true,"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/article\/tags?post=2592"},{"taxonomy":"gd_placecategory","embeddable":true,"href":"https:\/\/wpgeodirectory.com\/documentation\/wp-json\/wp\/v2\/article\/categories?post=2592"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}