如何从服务器使用 font-awesome

Question

我从 style.css 中删除了所有 @import 规则，但随后我丢失了页面上所有的字体真棒图标。 我想如果我从 www.maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css 复制我的页面实际使用的一小部分，我可以取回它们

图标仍然丢失，我不知道如何在我的 css 中正确恢复它们。我想我需要将实际的图标作为图像复制到我的图像文件夹并通过 css 以某种方式链接到它们，但我没有成功。

这是我复制的部分：

/*!
/ *  Font Awesome 4.1.0 by @davegandy - http://fontawesome.io - @fontawesome*/
@font-face {
font-family: 'FontAwesome';
font-weight: normal;
font-style: normal
}
.fa {
display: inline-block;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale
 }
 @-moz-keyframes spin {
 0% {
 -moz-transform:rotate(0deg)
}
100% {
-moz-transform:rotate(359deg)
}
}
@-webkit-keyframes spin {
0% {
-webkit-transform:rotate(0deg)
}
100% {
-webkit-transform:rotate(359deg)
}
}
@-o-keyframes spin {
0% {
-o-transform:rotate(0deg)
}
100% {
-o-transform:rotate(359deg)
}
}
@keyframes spin {
0% {
-webkit-transform:rotate(0deg);
transform:rotate(0deg)
}
100% {
-webkit-transform:rotate(359deg);
transform:rotate(359deg)
}
}
.fa-play-circle-o:before {
src:url(../images/play-icon.png)
}
.fa-arrow-circle-left:before {
content: "\f0a8"
}
.fa-arrow-circle-right:before {
content: "\f0a9"
}

.fa-angle-up:before {
content: "\f106"
}

然后我什至将所有字体下载到一个 zip 文件夹中，并将解压后的文件夹放在我的服务器上并尝试链接到它，但没有任何结果。

缺少的图标是底部的视频播放图标和顶部箭头。 其他页面上还有更多内容，但一旦我知道如何在不使用 @import 的情况下链接到它们，我就会知道如何做剩下的事情。

非常感谢任何帮助。 金

Answer 1

谢谢大家，问题已经解决了。我有一个错误的字体很棒的库。我从实际站点再次下载它，它要小得多。我没有在标题中放置指向 font-awesome.css 的链接，而是将我需要的所有 font-awesome 规则复制到我的 style.css 中，并删除了一个这样的 css 文件。所有 eot、svf、ttf 等文件都在 fonts 文件夹中，style.css 在 css 文件夹中。使用正确的库，现在一切正常。

还有一个小问题，但它是基于浏览器的，我将就此展开另一次讨论。

感谢大家的贡献。 金

Answer 2

将所有字体文件（不是 CSS 文件）从 font awesome 文件夹（EOT 文件、WOFF 文件等）复制到名为 fonts 的文件夹中，该文件夹应与您的 html 文件所在的目录位于同一目录中并将 font-awesome.css 文件复制到您的 css 文件夹中。 然后在你的部分保留这条线

<link rel="stylesheet" href="css/font-awesome.css" />

Answer 3

您的@font-face 规则缺少指定字体文件所在位置的src 样式：

@font-face {
  font-family: 'FontAwesome';
  font-weight: normal;
  font-style: normal;
  src:
      url('fontawesome-webfont.eot?v=4.1.0');
  src:
      url('fontawesome-webfont.eot?#iefix&v=4.1.0') format('embedded-opentype'),
      url('fontawesome-webfont.woff?v=4.1.0') format('woff'),
      url('fontawesome-webfont.ttf?v=4.1.0') format('truetype'),
      url('fontawesome-webfont.svg?v=4.1.0#fontawesomeregular') format('svg');
}