Question

我试图将Designmodo的Flat-UI（免费版）CSS和JS导入我的Rails项目。

我无法使用图书馆的宝石，因为有些元素无法正常工作（我假设宝石已过时）。

我已将.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

我用这颗宝石撞了我的头超过2个小时。

编辑：字体包含在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'

sass-rails gem不支持

flat-ui-sass＆gt; = 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 / assets / fonts

cp -r $（捆绑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启动并运行。

字形的帮助技巧：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，您可以省去管理供应商资产的麻烦。

的Gemfile

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

application.css

$scope.loadApplications = function () {
      var cacheKey = { key: cacheKeys.appList() };
      dataFactory.get("/Application/All", { cache: cacheKey })
             .then(function (result) {
                 $scope.count++;                     
                 $scope.applications = result.data.data;
                 $scope.filteredApplicationsList = $scope.applications;
                  if ($scope.applications.length===0){
                     $window.location.href = '/Account/WelCome'
                 }
                 else {
                     $scope.isLoad = true;
                  }

             });
  };

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

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

2 个答案: