Prefix font issue

cannabis ape

Customer
I tried to solve this with the writer of the guide but we couldn't find out the issue and asked me to ask the theme developer so here I am :).

This is the thing I implemented https://xenforo.com/community/resources/add-font-awesome-icons-to-your-prefix.5892/

In the preview it actually shows how it should look, it's nice in the middle with the correct padding and font but when I place it it's a different font and size.



The default one displays correctly

 

Russ

Pixel Exit Staff
I wouldn't follow his advice personally.

Code:
.label.label--primary:before {
    content: "\f07c";
    font-family: FontAwesome;
    padding-right: 5px;
    font-weight: normal;
}

Just use manual CSS, no need to edit the prefix class. His is basically trying to use the font family FontAwesome for the normal text.
 

Russ

Pixel Exit Staff
Well, OFC I didn't :D

But if I remove that CSS in prefix, how will I get a FA icon before the text?

Just do what I say :D, remove the fa tag, add my CSS I gave you.

It's inserting the icon via CSS. You'll need to add the CSS for each prefix you want an icon for.
 

cannabis ape

Customer
Yes. In extra.less I replaced his code with yours. But in the prefix section I still need to add something to "Other, using custom CSS class name" name and yes you need to tell me what. I know things for you automatically makes sense but it doesn't for me.
 

Russ

Pixel Exit Staff
Yes. In extra.less I replaced his code with yours. But in the prefix section I still need to add something to "Other, using custom CSS class name" name and yes you need to tell me what. I know things for you automatically makes sense but it doesn't for me.

Are you using the default color classes or just a custom one? If you're using a custom one you can label it "customPrefix1", then the CSS for the icon:

Code:
.label.customPrefix1:before {
    content: "\f07c";
    font-family: FontAwesome;
    padding-right: 5px;
    font-weight: normal;
}

Of course, doing custom ones you need to add your own styling (color wise)
 

Pre-Sale Questions

If you have any questions or concerns you want to ask before you make a purchase don't hesitate to use one of our multiple support channels for your convenience.