Font Awesome Showing Box instead of Icons

I've imported all the font awesome css into my website using the following link code:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://ift.tt/1FHelXo" />
 <link href="content/css/font-awesome/css/font-awesome.css" rel="stylesheet" />
<link href="content/css/theme.min.css" rel="stylesheet" />
<link href="content/css/WDWStyles.css" rel="stylesheet" />

And then added the icons using:

<p>Find me at:</p>
<a class="btn btn-primary"><span class="fa fa-twitter"></span> Twitter</a> 
<a class="btn btn-primary"><span class="fa fa-github"></span> Github</a>     
<a class="btn btn-primary"><span class="fa fa-linkedin"></span> Linked in</a>

My directory is laid out as follows:

css > font-awesome > [font awesome folders]

But the icons still display as square boxes - is there something I'm missing?