Adding font-awesome icon :before

HTML-CSS
1

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

https://gyazo.com/e3362db4b1f73c809ca3e86e2f3c8ef0

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

2

The before pseudo selector requires two colons like so…

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

Hope this helps

3

Dosen’t work
https://gyazo.com/01a3d146bb70898efaf5b8ffc3869abe

Im still getting this weird box before

4

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.

5

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
6

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?

7

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. https://gyazo.com/76cd2063db78d517713dc3979ae6076c

i want it to be like this https://gyazo.com/ae76b496192e0c8592a01667a99e9df4

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

https://codepen.io/sebbe/pen/RqLNNE (codepen if it could help)

8

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

Example

<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

icon

This link may also be of some help

9

I edited the pen and forked it. You are welcome to go through and have a look
https://codepen.io/Kyle-Thompson/pen/vQeEGv (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.

view

1 Like
10

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

1 Like