Rails 中的 designmodo flat-ui 未加载字形和字体

Question

我正在尝试将 Designmodo 的 Flat-UI（免费版）CSS 和 JS 导入到我的 Rails 项目中。

我无法将 gem 用于库，因为某些元素无法正常工作（我假设 gem 已过时）。

我已将 .css 和 .js 文件以及字体和字形图标放入vendor/assets/。我对 bootstrap 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 Not Found 错误。这就是我尝试加载 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。

宝石文件：

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 gem 不支持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 应用程序/资产/字体

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/ 应用程序/资产/javascripts/

就是这样。您应该可以使用 Flat-UI on Rails 启动并运行。

Glyphs 的辅助技巧：Flat UI for Sass (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，您可以省去管理供应商资产的麻烦。

宝石文件

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

应用程序.css

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

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