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

Question

我已经使用以下 link 代码将所有很棒的字体 css 导入我的网站：

<!-- 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" />

然后添加图标使用：

<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>

我的习惯CSS是：

@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;
}

我的目录布局如下：

css > font-awesome > [font awesome 文件夹]

我正在使用的容器具有 class 名称 "main"

但是图标仍然显示为方框 - 是不是我遗漏了什么？

Answer 1

改用这个：

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

如果这解决了您的问题，那么您可能没有将字体上传到正确的目录中，或者您没有正确引用它们。

这里是一个测试，展示了使用 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 2

没有人提到与字体相关的字体文件夹。想想为什么你必须把 ../ 放在背景图片前面，让它知道 img 不包含在 CSS 文件夹中。检查 font-awesome.css 文件并查看它引用字体的位置。

Answer 3

大概是这样的？

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';
  }

来源：类似用途 http://www.google.com/fonts#QuickUsePlace:quickUse

Answer 4

尝试使用  而不是 

在官方文档上：

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

它还说：

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).

虽然听起来用也可以，但在某些情况下不能正常工作，所以还是用是比较稳妥的方案。

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

Font Awesome Showing Box instead of Icons

html

css

fonts