如何使用字體 - 真棒加載圖像

我做了一個簡單的頁面來測試問題。我想使用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的官方頁面我看到：

使用圖標旋轉類來獲取任何圖標旋轉。適用於圖標微調器和圖標刷新。

而下面的例子：

<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';風格，因爲我看到了幾種包含字體的方法，這是我堅持的方法。

來源

2015-12-04 Leron

你必須使用完整的CSS font-awesome看here

來源

2015-12-04 09:31:57

我看不到的CSS，這似乎顯示爲空白。你能幫我解決這個問題嗎，或者只是將它複製粘貼到你的答案中？ – Leron

你必須使用Font-Awesome的完整css文件 –

你可以從他的網站下載它，在這裏鏈接：https://fortawesome.github.io/Font-Awesome/ –

如何使用字體 - 真棒加載圖像

回答

相關問題