在Rails中designmodo flat-ui无法加载字形和字体

Question

我试图导入Designmodo的平面ui(免费版)CSS和JS到我的Rails项目。

我不能使用gem(s)库，因为一些元素不能正常工作(我假设gem(s)是过时的)。

我把。css和。js文件放到了vendor/assets/中，还有字体和象形符号。我为引导dist/文件做了同样的事情，所以我假设这个方法是正确的。

当我试图在我的application.css.scss文件中加载字形和字体时，就像我如何使用引导字形一样:

@font-face {
    font-family: 'Glyphicons Halflings';
    src: url('../assets/glyphicons-halflings-regular.eot');
    src: url('../assets/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), 
    url('../assets/glyphicons-halflings-regular.woff') format('woff'), 
    url('../assets/glyphicons-halflings-regular.ttf') format('truetype'), 
    url('../assets/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

Chrome的控制台给了我一堆404未找到的字体和字形错误。这是我尝试加载Flat-UI字形的方式:

@font-face {
    font-family: 'flat-ui-icons';
    src: url('../assets/flat-ui-icons-regular.eot');
    src: url('../assets/flat-ui-icons-regular.eot?#iefix') format('embedded-opentype'), 
    url('../assets/flat-ui-icons-regular.woff') format('woff'), 
    url('../assets/flat-ui-icons-regular.ttf') format('truetype'), 
    url('../assets/flat-ui-icons-regular.svg#glyphicons_halflingsregular') format('svg');
}

我是这样加载Flat-UI字体的:

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

Answer 1

我用这块宝石敲了两个多小时的头。

编辑:字体包含在Gem中并以这种方式工作。不需要显式声明它们

这是一个完整的工作解决方案。我假设您使用的是Rails 4。

Gemfile:

gem 'flat-ui-sass', github: 'wingrunr21/flat-ui-sass'
gem 'bootstrap-sass', '~> 3.3.5'
gem 'sass-rails', '~> 4.0'
gem 'jquery-rails'

flat-ui-sass不支持

sass-rails>= 4.2

点击bundle命令

添加到application.css.scss

@import "flat-ui/variables";
@import "bootstrap-sprockets";
@import "bootstrap";
@import "flat-ui";

添加到application.js

//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require flat-ui
//= require_tree .

一些命令:

cd[你的应用目录]

mkdir app/资产/字体

cp -r $(bundle show flat-ui-sass)/vendor/assets/images/应用程序/资产/图片

cp -r $(bundle show flat-ui-sass)/vendor/assets/fonts/应用程序/资产/字体/

cp -r $(bundle show flat-ui-sass)/vendor/assets/javascripts/应用程序/资产/javascript/

就是这样。你应该在Rails上使用Flat-UI。

字形的辅助技巧:Sass的平面UI (Ruby Gem)

fui_icon "heart"
# => <i class="fui-heart"></i>
fui_icon "heart", tag: :span
# => <span class="fui-heart"></span>
fui_icon "heart", text: "Flat-UI!"
# => <i class="fui-heart"></i> Flat-UI!
fui_icon "arrow-right", text: "Get started", right: true
# => Get started <i class="fui-arrow-right"></i>
fui_icon "photo", class: "pull-left"
# => <i class="fui-photo pull-left"></i>
fui_icon "user", data: { id: 123 }
# => <i class="fui-user" data-id="123"></i>
content_tag(:li, fui_icon("check", text: "Bulleted list item"))
# => <li><i class="fui-check"></i> Bulleted list item</li>

Answer 2

通过使用flat-ui-sass gem，您可以省去管理供应商资产的麻烦。

Gemfile

gem 'flat-ui-sass', github: 'wingrunr21/flat-ui-sass'

application.css

@import 'flat-ui/variables';
@import 'bootstrap';
@import 'flat-ui';

来源:https://github.com/wingrunr21/flat-ui-sass