如何从服务器使用 font-awesome

Question

我从我的 style.css 中删除了所有 @import 规则，但随后我丢失了我页面上的所有超赞字体图标。我想如果我从 www.maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css

复制我的页面实际使用的小部分，我可以找回它们

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

这是我复制的部分：

/*!
/ *  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 文件夹中，并将解压缩的文件夹放在我的服务器上并尝试 link 到它，但没有任何结果。

缺少的图标是底部的视频播放图标和到顶部的箭头。其他页面上还有更多内容，但是一旦我知道如何在不使用 @import 的情况下对它们进行 link，我就会弄清楚如何进行其余操作。

非常感谢任何帮助。金

Answer 1

您的 @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');
}

Answer 2

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

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

Answer 3

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

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

感谢大家的贡献。金

如何从服务器使用 font-awesome

How to use font-awesome from server

html

css

fonts

font-awesome