字体真棒显示框而不是图标

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?

Answer 1

Try to use <i class="fa fa-twitter"> rather than <span class="fa fa-twitter">

On the official doc:

After you get up and running, you can place Font Awesome icons just about anywhere with the <i> 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 <i> tag for brevity, but using a <span> is more semantically correct).

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

Answer 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 

Answer 3

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.

Answer 4

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