Adding font-awesome icon :before

Ok so i want to add a font-awesome icon :before before my button text. This is the image

The icon is called th and has a unicode of f00a. Never done this before so would appreciate any help.

The before pseudo selector requires two colons like so…

button::before {
  content: "\f00a";

Hope this helps

Dosen’t work

Im still getting this weird box before

Have you checked to see that font-awesome has successfully linked/loaded to your source code? Perhaps try adding it as a class on an elemnt in HTML as a test. If it works, there may be some kind of error with the unicode or it’s required format. If it doesn’t work, than it’s safe to assume font-awesome is not linked to your webpage. Let me know how you go.

It has to be linked since or else i wouldnt see the other icons that i have on my site. I tried to delete the link to font-awesome and as expected all icons was gone.

1 Like

In this case it would be the “content” css declaration, something with the uni code. Have you attempted loading the icon as a class in HTML?

I don’t really understand what you mean :frowning: . It’s loaded in my html file it’s on the website. Now i want it before button. This is the code and the icon in red.

i want it to be like this

Where the icon is before view our works. I could to position:absolute and get it there but i want to use the :before. (codepen if it could help)

You can load the icons through the HTML as oppose to the CSS, you just need to search for the icon and find the appropriate class name


<button> <i class="fas fa-iconName"></i> View Our Works</button>

Search the icon you are trying to use and look for it’s class name up near the icon title

class="fas fa-helicopter" in the example below


This link may also be of some help

I edited the pen and forked it. You are welcome to go through and have a look (I will remove when you have fixed your problem)

I removed the button::before and I moved the icon you had after the button in the HTML to be nested inside the button element.


1 Like

Mhm interesting i got it working. Didn’t think that was the answer to it.

1 Like