Special Icon – Custom field styling does not work

Hi support team,

I have setup special icons according to your Custom field examples and I am running to the problem, that these are now working in my setup.

screenshots:
– settings – http://screencast.com/t/dhkRyMNXG
– style css – screen shot http://screencast.com/t/XIKcSwwQu1

Listing label icon styles are setup within customized style.css
(from line 203 – 738)

find here a code example for price range

/* Range label style */
.geodir_category_price_range {
float: left;
display: inline; 
clear:none !important;
margin: 3px 3px 3px 0px;
border-radius: 5px;
background: none repeat scroll 0 0 green;
color: #fff;
font-weight: 400;
width: 40px;
text-align: center;
padding: 6px 0 !important;
}
.geodir_category_price_range .geodir-i-select {
    display: none;
}

find here a code example for visa card symbol

/* Payment CC Visa label style */
.geodir_payment_visa_credit_card {
float: left;
display: inline; 
clear:none !important;
margin: 3px 3px 3px 0px;
border-radius: 5px;
border: 1px solid #333333;
background: white;
color: transparent;
width: 38px;
text-align: center;
background-position: 3px;
height: 18px;
}
.geodir_payment_visa_credit_card:before {
font-family: FontAwesome;
content: "f1f0"; 
color: #333333;
font-size: 18px;
padding-left: 8px;
}
.geodir_payment_visa_credit_card .geodir-i-checkbox {
display: none;
}

Do I need to download the font FontAwesome fonts to use them and where shall I place them?

Looking forward to your help to enable the display of special icons on my site.

Thanks, Alex