Lea*_*RoR 6 ruby ruby-on-rails ruby-on-rails-3.1 font-awesome
我不知道出了什么问题.好像我做得对.我正在尝试在我的应用程序中使用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")
比,而不必附带字体-真棒2个CSS文件(CHANGED见下文)(并不需要IE7一个)我只是把主要的CSS我的脑海中application.css.比我更改网址以检测字体文件.
@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是问题？我之前从未见过这种类型的代码.
UPDATE
我现在正在使用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>
您确实需要将该代码放入 css.scss 文件中，然后将其包含在 application.css 中（您将需要 css.scss 才能使用 asset_paths）
更新：您需要更改*= font-awesome为*= require font-awesome并重命名font-awesome.css为font-awesome.css.scss
| 归档时间： |
|
| 查看次数： |
2695 次 |
| 最近记录： |