How to add FontAwesome Icon into Joomla Menu

Marco
170 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
Vote to pay developers attention to this features or issue.
2 Comments
Order By: Standard | Newest
Support Team
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
.::Tobias::.
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)

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.

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.
You must log in or register to leave comments