Css 如何加载和使用字体图标？

我正在使用

Rails 4.0.2

和

ruby 2.0.0p247（2013-06-27修订版41674）[x86\u 64-linux]

和标准（内置）Rails服务器，需要一些帮助才能在我的应用程序中加载和使用以下字体图标-

我已经下载了字体文件，并将它们放在

/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>

这是：

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'

重新启动服务器，但没有任何更改

---

有没有人有这样做的经验，可以帮助我？

问题是由于字体文件加载不正确造成的。如果使用

css

文件声明字体类，则需要遵循以下步骤：

在

aplication.rb

文件中添加以下行：

config.assets.paths << Rails.root.join('app', 'vendor','assets', 'fonts')

在我的例子中，我需要另外

要求
css
文件保存字体类声明。在我的
application.css
文件中，我添加了以下行：

*=需要共享/font.css

注意：在我的例子中，
font.css
文件位于
/vendor/assets/stylesheets/shared/
文件夹中

---

如果这确实是您向我们展示的路径，那么您的目标是

shared/fonts

文件夹，而那里没有这样的文件夹。那么你确定字体已经加载了吗？@Drip默认情况下是的，我已经创建了它并将字体文件放在那里。你认为他们的位置不在那里吗：？不，我有点困惑，因为你的字体在

资产/font/

中，但你正试图转到

/vendor/assets/stylesheets/shared/font

，这就是为什么我要问你的字体加载是否正确。第二个路径

/vendor/assets/stylesheets/shared/fonts.css

是一个单独的

css

文件的路径，该文件正在加载字体文件。在应用程序css文件中，该

font.css

文件是必需的。

config.assets.paths << Rails.root.join('app', 'vendor','assets', 'fonts')

@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;
}