Question

我制作了一个简单的页面来测试问题。我想使用font-awesome图标的子集来使用IcoMoon来生成它。然后我制作了以下.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的官方页面我读到了这个：

使用icon-spin类可以旋转任何图标。适用于 icon-spinner和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

您必须使用var frontPageItems = _repo.AsQueryable().Include(o => o.SubItems).ToList();外观here

的完整CSS

如何使用字体 - 真棒加载图像

1 个答案: