Font Awesome not working, icons showing as squares
So I'm trying to prototype a marketing page and I'm using Bootstrap and the new Font Awesome file. The problem is that when I try to use an icon, all that gets rendered on the page is a big square.
Here's how I include the files in the head:
<head>
<title>Page Title</title>
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/app.css">
<!--[if IE 7]>
<link rel="stylesheet" href="css/font-awesome-ie7.min.css">
<![endif]-->
</head>
And here's an example of me trying to use an icon:
<i class="icon-camera-retro"></i>
But all that gets rendered in a big square. Does anyone know what could be going on?
Answer
You must have 2 classes, the fa class and the class that identifies the desired icon fa-twitter, fa-search, etc …
<!-- Wrong -->
<i class="fa-search"></i>
<!-- Correct -->
<i class="fa fa-search"></i>