font awesome in menu link

General questions relating to Joomla! 3.x.

Moderator: General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting.
Forum Post Assistant - If you are serious about wanting help, you should use this tool to help you post.
Windows Defender SmartScreen Issues <-- please read this if using Windows 10
Locked
User avatar
Gany
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
leolam
Joomla! Master
Joomla! Master
Posts: 20214
Joined: Mon Aug 29, 2005 10:17 am
Location: Netherlands/ UK/ S'pore/Jakarta/ North America
Contact:

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: https://gws-desk.com -
#Joomla Specialized Hosting Solutions: https://gws-host.com -
#Joomla Webmaster Services: gws-webmaster.services

annahersh
Joomla! Guru
Joomla! Guru
Posts: 573
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.

Example

Code: Select all

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

 

Locked

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