如何加載和使用字體圖標？

我正在使用Rails 4.0.2和ruby 2.0.0p247 (2013-06-27 revision 41674) [x86_64-linux]和標準（內置）導軌服務器，並且需要一些幫助來加載和使用我的應用程序中的以下字體圖標 - http://fontello.com/。如何加載和使用字體圖標？

我已經下載了字體文件並將它們放在/vendor/assets/fonts/文件夾中。然後在/vendor/assets/stylesheets/shared/fonts.css文件我已經添加下面的代碼：

@font-face { 
    font-family: 'fontello'; 
    src: url('fonts/fontello.eot'); 
    src: url('fonts/fontello.eot?#iefix') format('embedded-opentype'), 
    url('fonts/fontello.woff') format('woff'), 
    url('fonts/fontello.ttf') format('truetype'), 
    url('fonts/fontello.svg#icons') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
}

，似乎一切都得到正確加載，因爲沒有在瀏覽器控制檯的任何錯誤。

然後，使用HTML下面我試圖得到一些圖標：

<div> 
    <span data-icon="0xe800">test</span> 
    <span data-icon="icon-emo-happy">test</span> 
    <a href="##url##">0xe809</a> 
</div>

但現在的圖標顯示araE的 - 只是文本（我不知道這是加載它們的正確方法）。

在文檔表示：

通常，apache已經擁有必要的設置，但nginx和其他Web服務器應該調整。下面是我們的文件擴展MIME類型的列表：

application/vnd.ms-fontobject - EOT

application/x-font-woff - WOFF

application/x-font-ttf - TTF

image/svg+xml - SVG

所以， /config/initializers/mime_types.rb文件我試試這個：

Mime::Type.register_alias "application/vnd.ms-fontobject", :eot 
Mime::Type.register_alias "application/x-font-woff", :woff 
Mime::Type.register_alias "application/x-font-tt", :ttf 
Mime::Type.register_alias "application/image/svg+xml", :svg

這：

Rack::Mime::MIME_TYPES['.eot'] = 'application/vnd.ms-fontobject' 
Rack::Mime::MIME_TYPES['.woff'] = 'application/x-font-woff' 
Rack::Mime::MIME_TYPES['.ttf'] = 'application/x-font-ttf' 
Rack::Mime::MIME_TYPES['.svg'] = 'image/svg+xml'

與服務器重啓，但一切都沒有改變。

有沒有人有這樣做的經驗，並可以幫助我？

來源

2014-04-03 gotqn

如果這確實是您向我們展示的路徑，那麼您的目標是'shared/fonts'文件夾，並且在那裏沒有這樣的文件夾。那你確定字體已經加載了嗎？ – drip

@Drip默認情況下，我創建了它並將字體文件放在那裏。你認爲他們的地方不在那裏：？ – gotqn

不，我有點困惑，因爲你的字體在'assets/fonts /'中，但你正在嘗試去'/ vendor/assets/stylesheets/shared/fonts'，這就是爲什麼我問你的字體是否正在加載正常。 – drip

該問題是由字體文件未正確加載引起的。如果您正在使用css文件中聲明你的字體類，需要遵循以下步驟：

在你aplication.rb文件中添加以下行：
```
config.assets.paths << Rails.root.join('app', 'vendor','assets', 'fonts') 
```
在上述情況下，字體文件在app/vendor/assets/fonts文件夾中。

當聲明的字體類使用這樣的URL assets + font name參考：

@font-face { 
    font-family: 'fontello'; 
    src: url('/assets/fontello.eot'); 
    src: url('/assets/fontello.eot?#iefix') format('embedded-opentype'), 
    url('/assets/fontello.woff') format('woff'), 
    url('/assets/fontello.ttf') format('truetype'), 
    url('/assets/fontello.svg#icons') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
}

在我來說，我需要額外require的css文件來保存字體類的聲明。在我application.css文件，我已經添加下面的一行：

* =需要共享/ fonts.css

注：在我的情況下font.css文件是/vendor/assets/stylesheets/shared/文件夾中。

來源

2014-04-05 10:05:05 gotqn

如何加載和使用字體圖標？

回答

相關問題