i am trying to get the zurb foundation icon fonts to work within my rails project, though they dont appear to be working correctly
general_foundicons.css.sass
/* font-face
#font-face
font-family: "GeneralFoundicons"
src: font-url("general_foundicons.eot")
src: font-url("general_foundicons.eot?#iefix") format("embedded-opentype"), font-url("general_foundicons.woff") format("woff"), font-url("general_foundicons.ttf") format("truetype"), font-url("general_foundicons.svg#GeneralFoundicons") format("svg")
font-weight: normal
font-style: normal
i have these files in app/assets/fonts though the fonts dont appear to be getting loaded
I use the foundation-icons-sass-rails gem. Extracting from their README:
Add foundation-icons-sass-rails gem to the assets group in your Gemfile:
group :assets do
gem 'sass-rails', " ~> x.x.x"
gem 'coffee-rails', "~> x.x.x"
gem 'uglifier'
gem 'foundation-icons-sass-rails'
end
Then rename your app/assets/stylesheets/application.css to app/assets/stylesheets/application.css.scss and add:
#import 'foundation-icons';
Now, you can use it as follows:
<i class="fi-[icon]"></i>
Edit
In Rails 4 you don't need an assets group. Additionally, make sure to install the latest version of the gem (3.0.0 as of 2014):
gem 'sass-rails', " ~> x.x.x"
gem 'coffee-rails', "~> x.x.x"
gem 'uglifier'
gem 'foundation-icons-sass-rails' ~> 3.0.0
Have you added your new fonts folder to the asset pipeline in config/application.rb? After that, I would try putting the block after #font-face in curly brackets and adding semicolons to the end of the other lines. If that doesn't do it, rewrite the src lines to src: url(font-path("general_foundicons.eot")) and so on, all as recommended at this helpful link.
Related
I'm trying to implement Bootstrap (for the first time) to my very simple rails application.
After following common setup instructions the app's look has not changed
The app is located here:
https://github.com/johnwaltonvi/omrails2
My initial setup went as followed...
1. Add bootstrap gem to "Gemfile"
2. Run "bundle install"
3. Create new file under app>assets>stylesheets.
This file is called "styles.css.scss"
4. Add "#import 'bootstrap';" to "styles.css.scss"
5. Restart Server
After starting up the app again, it still looks the exact same as before installing bootstrap.
I expected bootstrap to overwrite the font, text & links.
In this picture is what the app currently looks like (left) and what it should look like (right).
Why has the app not updated style?
Notes:
I'm following instructions from One Month Rails video course.
Rails 4 doesn't support the :assets group so change this:
group :assets do
gem 'sass-rails', '~> 4.0.3'
gem 'coffee-rails', '~> 4.0.0'
gem 'bootstrap-sass', '~> 3.3.3'
gem 'uglifier', '>= 1.3.0'
end
to this:
gem 'sass-rails', '~> 4.0.3'
gem 'coffee-rails', '~> 4.0.0'
gem 'bootstrap-sass', '~> 3.3.3'
gem 'uglifier', '>= 1.3.0'
Rerun bundle install to make sure everything is installed.
Rename your application.css file to application.css.scss and delete everything in the file. Now add this to it:
#import "bootstrap-sprockets";
#import "bootstrap";
Everything should work if you do this.
I am working through Michael Hartl's Rails tutorial, and after including a bootstrap gem I cannot get the formatting to work when I push to Heroku. Everything looks great on localhost:3000.
Here's my gemfile:
source 'https://rubygems.org'
ruby '1.9.3'
#ruby-gemset=railstutorial_rails_4_0
gem 'rails', '4.0.0'
gem 'bootstrap-sass', '2.3.2.0'
gem 'bcrypt-ruby', '3.0.1'
gem 'faker', '1.1.2'
gem 'will_paginate', '3.0.4'
gem 'bootstrap-will_paginate', '0.0.9'
And here is the beginning of my stylesheet:
#import "bootstrap";
/* mixins, variables, etc. */
$grayMediumLight: #eaeaea;
/* universal */
Not sure if the issue is in either of these places, so here is my git repository
https://github.com/ajhausdorf/sample_app
Before deploying to Heroku, you need to precompile assets:
rake assets:precompile
He explains this in Section 1.4.1 Heroku setup - Listing 1.9.
Another alternative is to enable Rail's static asset server (in production.rb).
config.serve_static_assets = true
I am using Font Awesome in a rails 3.2.13 app. I have successfull added the following icons to the app: icon-search icon-shopping-cart and others. But for some reason when I try to use icon-thumbs-up and icon-thumbs-down they look like icon-thumbs-up-alt or icon-thumbs-up-alt. If I try and use icon-thumbs-up-alt, no icon shows on the page.
I access both bootstrap and font awesome via gems:
group :assets do
gem 'sass-rails', '~> 3.2.3'
gem 'coffee-rails', '~> 3.2.1'
gem 'therubyracer'
gem 'font-awesome-rails'
gem 'jquery-ui-rails'
gem 'less-rails'
gem 'twitter-bootstrap-rails'
gem 'uglifier', '>= 1.0.3'
end
Here is the application.css.scss file:
*= require bootstrap_and_overrides
*= require_self
*= require_tree .
#import "font-awesome";
.icon-thumbs-up {
color: green;
}
.icon-thumbs-down {
color: red;
}
Here is the bootstrap_and_overrides.css.less
#import "twitter/bootstrap/bootstrap";
body { padding-top: 50px; }
#import "twitter/bootstrap/responsive";
// Set the correct sprite paths
#iconSpritePath: asset-path("twitter/bootstrap/glyphicons-halflings");
#iconWhiteSpritePath: asset-path("twitter/bootstrap/glyphicons-halflings-white");
// Set the Font Awesome (Font Awesome is default. You can disable by commenting below lines)
// Note: If you use asset_path() here, your compiled boostrap_and_overrides.css will not
// have the proper paths. So for now we use the absolute path.
#fontAwesomeEotPath: asset-path("fontawesome-webfont.eot");
#fontAwesomeWoffPath: asset-path("fontawesome-webfont.woff");
#fontAwesomeTtfPath: asset-path("fontawesome-webfont.ttf");
#fontAwesomeSvgPath: asset-path("fontawesome-webfont.svg");
// Font Awesome
#import "fontawesome";
Here is the button using the icons:
<%= link_to (content_tag(:i, "", :class=>"icon-thumbs-up")) + (content_tag(:i, "", :class=>"icon-thumbs-down")) + " Review", root_path , :class => "btn" %>
Could the issue be a conflict because I added both the twitter-bootstrap-rails and font-awesome-rails gems?
Thanks
Steve
It seems like the twitter-bootstrap-rails gem isn't importing the most recent version of font awesome, version 3.2.1 so I had to keep the font-awesome-rails gem. But I did update the gem to the most recent version, 3.2.1.1
The gemfile now looks like:
group :assets do
gem 'sass-rails', '~> 3.2.3'
gem 'coffee-rails', '~> 3.2.1'
gem 'therubyracer'
gem 'jquery-ui-rails'
gem 'less-rails'
gem "twitter-bootstrap-rails"
gem "font-awesome-rails"
gem 'uglifier', '>= 1.0.3'
end
The application.css.scss:
*= require bootstrap_and_overrides
*= require_self
*= require_tree .
*/
#import "font-awesome";
To avoid the chance of conflict between the twitter-bootstrap-rails and font-awesome gems I disabled the defaults that come with twitter-bootstrap-rails:
// Set the Font Awesome (Font Awesome is default. You can disable by commenting below lines)
// Note: If you use asset_path() here, your compiled boostrap_and_overrides.css will not
// have the proper paths. So for now we use the absolute path.
//#fontAwesomeEotPath: asset-path("fontawesome-webfont.eot");
//#fontAwesomeWoffPath: asset-path("fontawesome-webfont.woff");
//#fontAwesomeTtfPath: asset-path("fontawesome-webfont.ttf");
//#fontAwesomeSvgPath: asset-path("fontawesome-webfont.svg");
// Font Awesome
//#import "fontawesome";
I think you problem is because you're mixin gems!
The gem "twitter-bootstrap-rails" already include font-awesome you dont need to include any extra gem's for getting the icons. First of all you need to remove the gem "font-awesome-rails",
Your files should look like this:
Gemfile
group :assets do
gem 'sass-rails', '~> 3.2.3'
gem 'coffee-rails', '~> 3.2.1'
gem 'therubyracer'
gem 'jquery-ui-rails'
gem 'less-rails'
gem 'twitter-bootstrap-rails'
gem 'uglifier', '>= 1.0.3'
end
application.css.scss
*= require bootstrap_and_overrides
*= require_self
*= require_tree .
.color-green {
color: green;
}
.color-red {
color: red;
}
bootstrap_and_overrides.css.less
#import "twitter/bootstrap/bootstrap";
body { padding-top: 50px; }
#import "twitter/bootstrap/responsive";
// Set the correct sprite paths
#iconSpritePath: asset-path("twitter/bootstrap/glyphicons-halflings");
#iconWhiteSpritePath: asset-path("twitter/bootstrap/glyphicons-halflings-white");
// Set the Font Awesome (Font Awesome is default. You can disable by commenting below lines)
// Note: If you use asset_path() here, your compiled boostrap_and_overrides.css will not
// have the proper paths. So for now we use the absolute path.
#fontAwesomeEotPath: asset-path("fontawesome-webfont.eot");
#fontAwesomeWoffPath: asset-path("fontawesome-webfont.woff");
#fontAwesomeTtfPath: asset-path("fontawesome-webfont.ttf");
#fontAwesomeSvgPath: asset-path("fontawesome-webfont.svg");
// Font Awesome
#import "fontawesome";
Your.html
<i class='icon-thumbs-up color-green'></i>
Note: Your should check what version of "twitter-bootstrap-rails" do you have, because the thumb up icon its on the last update of the gem (It was 4 days ago when they add support for font-awesome 3.2.1). Make sure to update your gem. Hope it helps!
I am relatively new to programming, therefore I hope that the question is not absolutely stupid.
I got a problem concerning my rails app.
I try to use bootstrap. I built a file called "custom.css.scss" and used the "#import "bootstrap"" line in it.
The problem is: Each time I save my "custom.css.scss" file a new file "custom.css" is automatically generated and I get the following message: "custom.css.scss File to import not found or unreadable:bootstrap".
The funny thing is: When I delete the file "custom.css.scss" and refresh my browser, everything is fine (which means: bootstrap is used).
Do you have any idea, what could be the reason?
Kindest regards
Chris
P.S.: This is my installed gem file
source 'https://rubygems.org'
gem 'rails', '3.2.11'
gem 'bootstrap-sass', '2.1'
gem 'bcrypt-ruby', '3.0.1'
gem 'faker', '1.0.1'
gem 'will_paginate', '3.0.3'
gem 'bootstrap-will_paginate', '0.0.6'
gem 'jquery-rails', '2.0.2'
group :development, :test do
gem 'sqlite3', '1.3.5'
gem 'rspec-rails', '2.11.0'
# gem 'guard-rspec', '1.2.1'
# gem 'guard-spork', '1.2.0'
# gem 'spork', '0.9.2'
end
# Gems used only for assets and not required
# in production environments by default.
group :assets do
gem 'sass-rails', '3.2.5'
gem 'coffee-rails', '3.2.2'
gem 'uglifier', '1.2.3'
end
group :test do
gem 'capybara', '1.1.2'
gem 'factory_girl_rails', '4.1.0'
gem 'cucumber-rails', '1.2.1', :require => false
gem 'database_cleaner', '0.7.0'
gem 'launchy', '2.1.0'
# gem 'rb-fsevent', '0.9.1', :require => false
# gem 'growl', '1.0.3'
end
group :production do
gem 'pg', '0.12.2'
end
The custom.css.scss file look like this
#import "bootstrap";
/* universal */
html {
overflow-y:scroll
}
body {
padding-top: 60px
}
section {
overflow: auto;
}
textarea {
resize: vertial;
}
.center {
text-align: center;
}
.center h1 {
margin-bottom: 10px;
}
/* typography */
h1, h2, h3, h4, h5, h6 {
line-height: 1
}
h1 {
font-size: 3em;
letter-spacing: -2px;
margin-bottom: 30px;
text-align: center;
}
h2 {
font-size: 1.7em;
letter-spacing: -1px;
margin-bottom: 30px;
text-align: center;
font-weight: normal;
color: #999;
}
p {
font-size: 1.1em;
line-height: 1.7em;
}
I had a similar problem and saw Habax's solution and tried the last step first.
I just restarted the server.
That turned out to be enough. Hope that helps.
I had a similar issue, and I changed the file type from css to scss. I bet if you erase '.css' from your file name it'll work.
I had a similar issue when working on a Rails 6 application with Bootstrap 4.
The issue was that I did not specify the node modules full path of the bootstrap.scss file in my app/assets/stylesheets/application.scss file.
After installing Bootstrap 4 and its dependencies using this command:
yarn add bootstrap jquery popper.js
All I needed to do was to modify it from:
#import "bootstrap";
to
#import 'bootstrap/scss/bootstrap';
You can then add require the boostrap.js file in the app/javascript/packs/application.js file this way:
require("bootstrap");
That's all.
I hope this helps
Had the same issue in a new application, but restarting the development server solved the issue.
facing same problem. I rename custom.css.scss to custom.css
and I specified version of ruby in Gemfile. and bundle install .
in my case:
ruby '2.0.0'
I had this same problem, solved by fixing bootstrap-sass and sass-rails versions to:
gem 'sass-rails', '~> 3.2'
gem 'bootstrap-sass', '~> 2.3.1.0'
And then bundle install and server restart.
I just want to past my resolution as a reference. I have also encountered this issue today.
if you also using emacs with scss mode it may be helpful. as default when you save scss file emacs will auto-compile these scss file and create a responding .css file. then you just need to delete these .css file. or put below code to .emacs as permanent fix
(setq scss-compile-at-save nil) ;; disable the auto-compilation
I got the same problem of "File to import not found or unreadable: bootstrap" in my scss file. I just solved by adding require statement of "bootstrap-sass" to config.ru file. My config.ru is like the following.
# This file is used by Rack-based servers to start the application.
require ::File.expand_path('../config/environment', __FILE__)
require 'bootstrap-sass' #require statement of bootstrap-sass
run Rails.application
Running npm install resolved the issue for me.
We have a rails 3 app, it was working great, we deployed it. I had to set up a new computer for development, cloned my repo, set everything up, and now Font Awesome fonts refuse to work (show gibberish). I cloned into my original computer; in my original folder, they work fine. But any new clones do not.
Instead of showing the font, they show the content (gibberish set in the scss file, like '\f010'). This is usually displayed as a strange shape or something, but definitely not the icon. Tried on Mac OS X Mountain Lion and Ubuntu 12.04, Chrome and Firefox.
What we tried:
Made a new branch in original folder. Updated all gems to newest
version - I thought the clone might have newer gems that made it
break somewhere. Original project still looks fine, new clones (and
checking out the branch) are broken.
Replaced the .scss and font files from fresh download from the
fontawesome site.
Verified path is correct for font files (they seem to be found,
because Chrome inspector doesn't complain about missing font files -
if I change the path, it does complain. They just aren't being
used/used properly)
Gem list in both folders show same gems with same versions.
FontAwesome path is:
myapp/vendor/assets/stylesheets/FontAwesome
with the sass and fonts folders inside of that.
The only thing changed in the sass was the path line:
$fontAwesomePath: "FontAwesome/font/fontawesome-webfont" !default;
Which, as I said, seems to work; if I change the path, chrome complains about the missing fonts.
I am using Apache 2, Ruby ree-1.8.7 p-358, Rails 3.2.7, Passenger 3.0.12, RVM 1.14.10, Bundler 1.1.4. Passenger and bundler sit in my global gemset. Here is my Gemfile:
# myapp/Gemfile
# The specified versions are to make sure everything is as it is in the
# original folder; didn't make a difference. But the original branch has
#them and is working.
source 'https://rubygems.org'
gem 'rails', '3.2.7'
gem 'chronic', '0.6.7'
gem 'enumerated_attribute', '0.2.16'
gem 'exception_notification', '2.6.1'
gem 'google-api-client', '0.4.5'
gem 'her', '~> 0.2.6'
gem 'jquery-rails', '2.0.2'
gem 'mysql2', '0.3.11'
gem 'paperclip', '~> 2.7.0'
gem 'pdfkit', '0.5.2'
gem 'remotipart', '~> 1.0'
gem 'settingslogic'
gem 'slim-rails'#, '1.0.3'
gem 'validates_timeliness', '~> 3.0.2'
gem 'whenever', '0.7.3', :require => false
group :assets do
gem 'compass-rails'#, '1.0.3'
gem 'sass-rails'#, '3.2.5'
end
gem 'coffee-rails'#, '3.2.2'
gem 'uglifier'#, '1.2.7'
group :development do
gem 'quiet_assets', '1.0.1'
gem 'thin' , '1.4.1'
end
gem 'letter_opener', '0.0.2', :group => [:development, :test, :staging]
gem 'rspec-rails', '2.11.0', :group => [:development, :test]
group :test do
gem 'capybara', '1.1.2'
gem 'factory_girl_rails', '1.7.0'
gem 'guard-rspec', '1.2.1'
gem 'shoulda', '3.1.1'
end
If anyone needs more info just let me know. I've run out of ideas and I'm not getting anywhere, and I'm worried to deploy now and have our prod env messed up!
EDIT: Still not getting results. I updated to Rails 3.2.8 and all gems are at their latest, except for paperclip and factory_girl_rails, which use older versions for Ruby 1.8.7.
Destroyed all my folders, cloned a new one, works fine. Cloned a second, no good. Open first clone in Chrome incognito window, doesn't work. Inspector -> Resources -> Frames -> (site) -> Fonts shows the font files.
Here's an image of what it should look like (left) vs the problem (right):
try this, i recently had a similar issue,
if you put this at the top of your CSS files,
/*
*= require font-awesome
*/
and then use this gem 'font-awesome-rails' it should work