Prefix font issue

[cannabis ape]

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]

I wouldn't follow his advice personally.

.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.

 

[cannabis ape]

Did I need to change anything else? Replace it with your code but no difference.

 

[Russ]

Did you remove the FA code from your prefix class names?

 

[cannabis ape]

Did you remove the FA code from your prefix class names?

Well, OFC I didn't

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

 

[Russ]

Well, OFC I didn't

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

Just do what I say , 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]

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]

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:

.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)

 

[Russ]

Also just a heads up, the icon is being set by the content: "\f###";, check out:

https://fontawesome.com/v4.7.0/cheatsheet/ for all the icons, you won't be setting the icon name in the class but using the content.