font awesome in menu link

General questions relating to Joomla! 3.x.
User avatar
Joomla! Ace
Joomla! Ace
Posts: 1177
Joined: Wed Jan 02, 2008 12:38 am

font awesome in menu link

Post by Gany » Fri Jan 25, 2019 3:32 am

Adding a font awesome icon in a menu link is pretty easy:
> Menu Item > Link Type > Link class > fa fa-home

There are 2 problems, however.
1) If you do this, you see that the icon and the item are together without space. I solved this by adding a space before the Menu Title.

2) Second problem is more difficult and I don't know how to solve this one. Font awesome is a serif font. When you place the icon in front of a menu item, the item will use that font. Supposing you use a sans serif font on your menu, this looks pretty bad.

How can I show font awesome icons and keep my sans serif font?

User avatar
Joomla! Master
Joomla! Master
Posts: 20243
Joined: Mon Aug 29, 2005 10:17 am
Location: Netherlands/ UK/ S'pore/Jakarta/ North America

Re: font awesome in menu link

Post by leolam » Fri Jan 25, 2019 6:01 am

Joomla's #1 Professional Services Provider:
#Joomla Professional Support: -
#Joomla Specialized Hosting Solutions: -
#Joomla Webmaster Services:

Joomla! Guru
Joomla! Guru
Posts: 734
Joined: Wed Aug 15, 2018 8:23 pm

Re: font awesome in menu link

Post by annahersh » Fri Jan 25, 2019 7:27 am

Gany wrote:
Fri Jan 25, 2019 3:32 am
How can I show font awesome icons and keep my sans serif font?
The link class is inserted into anchor tag and the FA rule is then applied to all the text wrapped in the class. It is designed to be used within a stand-alone element which is adjacent to the element you want it shown.

Since there is no simple method to create an element beside the anchor, it would be best if you created a set of CSS rules which uses the pseudo property ::before or ::after, and use the font's unicode as content, then use those classes in the menu link class.


Code: Select all

.fahome::before {
	font-family: "Font Awesome 5 Free";
	content: "\f015";
	margin-right: 10px;
	font-weight: 900;
You do not have the required permissions to view the files attached to this post.


Return to “General Questions/New to Joomla! 3.x”