Custom category icons (my own png images) on NTS Kay Template

V Topic Author

valepo Offline

New Member

Custom category icons (my own png images) on NTS Kay Template

6 years 1 month ago - 6 years 1 month ago

#15853

I purchased, downloaded and installed NTS Kay template and I have to customize the category icons but the procedure indicated in the supporting documentation ( docs.kunena.org/en/manual/backend/categories/category-icons ) doesn't work.

What can I do?
Thanks in advance
VALEPO

Last edit: 6 years 1 month ago by ntstore.

Please Log in or Create an account to join the conversation.

ntstore Offline

Administrator

Re: Custom category icons (my own png images) on NTS Kay Template

6 years 1 month ago

#15854

Hi valepo,

The NTS Kay template has supported the FontAwesome icon 5.x and FontAwesome 4.x. So you can enter the fontawesome icon format to the Category Icon field to custom category icon.

- Fontawesome 5.x: fontawesome.com/icons?d=gallery
- Fontawesome 4.x: fontawesome.com/v4.7.0/cheatsheet/

Example: Enter "fa fa-star" to the Category Icon to add star icon for category.

Best regards,

Hung Pham
Email: 9themestore@gmail.com
Twitter: @9themestore

Please Log in or Create an account to join the conversation.

V Topic Author

valepo Offline

New Member

Re: Custom category icons (my own png images) on NTS Kay Template

6 years 1 month ago - 6 years 1 month ago

#15855

Hi,
so it is not possible to insert your own image, correct?

....I tried to insert this fontawesome.com/icons/tshirt?style=solid from fontawesome.com/icons?d=gallery

but don't see it (see attachment), what could be the problem?

Attachments:

Last edit: 6 years 1 month ago by valepo.

Please Log in or Create an account to join the conversation.

ntstore Offline

Administrator

Re: Custom category icons (my own png images) on NTS Kay Template

6 years 1 month ago - 6 years 1 month ago

#15856

Hi,

This is example icon. Please post your site url here if it online. We will help you check this issue.

Best regards,

Hung Pham
Email: 9themestore@gmail.com
Twitter: @9themestore

Attachments:

Last edit: 6 years 1 month ago by ntstore.

Please Log in or Create an account to join the conversation.

V Topic Author

valepo Offline

New Member

Re: Custom category icons (my own png images) on NTS Kay Template

6 years 1 month ago

#15857

Attachments:

Please Log in or Create an account to join the conversation.

ntstore Offline

Administrator

Re: Custom category icons (my own png images) on NTS Kay Template

6 years 1 month ago

#15858

Hi,
I just checked it out and there is a slight style conflict. Please follow some below step to solve your problem and we will update to the template next version.

1. Create a file with named: nts_kay_custom.css.
2. Copy bellow CSS rules to that file.

Code:

#kunena.layout .fas,
#kunena.layout .far,
#kunena.layout .fab {
  font-family: "Font Awesome 5 Free";  
}

#kunena.layout .fas { font-weight: 900; }
#kunena.layout .far { font-weight: 400; }
#kunena.layout .fab { font-weight: 400; }

#kunena.layout td.kcol-cat-icon .fas::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

#kunena.layout td.kcol-cat-icon .fas::before,
#kunena.layout td.kcol-cat-icon .far::before,
#kunena.layout td.kcol-cat-icon .fab::before {
  font-family: "Font Awesome 5 Free";
}

#kunena.layout td.kcol-cat-icon .fas::before { font-weight: 900; }
#kunena.layout td.kcol-cat-icon .far::before { font-weight: 400; }
#kunena.layout td.kcol-cat-icon .fab::before { font-weight: 400; }

3. Update the nts_kay_custom.css file to the css folder of current joomla template.
4. Reload your site to check.

Please let us know if it does not work on your site.

Thanks

Hung Pham
Email: 9themestore@gmail.com
Twitter: @9themestore

Please Log in or Create an account to join the conversation.

V Topic Author

valepo Offline

New Member

Re: Custom category icons (my own png images) on NTS Kay Template

6 years 1 month ago

#15862

Thanks! That's work!

If there will be the possibility to insert your own png image, please let me know!

Please Log in or Create an account to join the conversation.

ntstore Offline

Administrator

Re: Custom category icons (my own png images) on NTS Kay Template

6 years 1 month ago

#15863

Yes, you can use the use the image icon. We will help you custom icon if you want to use the image icon for category.

Hung Pham
Email: 9themestore@gmail.com
Twitter: @9themestore

Please Log in or Create an account to join the conversation.

V Topic Author

valepo Offline

New Member

Re: Custom category icons (my own png images) on NTS Kay Template

6 years 1 month ago

#15864

I'd like to be able to use the attached images

Attachments:

Please Log in or Create an account to join the conversation.

ntstore Offline

Administrator

Re: Custom category icons (my own png images) on NTS Kay Template

6 years 1 month ago

#15865

Hi,

Flow some bellow steps to use the image icon for category.

- Step 1: Download 3 bellow images and copy (upload) to the images folder of active joomla template

- Step 2: Update bellow CSS rules to the nts_kay_custom.css file.

Code:

/* Custom icon */
#kunena.layout i.cs-icon-abbigliamento,
#kunena.layout i.cs-icon-figurine,
#kunena.layout i.cs-icon-scarpe {
  background: url(../images/icon-abbigliamento.png) no-repeat center center;
  background-size: cover;
  display: block;
  height: 32px;
  margin: 5px 0 0 5px !important;
  width: 32px;
}

#kunena.layout i.cs-icon-figurine {
  background: url(../images/icon-figurine.png) no-repeat center center;
  background-size: cover;
}

#kunena.layout i.cs-icon-scarpe {
  background: url(../images/icon-scarpe.png) no-repeat center center;
  background-size: cover;
}

- Step 3: Open the category you want to add icon and enter icon class name to the Category Icon field.

Add: class cs-icon-abbigliamento for abbigliamento image.
Add: class cs-icon-figurine for figurine image.
Add: class cs-icon-scarpe for scarpe image.

- Step 4: Reload website to check.

___End___

Hung Pham
Email: 9themestore@gmail.com
Twitter: @9themestore

Attachments:

Please Log in or Create an account to join the conversation.

Offcanvas

Custom category icons (my own png images) on NTS Kay Template

Custom category icons (my own png images) on NTS Kay Template

Re: Custom category icons (my own png images) on NTS Kay Template

Re: Custom category icons (my own png images) on NTS Kay Template

Attachments:

Re: Custom category icons (my own png images) on NTS Kay Template

Attachments:

Re: Custom category icons (my own png images) on NTS Kay Template

Attachments:

Re: Custom category icons (my own png images) on NTS Kay Template

Re: Custom category icons (my own png images) on NTS Kay Template

Re: Custom category icons (my own png images) on NTS Kay Template

Re: Custom category icons (my own png images) on NTS Kay Template

Attachments:

Re: Custom category icons (my own png images) on NTS Kay Template

Attachments:

WaveTheme

Products

Help!

Elsewhere