6

我不知道怎么了。看来我做对了。我正在尝试在我的应用程序中使用Font Awesome，但字体没有出现。我有一个名为的文件夹fonts，application.rb其中包含以下行：

class Application < Rails::Application
 # Enable the asset pipeline
 config.assets.enabled = true
 # This line
 config.assets.paths << Rails.root.join("app", "assets", "fonts")

而不是拥有 Font-Awesome 附带的 2 个 css 文件（更改见下文）（不需要 IE7 文件），我只是将主 css 放在我的application.css. 比我更改 url 来检测字体文件。

@font-face {
  font-family: "FontAwesome";
  src: url('<%= asset_path('fontawesome-webfont.eot') %>');
  src: url('<%= asset_path('fontawesome-webfont.woff') %>') format('woff'), 
  url('<%= asset_path('fontawesome-webfont.ttf') %>') format('truetype'), 
  url('<%= asset_path('fontawesome-webfont.svg#FontAwesome') %>') format('svg');
  font-weight: normal;
  font-style: normal;
}

每次更改代码后，我都关闭了服务器并重新启动，但仍然没有好处。我错过了什么？

更新：

我没有使用 SASS 或 LESS。也许@font-face是问题所在？我以前从未见过这种类型的代码使用。

更新

我现在正在使用 font-awesome.css 文件。但它没有出现在我的源代码中。

<head>
  <link href="/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon">
  <link href="/assets/application.css?body=1" media="screen" rel="stylesheet" type="text/css">
  <link href="/assets/chosen.css?body=1" media="screen" rel="stylesheet" type="text/css">
  <script src="/assets/jquery.js?body=1" type="text/javascript"></script><style type="text/css"></style>
  <script src="/assets/jquery_ujs.js?body=1" type="text/javascript"></script>
  <script src="/assets/application.js?body=1" type="text/javascript"></script>
  <script src="/assets/chosen.jquery.min.js?body=1" type="text/javascript"></script>
</head>

完整答案

这就是你如何让它在正常插入的情况下使用 Font-Awesome。

引用自：https : //gist.github.com/2251151

1. Download font-awesome from https://github.com/FortAwesome/Font-Awesome

2. Put the font folder font folder in the app/assets. I renamed the folder from font to fonts to make it clearer

3. Add config.assets.paths << "#{Rails.root}/app/assets/fonts" to config/application.rb. This is to include the apps/assets/fonts folder in the asset pipeline

4. Put the font-awesome.css file in the app/assets/stylesheets folder

5. The first part of the css should be:

@font-face {
    font-family: 'FontAwesome';
    src: url('fontawesome-webfont.eot');
    src: url('fontawesome-webfont.eot?#iefix') format('embedded-opentype'), 
         url('fontawesome-webfont.woff') format('woff'), 
         url('fontawesome-webfont.ttf') format('truetype'), 
         url('fontawesome-webfont.svgz#FontAwesomeRegular') format('svg'), 
         url('fontawesome-webfont.svg#FontAwesomeRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

#---------------------------------------------------------------------------------------------

You should then be able to use:

<div style="font-size: 24px;">
  <i class="icon-camera-retro"></i> icon-camera-retro
</div>
4

1 回答 1

4

您确实需要将该代码放入 css.scss 文件中，然后将其包含在 application.css 中（您将需要 css.scss 才能使用asset_paths）

更新：您将需要更改*= font-awesome为*= require font-awesome并重命名font-awesome.css为font-awesome.css.scss

于 2012-07-05T01:29:10.423 回答