Category Icons

Different Category icons for different categories

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 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 images.

  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. 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

Found errors? Think you can improve this documentation? edit this page