Font awesome as CSS background image


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 , but I can't code like this.

This is the icon I want to use:

Please can you help work out what I have done wrong?
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

petewinterAuthor Commented:
Perfect. Many thanks
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.