Font Awesome in Menu Item link > Joomla 4

Be informed that this forum is not an official support forum for Joomla! 4.0. Any issues regarding Joomla! 4.0 must be reported at https://issues.joomla.org/.

Joomla 4.0 is still in Beta stage. This forum should be used for sharing information about Joomla! 4.0.

Moderator: ooffick

Forum rules
Locked
joomleb
Joomla! Ace
Joomla! Ace
Posts: 1035
Joined: Sat Aug 20, 2005 8:53 am
Location: Panamá

Font Awesome in Menu Item link > Joomla 4

Post by joomleb » Sun Jul 12, 2020 9:56 pm

Hi guys,
as far as I know in Joomla 3.9.19 are still present these 2 "issues": viewtopic.php?t=969189

Do you know if anything is changing with the upcoming Joomla 4 ?
Last edited by toivo on Sun Jul 12, 2020 10:14 pm, edited 1 time in total.
Reason: mod note: moved from 3.x General Questions

User avatar
sozzled
Joomla! Master
Joomla! Master
Posts: 10968
Joined: Sun Jul 05, 2009 3:30 am
Location: Canberra, Australia

Re: Font Awesome in Menu Item link > Joomla 4

Post by sozzled » Sun Jul 12, 2020 11:12 pm

I don't know if anything is changing with J! 4 (whenever J! 4 stable is released)—as far as FontAwesome support is concerned—but I think that these issues are related, in part, to the template(s) people may be using with whatever version of J! they're employing.

The simple answer to how to include FontAwesome font with Joomla! is here: https://stackoverflow.com/questions/470 ... n-from-css

Therefore, the question about whether one template or another uses FontAwesome can either be (a) answered by the developer(s) of that particular template, or (b) addressed by including a statement (something like)

Code: Select all

<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
in the template's HTML (where path/to/ is points to the actual location of the CSS filename). 8)

Both the J! 4 Cassiopeia [frontend] template and the Atum [backend] template include FontAwesome font support. I don't know anything about third-party templates or whether third-party developers have included FontAwesome support with their templates (whether we're discussing J! 3.x or J! 4) at this time.
“If you think I’m wrong then say, ‘I think you’re wrong.’ If you say ‘You’re wrong!’, how do you know?” :)

joomleb
Joomla! Ace
Joomla! Ace
Posts: 1035
Joined: Sat Aug 20, 2005 8:53 am
Location: Panamá

Re: Font Awesome in Menu Item link > Joomla 4

Post by joomleb » Mon Jul 13, 2020 12:46 am

Hi sozzled,
many thanks for your answer. Anyway, I have no doubts on how to include Font Awesome icons support on my template and also how to add them to a menu link, is pretty easy:

Menu Item > Link Type > Link class: fa fa-home (for example)

The question was and is about the 2 issues we have back:

1 - the Icon and the Title menu item are shown adherent, without a space (a temporary trick is to add a space in the Menu Item Title field)

2 - Font Awesome is a serif font, when you place the icon in front of a menu item, that single menu item Title is inheriting that font

User avatar
sozzled
Joomla! Master
Joomla! Master
Posts: 10968
Joined: Sun Jul 05, 2009 3:30 am
Location: Canberra, Australia

Re: Font Awesome in Menu Item link > Joomla 4

Post by sozzled » Mon Jul 13, 2020 1:34 am

joomleb wrote:
Mon Jul 13, 2020 12:46 am
I have no doubts on how to include Font Awesome icons support on my template ...
Are we discussing J! 3.x or J! 4? ???

If we are discussing J! 4, I think I have answered your question as best as I can. 8)
“If you think I’m wrong then say, ‘I think you’re wrong.’ If you say ‘You’re wrong!’, how do you know?” :)

User avatar
Webdongle
Joomla! Master
Joomla! Master
Posts: 40387
Joined: Sat Apr 05, 2008 9:58 pm

Re: Font Awesome in Menu Item link > Joomla 4

Post by Webdongle » Mon Jul 13, 2020 8:09 am

joomleb wrote:
Sun Jul 12, 2020 9:56 pm
...
as far as I know in Joomla 3.9.19 are still present these 2 "issues"...
Not including a non standard font is not an issue. It is a matter of choice ... if you wish to use a Template with (or edit a copy of Joomla's Template to use) a non standard font you are free to do so.
http://www.weblinksonline.co.uk/
https://www.weblinksonline.co.uk/updating-joomla.html
"When I'm right no one remembers but when I'm wrong no one forgets".

User avatar
ceford
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 247
Joined: Mon Feb 24, 2014 10:38 pm
Location: Edinburgh, Scotland
Contact:

Re: Font Awesome in Menu Item link > Joomla 4

Post by ceford » Mon Jul 13, 2020 1:53 pm

Interesting problem! I went to the Cassiopeia template and added user.css with this content:

Code: Select all

.fa-atom::before {
	font-family: "Font Awesome 5 Free";
	content: "\f5d2";
	margin-right: 10px;
	font-weight: 900;
}
And then to Menus: Edit Item -> Link Type and set Link Class to fa-atom - and this is how it came out in the menu:
menu-icon.png
Problem solved?
You do not have the required permissions to view the files attached to this post.

User avatar
ceford
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 247
Joined: Mon Feb 24, 2014 10:38 pm
Location: Edinburgh, Scotland
Contact:

Re: Font Awesome in Menu Item link > Joomla 4

Post by ceford » Mon Jul 13, 2020 1:59 pm

On reflection I should have used a unique style name to avoid interference with any other instances of fa-atom. So atompic perhaps.

User avatar
modernmagic
Joomla! Explorer
Joomla! Explorer
Posts: 357
Joined: Mon Aug 10, 2009 3:58 pm
Location: Laguna Beach, CA, USA
Contact:

Re: Font Awesome in Menu Item link > Joomla 4

Post by modernmagic » Fri Jun 04, 2021 6:24 am

joomleb wrote:
Mon Jul 13, 2020 12:46 am
2 - Font Awesome is a serif font, when you place the icon in front of a menu item, that single menu item Title is inheriting that font
I too saw this font famliy issue. This was my solution:

Code: Select all

.fa {font-family: inherit;}
.fa::before {font-family: "Font Awesome 5 Free";}
Joomla! Website Designer http://www.modernmagic.com
Joomla! User Group Leadership Team http://www.ocjoomlausergroup.org/

User avatar
Jaydot
Joomla! Explorer
Joomla! Explorer
Posts: 481
Joined: Sun Jun 04, 2017 12:11 pm
Location: The Netherlands
Contact:

Re: Font Awesome in Menu Item link > Joomla 4

Post by Jaydot » Fri Sep 24, 2021 2:31 pm

ceford wrote:
Mon Jul 13, 2020 1:53 pm

Code: Select all

font-family: "Font Awesome 5 Free";
I know this is an old post, but I've been searching all over the place to find the correct font-family, so thanks!
How/where did you find out you needed to use "FA 5 Free", and not for instance "FA 5 Regular"??
The fact that an opinion is widely held is no evidence whatsoever that it is not utterly absurd.
Personal website: https://jaydot.nl


Locked

Return to “Joomla! 4 Related”