Font Awesome Showing Box instead of Icons

Question

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="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
 <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 custom CSS is:

@font-face {
    font-family: 'headline_onehplhs';
    src: url('fonts/HEADOH__-webfont.eot');
    src: url('fonts/HEADOH__-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/HEADOH__-webfont.woff2') format('woff2'),
         url('fonts/HEADOH__-webfont.woff') format('woff'),
         url('fonts/HEADOH__-webfont.ttf') format('truetype'),
         url('fonts/HEADOH__-webfont.svg#headline_onehplhs') format('svg');
    font-weight: normal;
    font-style: normal;

}

body {
  background-image: url('../images/background.jpg');
  background-position: top center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

.heading {
    background-color:#FFF;
    font-family: 'headline_onehplhs';
    font-size:3.5em;
    margin-left:50px;
    margin-top:50px;
    padding:20px;
    color:#000;
}

.heading span, .main span {
    background-color:#FFF;
    font-family: 'headline_onehplhs';
    color:#999;
    font-size:0.5em;
    display:block;
}

.main span {
    font-size:1.75em;
}

.main {
    background-color:#FFF;
    margin-left:50px;
    margin-top:25px;
    padding:20px;
    text-align:justify;
}

My directory is laid out as follows:

css > font-awesome > [font awesome folders]

And the container that I'm using has the class name "main"

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

possible duplicate of [Font-Awesome icons not rendering via the BoostrapCDN](http://stackoverflow.com/questions/22002238/font-awesome-icons-not-rendering-via-the-boostrapcdn) — Paulie_D, Mar 29 '15 at 15:44
What about your CSS to assign the font? something like fa {font-family:} — meck373, Mar 29 '15 at 15:46
This isn't an answer.... but I would suggest you start using svg sprites. The icon fonts are finicky in general. fontastic.me is pretty great... — sheriffderek, Mar 29 '15 at 15:47
Why you need cdn along with font-awesome css that you have on your directories ? — Konrud, Mar 29 '15 at 15:47
Works! Thanks - if you post that as an asnwer I'll check it off as the right answer ;) - thanks again! — Web Develop Wolf, Mar 29 '15 at 18:13

score 4 · Accepted Answer · answered Mar 29 '15 at 19:41

Try to use  rather than 

On the official doc:

After you get up and running, you can place Font Awesome icons just about anywhere with the  tag.

It also says:

You can place Font Awesome icons just about anywhere using the CSS Prefix fa and the icon's name. Font Awesome is designed to be used with inline elements (we like the  tag for brevity, but using a  is more semantically correct).

Although it sounds like using  is also acceptable, but it does not work correctly in some cases, so stay with  is a safer plan.

xengravity · Answer 2 · 2015-03-29T17:07:12.473

2

Use this instead:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

If that fixes your problem, then you either didn't upload the fonts in the correct directory or you are referencing them incorrectly.

Here is a test showing the minimum code required to use font awesome:

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/>

<i class="fa fa-camera-retro fa-lg"></i> fa-lg
<i class="fa fa-camera-retro fa-2x"></i> fa-2x
<i class="fa fa-camera-retro fa-3x"></i> fa-3x
<i class="fa fa-camera-retro fa-4x"></i> fa-4x
<i class="fa fa-camera-retro fa-5x"></i> fa-5x

edited Mar 29 '15 at 17:07

answered Mar 29 '15 at 15:50

xengravity

3,501
18
27

If that doesn't work for you, something is blocking your connection. Are you using any sort of adblockers or extra security settings on your browser? Try using the CDN on a different browser. – xengravity Mar 29 '15 at 16:53
I'm running this on Firefox and all I have additionally is a few Web Dev plug-ins - tried on a different browser (Chrome) which is standard, and still I get the same issue – Web Develop Wolf Mar 29 '15 at 16:55
Check my edit to the answer. Can you see the camera icons in the example? – xengravity Mar 29 '15 at 17:07
If you can see it, then something else other than the code you've shown us is the issue. – xengravity Mar 29 '15 at 17:13
I'll edit the question and post any relevant CSS to that page/section as that's the only thing I can think I have left that could be getting in the way – Web Develop Wolf Mar 29 '15 at 17:14
My guess is that it's something to do with your environment. If you can copy paste the code I have above, remove all of your custom CSS and it doesn't work for you, it is something beyond your code. Possibly something on your browser, OS, or network level. – xengravity Mar 29 '15 at 17:19

score 1 · Answer 3 · answered Mar 29 '15 at 15:50

1

Noone has mentioned the font folder in relation to the fonts. Think like why in you have to put ../ in front of background image to let it know that the img Is not contained in the CSS folder. Check the font-awesome.css file and see where it Is referencing the fonts.

answered Mar 29 '15 at 15:50

blayderunner123

306
2
11

The Font Awesome CSS is referencing the fonts like this: src: url('../fonts/fontawesome-webfont.eot?v=4.3.0'); and the folder structure is Root > Content > Css > font-awesome > [font awesome folders] My css is in the Content > CSS folder – Web Develop Wolf Mar 29 '15 at 16:13
God bless you! I had wrong path (folder name) in my fontawesome.min.css file. – suz Jul 04 '18 at 20:09

score 1 · Answer 4 · answered Mar 29 '15 at 15:52

Maybe like this?

HTML link

<link href='content/css/font-awesome/css/font-awesome.css?family=font+awesome' rel='stylesheet' type='text/css'>

CSS

fa{
   font-family: 'font awesome';
  }

Source: similar use http://www.google.com/fonts#QuickUsePlace:quickUse

score 1 · Answer 5 · answered Feb 09 '23 at 21:14

in AspNetCore (.net 7), I had this problem showing a box instead of the fontawesome icon. I'm using NPM to gulp the package and copy to wwwroot/css/fontawesome. After adding the correct links to the _Hosts.cshtml everything looks good.

<link href="/css/fontawesome/css/fontawesome.css" rel="stylesheet" />
<link href="/css/fontawesome/css/solid.css" rel="stylesheet" />

In development mode, I noticed 404 on the webfont files. After more research, I found that the mime types were not configured properly. Adding the following to program.cs, the problem is solved:

app.UseHttpsRedirection(); //Existing

// Set up custom content types - associating file extension to MIME type
var provider = new FileExtensionContentTypeProvider();
// Add new mappings
provider.Mappings[".ttf"] = "font/ttf";
provider.Mappings[".woff"] = "font/woff";
provider.Mappings[".woff2"] = "font/woff2";

app.UseStaticFiles(new StaticFileOptions
{
    ContentTypeProvider = provider
});


app.UseRouting(); //Existing

Thanks. Had the same problem. Needed to include both fontawesome.min.css AND solid.min.css. — Eternal21, May 06 '23 at 00:07

Font Awesome Showing Box instead of Icons

5 Answers5

Linked