CSS Rangi

Witam posiadam taki kod - Rangi.css :

.ranks.vip {
text-shadow: 1px 1px 10px !important;
    color: #dce00f;
}

i formacie loginu (HTML) wpisuje:

<span class=" ranks vip fa-usd"> {username}</span>

a uzyskuje taki efekt: 


a z tego co wiem to powinienem uzyskać taki:


Cały czas chodzi o ten znacznik " $ "

Proszę o pomoc :0

<span class="ranks vip"><i class="fa fa-usd" aria-hidden="true"></i> {username}</span>