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?

Solution 1:

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>

Solution 2:

According to the documentation (step 3), you need to modify the supplied CSS file to point to the font location on your site.

Font Awesome not working, icons showing as squares

Solution 1:

Solution 2:

Related

Recent Posts