Glyphs and font not loading for designmodo flat-ui in Rails

Question

I'm trying to import Designmodo's Flat-UI (free version) CSS and JS into my Rails project.

I cannot use the gem(s) for the library because some elements do not work properly (I'm assuming the gem(s) are outdated).

I've dropped off the .css and .js files into vendor/assets/, as well as the fonts and glyphicons. I did the same thing for the bootstrap dist/ files so I'm assuming this method is correct.

When I tried to load the glyphs and font in my application.css.scss file like how I would do with the bootstrap glyphs:

@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');
}

The console in Chrome gives me a bunch of 404 Not Found errors for the fonts and glyphs. This was how I tried loading the Flat-UI glyphs:

@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');
}

And this was how I tried to load the Flat-UI font:

@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;
}

Yes I have *=require bootstrap and *=require flat-ui in application.css.scss, and //=require bootstrap and //=require flat-ui in application.js — Richard, Jul 09 '15 at 04:52
Does this post answer your question?: http://stackoverflow.com/questions/10905905/using-fonts-with-rails-asset-pipeline — Ryenski, Jul 10 '15 at 19:06

Karan · Accepted Answer · 2015-07-27T05:53:24.147

I banged my head with this gem for more than 2 hours.

Edit: The fonts are included in the Gem and work this way. No need to declare them explicitly.

Here's a complete working solution. I will assume you are using 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 >= 4.2 is not supported by the flat-ui-sass gem.

Hit the bundle command.

Add this to application.css.scss

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

Add this to application.js

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

Some commands:

cd [your app directory]

mkdir app/assets/fonts

cp -r $(bundle show flat-ui-sass)/vendor/assets/images/ app/assets/images

cp -r $(bundle show flat-ui-sass)/vendor/assets/fonts/ app/assets/fonts/

cp -r $(bundle show flat-ui-sass)/vendor/assets/javascripts/ app/assets/javascripts/

That's it. You should be Up and Running with Flat-UI on Rails.

A helper trick for 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>

Do not run the command on the docs of flat-ui. I have mentioned the commands in 'Some commands:' — Karan, Jul 26 '15 at 07:40
The glyphs still show up as blank boxes and the console is giving me a 404 error. — Richard, Jul 26 '15 at 20:05
Sorry, I did not notice that. You can get rid of explicitly declaring the font-family, The style-sheet imported handles on importing the fonts. There are helper methods for using Glyphs which is mentioned in the edited answer. — Karan, Jul 27 '15 at 05:58
So it looks like the flat-ui-sass gem is missing the latest v2.2 fonts/glyphs/assets. Anyways, I'll mark your response as the answer. Do you know how you would go about modifying the gem to include the new assets from Flat-UI's zip? — Richard, Jul 27 '15 at 16:56

score 0 · Answer 2 · answered Jul 09 '15 at 04:56

0

You can save yourself the headache of managing vendor assets by using the 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';

Source: https://github.com/wingrunr21/flat-ui-sass

answered Jul 09 '15 at 04:56

Ryenski

9,582
3
43
47

I tried using the sass gem as I alluded to in my original post, but some of the components were wacky (i.e. When I tried displaying a star glyph, it would appear as a checkmark glyph) – Richard Jul 10 '15 at 05:05
Sorry I missed that bit in your question. I use the gem and haven't had that problem - it must be something else. – Ryenski Jul 10 '15 at 19:03

Glyphs and font not loading for designmodo flat-ui in Rails

2 Answers2