Question

FontAwesome icon doesnt show next to button because of standard classname btn

1

Hello everyone, I want an icon of FontAwesome appear next to the button, but it doesn’t show because the button itself has a standard classname btn. It only shows when I remove the classname btn when I do inspect element on it. But I don’t know how I can do this permanently… Does anyone have an idea or workaround to fix this? I specifically want to use FontAwesome icons because there are icons that I want to use which bootstrap glyphicons do not have. Kind regards, Chris

asked 2020-02-07

Chris Man

3 answers

Wesley Sieses · Answer 1 · 2020-02-07

Hi Chris,

It’s hard to say what’s the cause of this issue without additional information.

How did you add the font awesome icon? What other styling are you applying? Are you using Atlas UI? Why is the caption of the button uppercase inthe first image, but not in the second? That styling is not coming from the btn class.

Cheers,

Wesley

Chris Man · Answer 2 · 2020-02-11

Hi Wesley,

Thanks for replying.

First of all, to make use of the FontAwesome icons I added the fontawesome stylesheet in the head of my index.html file.

The only properties that I’ve defined in my class btn are: font-family, font-size, font-weight, font-style and text-transform. Class btn is located in my _typography.scss if that matters.

And yes I’m using Atlas UI.

The reason why the first button is in uppercase is because it contains the class btn, which I’ve explained here above; it contains text-transform: uppercase;

The second button is not in uppercase because I removed the classname btn by doing inspect element in browser.

So only the FontAwesome “repeat” icon appears next to the button when the classname btn is removed → See the second button.

And it doesn’t appear when the classname btn is applied to the button → See the first button.

Any idea how I can add the FontAwesome icon next to the button?

Kind regards,

Chris

Juan Manuel Monteagudo · Answer 3 · 2021-09-09

Hi Chris, have you already found the solution for this issue? I have the same problem and would be great if you could share how you solved it.

Thanks!