How to Add an Icon or Image to a Knowledge Base Category

SoftwareRoad Knowledge Base allows you to add an icon or custom image to each category.

These appear alongside the category name and description, helping visitors recognise different sections of your knowledge base more quickly.

You can either use a Bootstrap icon or upload your own image through the WordPress Media Library.

Open the category settings

To add an icon or image:

1. Sign in to your WordPress dashboard.
2. Open Knowledge Base > Categories.
3. Find the category you want to change.
4. Select Edit underneath the category name.

The category editing screen contains the normal WordPress category fields along with the additional SoftwareRoad Knowledge Base icon and image options.

Using a Bootstrap icon

Bootstrap icons are simple line-style icons that can be added by entering an icon class.

You do not need to upload an image file.

Find the category icon field and enter a class such as:

bi-book

After saving the category, the icon will appear wherever the category icon is displayed.

Other useful examples include:

• bi-book for documentation
• bi-download for installation or downloads
• bi-key for activation and licences
• bi-gear for settings
• bi-tools for troubleshooting
• bi-question-circle for frequently asked questions
• bi-shield-check for security
• bi-palette for design and customisation

The icon class must include the bi- prefix.

How to change a Bootstrap icon

To replace an existing icon:

1. Open Knowledge Base > Categories.
2. Edit the category.
3. Find the icon field.
4. Remove the current class.
5. Enter the new Bootstrap icon class.
6. Select Update.

Refresh the public knowledge base page to check the new icon.

You may need to clear your website cache before the change appears.

Uploading a custom category image

You can use your own uploaded image instead of a Bootstrap icon.

To add a custom image:

1. Open Knowledge Base > Categories.
2. Edit the category.
3. Find the category image option.
4. Select the button to choose or upload an image.
5. Choose an existing image from the WordPress Media Library or upload a new one.
6. Confirm the image selection.
7. Select Update.

The selected image will then be used for that category.

What happens if both an icon and image are added?

If a category has both a Bootstrap icon and a custom image, the uploaded image takes priority.

The Bootstrap icon can remain saved in the category settings, but it will not normally appear while a custom image is selected.

If you later remove the custom image, the saved Bootstrap icon can be displayed again.

Choosing a suitable image

Category images are usually displayed at a fairly small size, so simple images tend to work best.

Good choices include:

• Simple product icons
• Clean illustrations
• Small logos
• Line icons
• Symbols with clear shapes
• Images with transparent backgrounds

Avoid images with lots of small text or fine detail, as these may be difficult to see when reduced in size.

Try to use the same style across all category images. Mixing photographs, line icons and colourful illustrations can make the category grid look uneven.

Recommended image format

Common image formats such as PNG, JPG and WebP can be uploaded through the WordPress Media Library.

For category graphics, PNG or WebP will usually work well.

A transparent background can help the image blend into your knowledge base design, especially when the category cards use a coloured or light background.

Keep the file size reasonably small so the knowledge base page does not take longer to load.

Keep category graphics consistent

Consistency is more important than using a complicated design.

For example, you could use:

• Bootstrap icons for every category
• Matching line-style custom images
• Matching product icons
• Images using the same colours and dimensions

Try to avoid using a large colourful image for one category and a small black icon for another.

A consistent set makes the knowledge base easier to scan and gives it a more professional appearance.

Choosing icons for common categories

Here are a few simple examples.

Getting Started

Suitable icons could include:

bi-rocket-takeoff

bi-play-circle

bi-signpost

Installation

Suitable icons could include:

bi-download

bi-box-arrow-in-down

bi-hdd

Licence and Subscription

Suitable icons could include:

bi-key

bi-credit-card

bi-patch-check

Settings and Customisation

Suitable icons could include:

bi-gear

bi-sliders

bi-palette

Troubleshooting

Suitable icons could include:

bi-tools

bi-wrench-adjustable

bi-exclamation-triangle

Frequently Asked Questions

Suitable icons could include:

bi-question-circle

bi-chat-square-text

bi-info-circle

Choose an icon that matches the purpose of the category rather than simply choosing one that looks attractive.

Change the category icon size

The size of category icons can be changed from the SoftwareRoad Knowledge Base design settings.

Open:

Knowledge Base > Settings > Design

Find the category icon size option and adjust it as needed.

The exact size you choose will depend on:

• Your website layout
• The number of category cards
• The type of icon or image being used
• How the category grid appears on mobile

After changing the size, preview the knowledge base homepage and check several category cards.

Using different icons for child categories

Parent and child categories can each have their own icon or image.

For example:

• Getting Started could use a book icon
• Installation could use a download icon
• Activation could use a key icon
• First-Time Setup could use a gear icon

Using different graphics can help visitors understand the relationship between the main category and its smaller sections.

Try to keep the icon style the same even when the individual symbols are different.

Remove a custom category image

To remove an uploaded image:

1. Open Knowledge Base > Categories.
2. Edit the category.
3. Find the current category image.
4. Select the remove or clear option.
5. Select Update.

If a Bootstrap icon class is still saved, it may become visible again after the image is removed.

If you do not want either option displayed, remove both the custom image and the Bootstrap icon class.

Remove a Bootstrap icon

To remove the icon:

1. Edit the category.
2. Delete the text from the icon field.
3. Select Update.

If a custom image is still selected, the image will continue to appear.

The Bootstrap icon is not showing

If the icon does not appear, check that:

• The class begins with bi-
• The icon name is spelt correctly
• There are no extra spaces
• A custom image is not overriding it
• The category was updated successfully
• Your website cache has been cleared
• The browser can load the Bootstrap Icons stylesheet

Try using a simple icon such as:

bi-book

If that works, the previous icon class may have been incorrect.

The custom image is not showing

If the uploaded image does not appear:

• Check that the image is still available in the WordPress Media Library
• Edit the category and select the image again
• Save the category
• Clear your WordPress cache
• Clear your browser cache
• Check that the image URL loads correctly
• Try uploading the image again

Also confirm that you edited the correct category.

The image looks too large or too small

Open:

Knowledge Base > Settings > Design

Adjust the category icon size and preview the page again.

If the image still looks unusual, check the original file.

An image with a lot of empty space around the edges may appear much smaller than another image using the same dimensions.

Cropping unnecessary transparent space can help matching images appear more consistent.

The image looks blurry

A blurry category image usually means the original file is too small or has been heavily compressed.

Upload a clearer version with enough resolution to remain sharp at the displayed size.

You do not need an extremely large image, but it should be larger than the size at which it appears on the page.

Check the category on mobile

After adding icons or images, check the knowledge base on a mobile device.

Make sure that:

• The icon is easy to recognise
• It is not too large for the category card
• The category name still has enough room
• The image does not overlap the description
• All category graphics have a similar size

You may need to use a slightly smaller global icon size if the category cards feel crowded on narrow screens.

Category image checklist

Before finishing, check that:

• The graphic matches the category topic
• The icon class is valid
• The custom image is clear
• The style matches the other categories
• The image is not unnecessarily large
• The category card looks balanced
• The layout works on desktop and mobile

Your category now has an icon or image that helps visitors identify it more easily.