Kunena 6.3.0 released

The Kunena team has announce the arrival of Kunena 6.3.0 [K 6.3.0] in stable which is now available for download as a native Joomla extension for J! 4.4.x/5.0.x/5.1.x. This version addresses most of the issues that were discovered in K 6.2 and issues discovered during the last development stages of K 6.3

Please note: The Kunena project team takes NO responsibility for maintaining nor supporting anything in this category.

Question Can't Get Kunena to display Font-Awsome Glyphs

webdevtim
Topic Author
Offline
Junior Member

7 years 10 months ago #1 by webdevtim

Can't Get Kunena to display Font-Awsome Glyphs was created by webdevtim

Have added the Font-Awsome 'Fonts' folder to my template root. Added font-awesome.min.css to the templae/css folder. Added

Code:

@import url("font-awesome.min.css");
.fa:before {
  font-family: fontawesome;
}
.fa {
  font-family: Verdana, Arial, sans-serif;
}

to the template.css file.

added:

Code:

.icon-group:before {
	content: "\f0c0";
}

to the template.css file and alternatively added

Code:

.fa-user:before {
	color: #002a67;
}

to the template.css and in the one case added icon-group to the Category Icon: field and in the other case .fa-user to the Category Icon field. In both cases Kunena only display a place holder square for the icon, but in the Joomla Home menu a house is displayed next to the words home using the same procedure. Is there something else I need to do?

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

810
Offline
Administrator

7 years 10 months ago #2 by 810

Replied by 810 on topic Can't Get Kunena to display Font-Awsome Glyphs

try

Code:

.fa {
font: normal normal normal 14px/1 FontAwesome;
}

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

webdevtim
Topic Author
Offline
Junior Member

7 years 10 months ago #3 by webdevtim

Replied by webdevtim on topic Can't Get Kunena to display Font-Awsome Glyphs

That worked after I made some other changes.

I added the following classes:

Code:

[class^="fa-icon-"],
[class*=" fa-icon-"] {
	position: relative;
}
[class^="fa-icon-"]:before,
[class*=" fa-icon-"]:before {
	color: #00264d;
	font-family: FontAwesome;
	font-style: normal;
	font-weight: normal;
	left: 0;
	text-decoration: inherit;
	position: absolute;
}
[class^="fa-icon-"].disabled,
[class*=" fa-icon-"].disabled {
	font-weight: normal;
}


.fa-icon-group:before {
	content: "\f0c0";
}

And this did it.

Thank you for your help.

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

Time to create page: 0.494 seconds