J!Extensions Store™
Forum
Welcome, Guest
Please Login to access forum.
Icon fontawesome aren't shown correctly (1 viewing) 
Go to bottom
TOPIC: Icon fontawesome aren't shown correctly
#5290
Jhonson
Fresh Boarder
Posts: 11
User Offline
Icon fontawesome aren't shown correctly 4 Years ago Karma: 0  
hi there,

i am using uniq icon fortawesome.github.io) for my main menu.
It works just fine in normal personal computer but it doesnt work with responsivizer. All of the icon is shown in my samsung andoid there as a black mini box. And iphone 5 doesnt show it at all.
 
Logged Logged  
  The administrator has disabled public write access.
#5291
John Dagelmore
Admin
Posts: 3557
User Offline
Re:Icon fontawesome aren't shown correctly 4 Years ago Karma: 74  
Hi,

Font Awesome are already loaded, included and used by default in the Responsivizer template, see demo website:
http://demo.storejextensions.org/responsivizer/templates/responsivizer/css/resources/font-awesome.min.css

Probably you are using them in the wrong way.
As an example try to look at how icons are used for the login menu (attached screenshot) and refer to the official website for documentation http://fontawesome.io/

Thanks.
 
Logged Logged  
  The administrator has disabled public write access.
#5292
Jhonson
Fresh Boarder
Posts: 11
User Offline
Re:Icon fontawesome aren't shown correctly 4 Years ago Karma: 0  
it is impossible that i use it in a wrong way. What all i need to do to get the icon work is just to put it in the class suffix main menu. My responsive template shows the icon correctly. But if i i enable responsivizer, than the icon change into black mini boxes.

But i wonder why the class fa fa icon is not recognise as i.fa.fa-icon. As you can see the picture the icon is shown in the login form with code <i class=fa fa-icon>
the other main menu recognize the icon with the code < a class=fa fa-icon>

i have no idea how to change the code if its possible.
 
Logged Logged  
  The administrator has disabled public write access.
#5293
John Dagelmore
Admin
Posts: 3557
User Offline
Re:Icon fontawesome aren't shown correctly 4 Years ago Karma: 74  
I understand now and it's easy to explain.

You have to override the font family for anchor elements <a> used in the main menu, if not obviously they won't get the font awesome font family but the one defined in the template.

Add to the main.css file a css rule like this one to apply Font Awesome correctly:

a.fa {
font-family: FontAwesome !important;
}
 
Logged Logged  
  The administrator has disabled public write access.
#5294
Jhonson
Fresh Boarder
Posts: 11
User Offline
Re:Icon fontawesome aren't shown correctly 4 Years ago Karma: 0  
well, thank you it works.

But the other problem is, how could i put a class name to each icon. At the moment as you can see the through the picture the main menu ordered unproperly. The icon and the menu text are in an html a element. I couldn't put any padding or margin.

could you please give me any trick how to put a class to each icon there, if its possible. Thank you
 
Logged Logged  
  The administrator has disabled public write access.
#5295
John Dagelmore
Admin
Posts: 3557
User Offline
Re:Icon fontawesome aren't shown correctly 4 Years ago Karma: 74  
Well that's simple too. You have to use Joomla templates override to alter and customize the HTML code of menus.
 
Logged Logged  
  The administrator has disabled public write access.
Go to top