<div>
<div class="content wysiwyg-content">
See <a href="http://fsswp.petewinter.com/contact-us/" rel="ugc">http://fsswp.petewinter.com/contact-us/</a><br />
<br />
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.<br />
<br />
See this page for how it should look <a href="http://fss.petewinter.com/contact_us.html" rel="ugc">http://fss.petewinter.com/contact_us.html</a>&nbsp;, but I can't code like this.<br />
<br />
This is the icon I want to use: <a href="https://fontawesome.com/icons/cloud-upload-alt?style=solid" rel="ugc">https://fontawesome.com/icons/cloud-upload-alt?style=solid</a><br />
<br />
Please can you help work out what I have done wrong?
</div>
</div>


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?

Font awesome as CSS background image

Cascading Style Sheets (CSS) is a language used for describing the look and formatting of a document written in a markup language. Usually used to change web pages and user interfaces written in HTML, it can also be applied to any kind of XML document. CSS is designed primarily to distinguish the content of a document from its presentation.

A font is a particular size, weight and style of a typeface. Each font is a matched set of type, one piece (called a "sort") for each glyph, and a typeface consists of a range of fonts that share an overall design. With the advent of digital typography, font is frequently synonymous with typeface, although the two terms do not necessarily mean the same thing. In particular, the use of "vector" or "outline" fonts means that different sizes of a typeface can be dynamically generated from one design. Each style may still be in a separate "font file" -- for instance, the typeface "Futura" may include the fonts "Futura roman", "Futura italic", "Futura bold" and "Futura extended" —- but the term "font" might be applied either to one of these alone or to the whole typeface.