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

我的网站位于taikuri Kim Wist，缺少的图标是底部的视频播放图标和顶部箭头。其他页面上还有更多内容，但是一旦我知道如何在没有@import的情况下链接到它们，我将会弄清楚如何进行其余的操作。

非常感谢任何帮助。金

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文件）从字体awesome文件夹（EOT文件，WOFF文件等）复制到名为fonts的文件夹中，该文件夹应与html文件所在的目录位于同一目录中找到并将font-awesome.css文件复制到您的css文件夹中。然后在你的部分

上保留这一行

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

Answer 3

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

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

谢谢大家的贡献。金

如何从服务器使用font-awesome

3 个答案: