Font awesome as CSS background image

See http://fsswp.petewinter.com/contact-us/

Look at the file upload area. The grey mark in the middle should be a font awesome icon. I need to set this as a background image using the css :before selector. However it is not showing.

See this page for how it should look http://fss.petewinter.com/contact_us.html , but I can't code like this.

This is the icon I want to use: https://fontawesome.com/icons/cloud-upload-alt?style=solid

Please can you help work out what I have done wrong?
petewinterAsked:
Who is Participating?
 
Brandon LyonSenior Frontend DeveloperCommented:
1. It looks like they're loading different font files (v4.7 vs 5+) which have different icon sets. The code for cloud-upload on 4.7 is \f0ee not \f382 or \25ae
2. The font name in your 4.7 CSS file isn't "Font Awesome\ 5 Free" it's "FontAwesome".

.gform_drop_area:before {
  content: "\f0ee";
  font-family: "FontAwesome";
}

Open in new window

0
 
petewinterAuthor Commented:
Perfect. Many thanks
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.