Question

我已使用以下链接代码将所有字体真棒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＆gt; font-awesome＆gt; [font awesome folders]

我使用的容器有类名＆＃34; main＆＃34;

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

Answer 1

尝试使用而不是

官方文件：

启动并运行后，您可以放置Font Awesome图标关于标记的任何地方。

它还说：

您可以使用CSS在任何地方放置Font Awesome图标前缀fa和图标的名称。 Font Awesome旨在使用内联元素（为简洁起见，我们喜欢标记，但使用的是 在语义上更正确。）

虽然听起来使用也是可以接受的，但在某些情况下它无法正常工作，因此留在是一个更安全的计划。

Answer 2

请改用：

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

如果这样可以解决您的问题，那么您要么没有将字体上传到正确的目录中，要么就是错误地引用了这些字体。

这是一个测试，显示使用字体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

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

Answer 4

也许是这样的？

HTML链接

<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

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

4 个答案: