How to add FontAwesome Icon into Joomla Menu

171 Posts

Marco posted this 30 December 2015

Hi,
I want to add fontawesome icons into navigation. Every Menu should have an own Icon.
If I add fa fa-home to menu it works, but font changes to 'Times New Roman'.
What do i need to add in CSS Section of Menu, that the regular font will also be used?

Thanks in advance

Hi, I want to add fontawesome icons into navigation. Every Menu should have an own Icon. If I add fa fa-home to menu it works, but font changes to 'Times New Roman'. What do i need to add in CSS Section of Menu, that the regular font will also be used? Thanks in advance

joomla-menu FontAwesome

Vote to pay developers attention to this features or issue.

2 Comments

Order By: Standard | Newest

Support Team posted this 05 January 2016

Hello Marco,
actually Themler menu does not allow to add icons (or custom HTML) to menu items anyhow.
Please provide link to the page which demonstrates your solution and issue

regards,
Aileen

Hello Marco, actually Themler menu does not allow to add icons (or custom HTML) to menu items anyhow. Please provide link to the page which demonstrates your solution and issue regards, Aileen

8 Posts

.::Tobias::. posted this 12 April 2020

Hi Marco,
1.
Font Awesome
Download and copy the files from FontAwesome to your server.
https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself

2.
Adding icon to a joomla menu-link:
Go to your Menuitem you want to edit in the joomla backend and chosse the tab Link Type.
Ad a "Link Class (eg. menulink001)

3.
Styling the css-file
Add following to your css:

a.menulink001:before
{
font-family: 'Font Awesome 5 Free' !important;
font-weight: 900 !important;
content: '\f0f4';
}

You always need the pairing font-family AND font-weight.
The font-weight must be 900 for the free icons.
For the free brand-icons you have to set the font-weight to 400

Thats it.

Have fun.

Hi Marco, 1. **Font Awesome** Download and copy the files from FontAwesome to your server. https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself 2. **Adding icon to a joomla menu-link:** Go to your Menuitem you want to edit in the joomla backend and chosse the tab Link Type. Ad a "Link Class (eg. menulink001) !fontawesome-joomla-menuitem-01.png! 3. **Styling the css-file** Add following to your css: a.menulink001:before { font-family: 'Font Awesome 5 Free' !important; font-weight: 900 !important; content: '\f0f4'; } !fontawesome-joomla-menuitem-02.png! You always need the pairing font-family AND font-weight. The font-weight must be **900** for the **free icons**. For the **free brand-icons** you have to set the font-weight to **400** Thats it. !fontawesome-joomla-menuitem-03.png! Have fun.

fontawesome-joomla-menuitem-01.png

fontawesome-joomla-menuitem-02.png

fontawesome-joomla-menuitem-03.png