css - 如何使用字体-awesome加载图片

Question

我做了一个简单的页面来测试这个问题。我想使用 font-awesome 图标的子集来生成它。然后我制作了以下 .css 文件:

@font-face {
        font-family: 'fontawesome-webfont';
src: url('file:///C:/Users/i/Desktop/fontawesome-webfont.eot');
src: url('file:///C:/Users/i/Desktop/fontawesome-webfont.eot?#iefix'), 
     url('file:///C:/Users/i/Desktop/fontawesome-webfont.woff'), 
     url('file:///C:/Users/i/Desktop/fontawesome-webfont.ttf'), 
     url('file:///C:/Users/i/Desktop/fontawesome-webfont.svg#FontAwesome') format('svg');
    font-weight: normal;
    font-style: normal;
}

在我的 .html 文件中，我有相关的 css :

<style>
.icon:after {
    content : '\f110';
    font-family: 'fontawesome-webfont';
}
</style>

和 html:

<span class="icon"></span>
<br />

这样我就可以看到图像，但它是静态的。从 fonts-awesome 的官方页面我读到了这个:

Use the icon-spin class to get any icon to rotate. Works well with icon-spinner and icon-refresh.

以及以下示例:

<i class="icon-spinner icon-spin icon-large"></i> Spinner icon when loading content...

以上内容对我没有任何作用。所以我复制粘贴了 .icon-spin 的样式，这似乎是:

-moz-animation: spin 2s infinite linear;
-o-animation: spin 2s infinite linear;
-webkit-animation: spin 2s infinite linear;
animation: spin 2s infinite linear;
animation-name: spin;
animation-duration: 2s;
animation-timing-function: linear;
animation-delay: initial;
animation-iteration-count: infinite;
animation-direction: initial;
animation-fill-mode: initial;
animation-play-state: initial;

到我的.icon类，但图像仍然没有旋转。显然我做错了，那么在这个简单的例子中如何使图像旋转呢？唯一的要求是使用 content : '\f110'; 样式，因为我看到了几种包含字体的方法，而这是我坚持使用的一种。

Answer 1

你必须使用font-awesome的完整CSS外观here