{"id":11902,"date":"2024-05-29T18:39:22","date_gmt":"2024-05-29T12:39:22","guid":{"rendered":"https:\/\/betterdocs.co\/?post_type=docs&p=11902"},"modified":"2024-11-18T19:31:05","modified_gmt":"2024-11-18T13:31:05","password":"","slug":"how-to-change-docs-list-icon","status":"publish","type":"docs","link":"https:\/\/betterdocs.co\/it\/docs\/how-to-change-docs-list-icon\/","title":{"rendered":"How to Change Docs List Icon in Your Knowledge Base?"},"content":{"rendered":"

You can make your knowledge base visually appealing and user-friendly with BetterDocs<\/a><\/strong>‘ unique doc list icon customization feature. Customize default icons and design unique icons for single documents, grid layouts, or the sidebar. You can easily modify these icons using pre-defined options or upload your own. Let us explore how to change docs list icon in your knowledge base in different ways below:<\/p>\n\n\n\n

Globally Change Docs List Icon <\/strong><\/h2>\n\n\n\n

Changing all doc list icons is ideal for constantly looking across your knowledge base. You can do it in just two steps. Follow these steps to change your icons globally.<\/p>\n\n\n\n

Step 1: Navigate to the Layout Settings in BetterDocs Plugin<\/strong><\/h3>\n\n\n\n

Vai al BetterDocs plugin dashboard<\/strong> in the wp-admin menu<\/strong> and select \u2018Settings<\/strong>\u2019 from the submenu. Then, click on the \u2018Layout<\/strong>\u2019 tab in settings. <\/p>\n\n\n

\n
\"Step<\/figure>\n<\/div>\n\n\n

Step 2: Upload Icon, Save And Preview<\/strong><\/h3>\n\n\n\n

Click on the \u2018Click to upload<\/strong>\u2019 button and select your desired icon image. Scroll down and click on the \u2018Save<\/strong>\u2019 button. To view your updated icon, navigate to the \u2018All Docs<\/strong>\u2019 page and view your knowledge base.<\/p>\n\n\n

\n
\"Step<\/figure>\n<\/div>\n\n\n

Change Docs List Icon in Theme Widget<\/strong><\/h2>\n\n\n\n

You can customize the doc list icon on the BetterDocs widget in the theme customization settings. Here, you can change the list icons of the Docs page, Single Doc, Sidebar, and Category Archive. To do that, follow the guides for each category below:<\/p>\n\n\n\n

Docs Page List Icon<\/strong><\/h3>\n\n\n\n

As an admin, you can personalize your docs page list icons in just a few clicks in the BetterDocs theme widget. Follow the below steps:<\/p>\n\n\n\n

Step 1: Go to BetterDocs Widget And Choose layout<\/strong><\/h4>\n\n\n\n

Go to your WordPress docs page. Click \u2018Customize<\/strong>\u2019 in the top bar. In theme customizer settings navigate to the BetterDocs\u2192Docs Page.<\/strong> Choose a layout category that has a doc list.<\/p>\n\n\n

\n
\"Docs<\/figure>\n<\/div>\n\n\n

Step 2: Upload Icon File And Publish<\/strong><\/h4>\n\n\n\n

Scroll down to the \u2018Doc List Icon<\/strong>\u2019 section. Then, upload your desired icon file. Finally, click \u2018Publish<\/strong>\u2019 to update the icons. <\/p>\n\n\n

\n
\"Docs<\/figure>\n<\/div>\n\n\n

That is it! Your doc list will now display your custom icon.<\/p>\n\n\n\n

Change Icon in Sidebar<\/strong><\/h3>\n\n\n\n

For customizing the list icon displayed in the sidebar widget, follow these steps:<\/p>\n\n\n\n

Step 1: Access Sidebar Widget Settings<\/strong><\/h4>\n\n\n\n

In the theme customizer settings menu, navigate to BetterDocs \u2192 Sidebar<\/strong>.<\/p>\n\n\n

\n
\"Docs<\/figure>\n<\/div>\n\n\n

Step 2: Upload Icon And Publish<\/strong><\/h4>\n\n\n\n

Scroll down to the \u2018List Icon<\/strong>\u2019  in the sidebar content section and upload your desired icon file. Click \u2018Publish<\/strong>\u2019 to update the icons. <\/p>\n\n\n

\n
\"Docs<\/figure>\n<\/div>\n\n\n

Your sidebar widget doc list will now display your custom icon.<\/p>\n\n\n\n

Change Icon in Category Archive<\/strong><\/h3>\n\n\n\n

To change the list icon displayed in the Category Archive section, follow these steps:<\/p>\n\n\n\n

Step 1: Access Category Archive Settings<\/strong><\/h4>\n\n\n\n

In the theme customizer settings menu, navigate to BetterDocs \u2192 Category Archive<\/strong>.<\/p>\n\n\n

\n
\"Docs<\/figure>\n<\/div>\n\n\n

Step 2: Upload Icon And Publish<\/strong><\/h4>\n\n\n\n

Scroll down to the \u2018List Icon<\/strong>\u2019 in the content area and upload your desired icon file. Click on \u2018Publish<\/strong>\u2019 to update the icons. <\/p>\n\n\n

\n
\"Docs<\/figure>\n<\/div>\n\n\n

Your Category Archive doc list will now display your custom icon.<\/p>\n\n\n\n

Change Docs List Icon in Gutenberg Blocks<\/strong><\/h2>\n\n\n\n

This guide details how to customize the list icons displayed within BetterDocs Gutenberg Blocks. You can personalize the icons for the Category Grid Block, Archive Doc List Block, and Sidebar Block.<\/p>\n\n\n\n

Change List Icons of BetterDocs Category Grid Block<\/strong><\/h3>\n\n\n\n

In your WordPress, navigate to the page or post where you have added the BetterDocs Category Grid Block. Follow the below steps to add your customized icon.<\/p>\n\n\n\n

Step 1: Access Block Settings And Locate Icon Options<\/strong><\/h4>\n\n\n\n

Click on the \u2018Edit Page<\/strong>\u2019 from the wp-admin top bar, and select the block to open its settings in the right sidebar. Now, go to the \u2018Style<\/strong>\u2019 tab. Then, scroll down to the \u2018List<\/strong>\u2019 section and expand it. <\/p>\n\n\n

\n
\"Docs<\/figure>\n<\/div>\n\n\n

Step 2: Upload Icon And Save Changes<\/strong><\/h4>\n\n\n\n

Now, Upload your desired icon image file and hit the \u2018Update<\/strong>\u2019 button to save it.<\/p>\n\n\n

\n
\"Docs<\/figure>\n<\/div>\n\n\n

This is how easy it is to customize your docs list icon in Guttenberg using BetterDocs. <\/p>\n\n\n\n

Change Doc List Icon in BetterDocs Sidebar Block<\/strong><\/h3>\n\n\n\n

If you use the BetterDocs sidebar block as in your knowledge base created in Gutenberg, repeat these steps for each block individually to customize their icons. Change Icons of BetterDocs Siderbar Doc List Block following the below steps.<\/p>\n\n\n\n

Step 1: Access Block Settings And Find Icon Options<\/strong><\/h4>\n\n\n\n

Select the BetterDocs sidebar block on your page and go to the \u2018Style\u2019<\/strong> tab in the sidebar settings. Scroll down to the \u2018Docs List<\/strong>\u2019 section to locate the \u2018List Icon<\/strong>\u2019 option.<\/p>\n\n\n

\n
\"Docs<\/figure>\n<\/div>\n\n\n

Step 2: Customize Icons And Publish<\/strong><\/h4>\n\n\n\n

Click on the \u2018Upload<\/strong>\u2019 button, select your customized image, and hit \u2018Open<\/strong>\u2019. Click \u2018Update<\/strong>\u2019 to save your icon settings and update the block on your page.<\/p>\n\n\n

\n
\"Docs<\/figure>\n<\/div>\n\n\n

Change Icon in BetterDocs Archive Doc List Block<\/strong><\/h3>\n\n\n\n

If you use the BetterDocs Archive Doc List Block, repeat the below steps for each block to customize their icons individually. <\/p>\n\n\n\n

Step 1: Access Block Settings And<\/strong> Locate Icon Options<\/strong><\/h4>\n\n\n\n

Select the BetterDocs Archive Doc List Block on your page and go to the \u2018Style<\/strong>\u2019 tab in the sidebar settings. Locate the \u2018Icon<\/strong>\u2019 option to upload your icon file.<\/p>\n\n\n

\n
\"Docs<\/figure>\n<\/div>\n\n\n

Step 2: Choose & Apply Icon And Save<\/strong><\/h4>\n\n\n\n

Click on the \u2018Upload<\/strong>\u2019 button, select your icon file, and hit \u2018Open<\/strong>\u2019. Click \u2018Update<\/strong>\u2019 to save your icon settings and update the block on your page.<\/p>\n\n\n

\n
\"Docs<\/figure>\n<\/div>\n\n\n

By following these steps, you can successfully customize the list icons displayed within the BetterDocs Category Grid Block, Archive Doc List Block, and Sidebar Block in Gutenberg. Remember that the specific options and settings might vary slightly depending on your theme and BetterDocs version.<\/p>\n\n\n\n

Change Docs List Icon in Elementor Widget<\/strong><\/h2>\n\n\n\n

Let us explore how to customize the list icons displayed within the BetterDocs Category Grid widget in Elementor. Before customizing icons, the Elementor plugin<\/strong> should be installed and activated on-site and have the customized icon in SVG format. <\/p>\n\n\n\n

Step 1: Access Widget Settings<\/strong><\/h3>\n\n\n\n

In your Elementor page editor<\/strong>, select the  BetterDocs Category Grid, <\/strong>you can also select it <\/strong>from the navigator panel. Go to the \u2018Style<\/strong>\u2019 tab in the widget settings on the left sidebar and expand the List <\/strong>sezione. <\/p>\n\n\n

\n
\"Docs<\/figure>\n<\/div>\n\n\n


<\/strong>Step 2: Locate And Customize Icon Options<\/strong><\/h3>\n\n\n\n

Scroll down and hover over to the icon. Two options will appear to change the icon. We will choose the \u2018Upload SVG<\/strong>\u2019 option. Select the custom doc Icon SVG file and hit the \u2018Insert Media<\/strong>\u2019 button. <\/p>\n\n\n

\n
\"Docs<\/figure>\n<\/div>\n\n\n

Click on \u2018Update<\/strong>\u2019 to save your changes on the Elementor editor BetterDocs Category Grid Docs list icon on your page.<\/p>\n\n\n\n

BetterDocs offers a flexible solution to customize the appearance of your knowledge base through doc list icon modifications. By following the provided steps and exploring the available icon options within your theme, you can significantly enhance the visual appeal and user-friendliness of your knowledge base.<\/p>\n\n\n\n

If you require further assistance with customizing doc list icons or have any other inquiries related to BetterDocs, feel free to reach out to our dedicated support team<\/strong><\/a>.<\/p>","protected":false},"excerpt":{"rendered":"

Improve your knowledge base’s look! Easily change doc list icons globally or for Docs page, sidebar & more with BetterDocs. Step-by-step guide included.<\/p>","protected":false},"author":37,"featured_media":13636,"template":"","meta":{"_eb_attr":"","inline_featured_image":false,"_eb_data_table":"","_analytify_skip_tracking":false,"footnotes":""},"doc_category":[309],"doc_tag":[10,228,168,88,17,16],"knowledge_base":[282],"class_list":["post-11902","docs","type-docs","status-publish","has-post-thumbnail","hentry","doc_category-configurations","doc_tag-betterdocs","doc_tag-betterdocs-category-grid","doc_tag-betterdocs-grid-view","doc_tag-docs-category-archive","doc_tag-knowledge-base","doc_tag-wordpress","knowledge_base-wordpress"],"year_month":"2026-04","word_count":1125,"total_views":"3926","reactions":{"happy":"17","normal":"16","sad":"16"},"author_info":{"name":"Galib Hayder","author_nicename":"galib","author_url":"https:\/\/betterdocs.co\/it\/author\/galib\/"},"doc_category_info":[{"term_name":"Configurations","term_url":"https:\/\/betterdocs.co\/it\/docs\/shopify\/configurations\/"}],"doc_tag_info":[{"term_name":"betterdocs","term_url":"https:\/\/betterdocs.co\/it\/docs-tag\/betterdocs\/"},{"term_name":"BetterDocs Category Grid","term_url":"https:\/\/betterdocs.co\/it\/docs-tag\/betterdocs-category-grid\/"},{"term_name":"BetterDocs Grid View","term_url":"https:\/\/betterdocs.co\/it\/docs-tag\/betterdocs-grid-view\/"},{"term_name":"Docs Category Archive","term_url":"https:\/\/betterdocs.co\/it\/docs-tag\/docs-category-archive\/"},{"term_name":"knowledge base","term_url":"https:\/\/betterdocs.co\/it\/docs-tag\/knowledge-base\/"},{"term_name":"WordPress","term_url":"https:\/\/betterdocs.co\/it\/docs-tag\/wordpress\/"}],"knowledge_base_info":[{"term_name":"WordPress","term_url":"https:\/\/betterdocs.co\/it\/docs\/wordpress\/","term_slug":"wordpress"}],"knowledge_base_slug":["wordpress"],"_links":{"self":[{"href":"https:\/\/betterdocs.co\/it\/wp-json\/wp\/v2\/docs\/11902","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/betterdocs.co\/it\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/betterdocs.co\/it\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/betterdocs.co\/it\/wp-json\/wp\/v2\/users\/37"}],"version-history":[{"count":6,"href":"https:\/\/betterdocs.co\/it\/wp-json\/wp\/v2\/docs\/11902\/revisions"}],"predecessor-version":[{"id":13637,"href":"https:\/\/betterdocs.co\/it\/wp-json\/wp\/v2\/docs\/11902\/revisions\/13637"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/betterdocs.co\/it\/wp-json\/wp\/v2\/media\/13636"}],"wp:attachment":[{"href":"https:\/\/betterdocs.co\/it\/wp-json\/wp\/v2\/media?parent=11902"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/betterdocs.co\/it\/wp-json\/wp\/v2\/doc_category?post=11902"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/betterdocs.co\/it\/wp-json\/wp\/v2\/doc_tag?post=11902"},{"taxonomy":"knowledge_base","embeddable":true,"href":"https:\/\/betterdocs.co\/it\/wp-json\/wp\/v2\/knowledge_base?post=11902"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}