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 in the first image, but not in the second? That styling is not coming from the btn class.
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?
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.