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

Improve this question
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?) – mickmackusa♦ Jan 24 '19 at 4:16
  • Can't you just add   after the icon? – Mythic Jan 24 '19 at 4:31
  • @Mythic Of course I tried that. If I do, font awesome doesn't show. – Jos Jan 24 '19 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. – mickmackusa♦ Jan 24 '19 at 5:13
1

Add   to the beginning of the Menu Title.

Improve this answer
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. – mickmackusa♦ Jan 24 '19 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 '19 at 6:35
  • @Mythic Good advice! That gets rid of the icon bumping into the link. – Jos Jan 24 '19 at 6:59
  • @Jos You could also try some combinations from the links below just to see if they will work. – Mythic Jan 25 '19 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.

Improve this answer
6
  • This looks like best practices. @Jos let us know how you go with this advice. – mickmackusa♦ Jan 24 '19 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 '19 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 '19 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 '19 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 '19 at 8:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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