Category Icons

Different Category icons for different categories

Kunena 6.0 examples with template Cassiopeia and Aurelia

If you use svg symbols:

1. Go to Backend -> Kunena -> Categories and click on a Category
2. Enter the name of icon in the category manager such as house, alarm etc.. You can use the names of all svg symbols that are in the svg folder. Path is: /media/kunena/core/svg. Self-created SVG symbols are also possible if uploaded to this folder, but should in no case replace an existing symbol. It would be overwritten again during the next upgrade!

If you use FontAwesome symbols:

1. Go to Backend -> Kunena -> Categories and click on a Category
2. Enter the name of icon in the category manager such as fa-home, fa-dragon etc.. You can use all the icons that your Joomla template provides. External FontAwesome can also be loaded (Dashboard -> Templates -> Aurelia -> tab Features -> Load External CDN Fontawesome).

If you want to use your own images:

1. Important! The size of the images must be adjusted before uploading. Optimal are about 32x32 pixel.
2. Upload your images to /media/kunena/category_images.
3. Go in backend to Kunena -> Templates -> mark Aurelia-> Edit SCSS -> custom.SCSS -> Edit SCSS and enter the following code.
4. Enter the name of icon in the category manager (in this case icon-gs).

                    .icon-gs {
  background-image: url("/media/kunena/category_images/own_icon.png");
  background-repeat: no-repeat;
  width: 32px;
  height: 32px;
}

If the Joomla installation is installed in a subfolder, the name of this folder must also be specified in the image path.

                    .icon-gs {
  background-image: url("/subfoldername/media/kunena/category_images/own_icon.png");
  background-repeat: no-repeat;
  width: 32px;
  height: 32px;
}

---

Kunena 5.2 and older versions

If you are using a Joomla template which supported bootstrap icons, is it easy.

Example with template Protostar and Crypsis.

1. Go to Backend -> Kunena -> Categories and click on a Category
2. Enter the name of icon in the category manager such as icon-home, icon-trash etc..

here is a list with this icons

If you want to use your own symbols:

1. Upload the image on the image dir on your kunena template. example: components\com_kunena\template\crypsis\assets\images

2. Go in backend to Kunena -> Templates -> mark Crypsis-> Edit less -> custom.less -> Edit less and enter this codes:

                               .icon-gs {
       background-image: url("assets/images/own_icon.png");
       background-repeat: no-repeat;
       width: 32px;
       height:32px;
   }

   If you want for unread categories a difference (another color etc..) then you need a second image along with this code.

                               .icon-gs.knewchar {
       background-image: url("assets/images/own_icon_new.png");
       background-repeat: no-repeat;
       width: 32px;
       height:32px;
   }

3. Go to Backend -> Kunena -> Categories and click on Category

4. Enter the name of icon in the category manager icon-gs

5. Clean Cache

The size of the images must be adjusted before uploading!

---

Example with template Protostar and Blue Eagle.

This guide was written for older Blue Eagle versions and is obsolete. If you have questions about the template Blue Eagle 5, please ask in the Kunena Forum.

The same works also with Blue Eagle but it needs a little CSS customization.

1. Go in backend to Kunena -> Templates -> mark Blue Eagle -> Edit CSS -> custom.css -> Edit CSS and enter this codes:

                               #Kunena .icon-big {
       color: #5388b4;
       margin-right: 15px;
   }
   
   #Kunena .icon-knewchar, #Kunena .knewchar {
       color: #090 !important;
   }

   

2. Go to Backend -> Kunena -> Categories and click on Category

3. Enter the name of icon in the category manager such as icon-home, icon-trash etc.. here is a list with this icons

---

If you want to use your own images.

1. Upload the image on the image dir on your kunena template. example: components\com_kunena\template\blue_eagle\images\icons\gs.png
2. Go in backend to Kunena -> Templates -> mark Blue Eagle -> Edit CSS -> custom.css -> Edit CSS and enter this codes:

                               #Kunena .icon-gs {
       background-image: url("../images/icons/gs.png");
       width: 16px;
       height:16px;
   }

3. Go to Backend -> Kunena -> Categories and click on Category
4. Enter the name of icon in the category manager icon-gs