0

It's pretty easy - and not. Simply add fa fa-home to menu item > Link Type > Link Class, and you got your icon in front of your item.

What is a problem is that the font following refers to Font Awesome (serif font) and there is no space between the icon and the item.

Any idea how I can add the icon with space and without referring to the serif font Awesome font?

I've tried this in Menu Item > Link Type > Link Class:

fa-home --> nothing shows

fa fa-home --> icon shows, no space between the icon and the link + serif font

fa fa-home [&nb sp;] --> icon shows, no space between the icon and the link + serif font

[&nb sp;] = no break space

https://snag.gy/IFNB3l.jpg

4
  • Would you please add context to your question? Show us a screenshot of what you are seeing currently and scribble on the screenshot with what you'd like to see. If you have implemented any kind of coding attempt, please add your coding attempt to the question (and use the code block formatting). Your question may be understood by those who are well-versed in this operation, but to make your question truly high value, it must speak to people who don't know what you are doing and why. Updating your question will likely lead to faster and higher quality responses. (why not risk it?) Jan 24, 2019 at 4:16
  • Can't you just add   after the icon?
    – Mythic
    Jan 24, 2019 at 4:31
  • @Mythic Of course I tried that. If I do, font awesome doesn't show.
    – Jos
    Jan 24, 2019 at 4:38
  • 1
    @Jos by including all of your attempts to self-solve, you can prevent volunteers asking "Have you tried this...?" type comments and answers. Jan 24, 2019 at 5:13

2 Answers 2

1

Add   to the beginning of the Menu Title.

4
  • This would be more of a hack -- using a whitespace character to create margin/padding. While not a ridiculous suggestion, I would support a css solution instead. Jan 24, 2019 at 6:17
  • Probably the easiest solution, hopefully there are others. Tested beforehand, the system saves the white space, I just couldn't see it active on a website menu.
    – Mythic
    Jan 24, 2019 at 6:35
  • @Mythic Good advice! That gets rid of the icon bumping into the link.
    – Jos
    Jan 24, 2019 at 6:59
  • @Jos You could also try some combinations from the links below just to see if they will work.
    – Mythic
    Jan 25, 2019 at 7:44
0

If you want a CSS solution, create a rule that mimics .fa styling but uses before pseudo-selector. Example for v4:

.fa-example::before {
    font-family: FontAwesome !important;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
    width: 1.28571429em;
    text-align: center;
}

And use it instead of fa class, e.g. fa fa-home becomes fa-example fa-home.

6
  • This looks like best practices. @Jos let us know how you go with this advice. Jan 24, 2019 at 6:55
  • @Sharky: not really. It would work very well on an html site, but this is Joomla. There already is a place where I can inject font awesome. It needs a bit of tweeking.
    – Jos
    Jan 24, 2019 at 6:58
  • I think these links would have helped. (github.com/FortAwesome/Font-Awesome/issues/1606) and (fontawesome.com/how-to-use/on-the-web/styling/stacking-icons). Somehow should have been able to wrap ' ' to create blank space with font awesome code only.
    – Mythic
    Jan 24, 2019 at 6:58
  • No, your usage of icons in Link Class field is wrong. You are applying icon styling to the menu item link. But icon should have a separate element. Your markup now looks something like this: <a href="/" class="fa fa-home">Home</a>. But it should be like this: <a href="/"><span class="fa fa-home"></span> Home</a>. This isn't necessary when using pseudo-selectors.
    – Sharky
    Jan 24, 2019 at 7:17
  • .menu-class > li > a > .fa { margin-right: 0.2rem; } Of course changing menu-class to the classes that is being used for your top menu. Bit more appropriate than recreating your own fa class
    – Lodder
    Jan 24, 2019 at 8:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.