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


Example with template Protostar and Blue Eagle.

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

Blue Eagle
  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
Crypsis
  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/tweet_icon.png");
        background-repeat: no-repeat;
        width: 16px;
        height:16px;
    }
    

    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/tweet_icon_new.png");
        background-repeat: no-repeat;
        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
  5. Clean Cache

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