I have added bootstrap to my site. Here is the structure I am using. (I cannot whatsoever remove the bootstrap.css file since it I modified it to my liking).
>app
>>assets
>>>fonts
>>>>4 glypicons icon files.
>>>images
>>>>N/A
>>>javascripts
>>>>Bootstrap.js (Jquery is installed in a gem)
>>>stylesheets
>>>>Bootstrap.css
Everything is imported correctly, but the issue is that the glyphicons arent working and I need them!
November 2015 EDIT: I would recommend this gem: https://github.com/twbs/bootstrap-sass It is actively maintained by the Bootstrap community and works really well with Ruby on Rails.
I was having a very similar issue as you but I figure it out! Find this part in your bootstrap.css file:
#font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
and replace ../fonts/ with /assets. This is what your final code will look like.
#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');
}
I hope this helped!
If you are using bootstrap-sass and you have this issue try to import bootstrap like this in one of your scss files. If you use sass, just convert the syntax:
#import "bootstrap-sprockets";
#import "bootstrap";
For me as a twitter-bootstrap-rails user:
Thanks to take's post # GitHub
Adding this:
/* Override Bootstrap 3 font locations */
#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');
}
to my application.css fixed the issue.
Hope to be helpful.
I was also struggling to make boostrap3 glyphicon work in rails 4.
I solved it by adding
#font-face {
font-family: 'Glyphicons Halflings';
src: url(asset_path('glyphicons-halflings-regular.eot'));
src: url(asset_path('glyphicons-halflings-regular.eot?#iefix')) format('embedded-opentype'), url(asset_path('glyphicons-halflings-regular.woff')) format('woff'), url(asset_path('glyphicons-halflings-regular.ttf')) format('truetype'), url(asset_path('glyphicons-halflings-regular.svg#glyphicons_halflingsregular')) format('svg');
}`
to application.css.scss file
and
config.assets.paths << "#{Rails}/vendor/assets/fonts"
to application.rb file.
I think you might be having a problem with the asset pipeline
You want to change bootstrap.css to bootstrap.css.scss and then replace where it uses
#font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-halflings-regular.eot');
src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
with font-path (look at section 2.3.2 - CSS and Sass)
#font-face {
font-family: 'Glyphicons Halflings';
src: font-path('glyphicons-halflings-regular.eot');
src: font-path('glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
font-path('glyphicons-halflings-regular.woff') format('woff'),
font-path('glyphicons-halflings-regular.ttf') format('truetype'),
font-path('glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
Also in your config/environments/production.rb
# Precompile additional assets
config.assets.precompile += %w( .svg .eot .woff .ttf )
In your config/application.rb
# Add the fonts path
config.assets.paths << Rails.root.join('app', 'assets', 'fonts')
Check out another SO post for a similar problem
Hope this helps
Bootstrap 3 icons look like this:
<i class="glyphicon glyphicon-indent-right"></i>
whereas Bootstrap 2 looked like this:
<i class="icon-indent-right"></i>
If the code you are using isn't up to date (check for a b3 branch), then you may have to fork and change the icon names your self.
Apparently Chrome has been broken for months re this issue.
This worked for me when I put it in the top of my customization_css.css.scss file
#import 'bootstrap-sprockets';
#import 'bootstrap';
#import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");
You can also try this:
#font-face {
font-family: 'Glyphicons Halflings';
src: url('<%= asset_path("glyphicons-halflings-regular.eot") %>');
src: url('<%= asset_path("glyphicons-halflings-regular.eot?#iefix") %>') format('embedded-opentype'), url('<%= asset_path("glyphicons-halflings-regular.woff2") %>') format('woff2'), url('<%= asset_path("glyphicons-halflings-regular.woff") %>') format('woff'), url('<%= asset_path("glyphicons-halflings-regular.ttf") %>') format('truetype'), url('<%= asset_path("glyphicons-halflings-regular.svg#glyphicons_halflingsregular") %>') format('svg');
}
You just need to convert your your_css.css file to your_css.css.erb
You can copy all the bootstrap font files to public/fonts and it will work. No need for imports or changes in the application.rb.
I tried with suggested solution and it did not work for me, here is a generic solution that helps you troubleshoot any problem related to this you might have.
Here is the resulting font face definition with bootstrap-sass:
#font-face {
font-family: 'Glyphicons Halflings';
src: asset-url('bootstrap/fonts/glyphicons-halflings-regular.eot');
src:
asset-url('bootstrap/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
asset-url('bootstrap/fonts/glyphicons-halflings-regular.woff') format('woff'),
asset-url('bootstrap/fonts/glyphicons-halflings-regular.ttf') format('truetype'),
asset-url('bootstrap/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
According to Bootstrap 3 Glyphicons are not working, there's a bug with the Bootstrap customizer that messes up the glyphicon fonts. I had the same issue, but I was able to fix it by downloading the entirety of bootstrap from http://getbootstrap.com/, and then copying the font files to the correct location.
In Rails 4, with sass, Bootstrap 3.2.0, and the bootstrap-sass gem use:
#import "bootstrap";
#import "bootstrap/theme";
When i use bootstrap in my rails apps i use the bootstrap-sass gem.
https://github.com/thomas-mcdonald/bootstrap-sass
You can override it. Simply import it as the docs explain. Then Import or paste your modified files.
In a php project, the glyph weren't working, i download the classic bootstrap zip and i extracted the glyph files to replace them in the project. In my memories the bug appears when you generate a custom bootstrap style from their site (the source of the bug can be wrong).
Hope this helps!
In my index.html.slim file, I replaced span.glyphicon.glyphicon-calendar with span.fa.fa-calendar and it worked.
Make sure you have set
# config/environments/production.rb
config.assets.compile = true
And add fonts to precompile list
# config/initializers/assets.rb
config.assets.precompile += %w(*.eot *.svg *.ttf *.woff *.woff2)
In my case I used this <i class="icon-plus"></i>, which I took from oficcial site of Bootstrap and didn't see anything. But instead, it is neccessary to use this <i class="glyphicon glyphicon-plus"></i>
Provided that you have the glyphicons files in app/assets/fonts (if you don't, you can download them from the bootstrap-saas repo), create app/assets/stylesheets/fonts.scss and add the following:
#font-face {
font-family: 'Glyphicons Halflings';
src: font-url('glyphicons-halflings-regular.eot');
src: font-url('glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
font-url('glyphicons-halflings-regular.woff') format('woff'),
font-url('glyphicons-halflings-regular.ttf') format('truetype'),
font-url('glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}
I'm trying to embed a Persian font (BYekan) on my responsive website, and currently using the code below I've been able to achieve my goal in Chrome and Desktop Safari:
#font-face {
font-family: 'BYekan';
src: url('/font/BYekan.eot');
src: url('/font/BYekan.eot?#iefix') format('embedded-opentype'),
url('/font/BYekan.woff') format('woff'),
url('/font/BYekan.ttf') format('truetype'),
url('/font/BYekan.svg#BYekan') format('svg');
font-weight: normal;
font-style: normal;}
However, it doesn't work in iOS Safari except for numbers. I've already tried BBC Persian website's font (BBCNasim) with no luck. Any suggestions?
Edited:
This is the the website that I'm working on. And here I uploaded the font that I'm using (I downloaded them from a Persian site, and don't know how they've created the different formats of the font. Maybe they used onlinefontconverter cause it's recommended in their website). If you check my site on Desktop and iPhone, will see the difference.
Your #font-face rule looks fine.
I think you might be encountering a lack of support for characters.
Try setting the unicode range for your font to all possible unicode characters.
#font-face{
font-family: 'BYekan';
src: url('/font/BYekan.eot');
src: url('/font/BYekan.eot?#iefix') format('embedded-opentype'),
url('/font/BYekan.woff') format('woff'),
url('/font/BYekan.ttf') format('truetype'),
url('/font/BYekan.svg#BYekan') format('svg');
font-weight: normal;
font-style: normal;
unicode-range: U+00-FFFF;
}
Your font file is problematic and is not designed for Web.
Refer to this link for full description and web-friendly version download: http://www.wedesign.ir/css/css3-font-face-methods-and-optimized-font-firefox6
I'm trying to use the glyphicons provided by bootstrap in my rails 4.0beta1 app. Everything works fine in development, but in production nothing gets rendered, and in the heroku logs I get the following error:
ActionController::RoutingError No Route Matches [GET] "/assets/glyphicons-halflings.png"
This is how I'm calling the image file in boostrap.css:
[class^="icon-"],
[class*=" icon-"] {
background-image: url("/assets/glyphicons-halflings.png");
}
This is how I'm rendering it in the view:
<i class="icon-user"></i>
When I run rake assets:precompile and start up the production server with rails s -e production, then I can no longer see the icons. I'm not sure why this is the case. I'm not using any gems associated with bootstrap, I just have the plain bootstrap.css file and the image file under assets/images.
EDIT:
I also added a .erb extension (bootstrap.css.erb) to use the asset_path helper, but I still only see the icons in development, not production.
Anybody have any ideas?
Well, oddly, background-image did not seem to work in production. I was loading other background images using just the background: property, so I tried that and now it (magically) works in production:
background: url(<%= asset_path 'glyphicons-halflings.png' %>);
with bootstrap.css.erb as the filename.
Still confused as to why background-image was working in development but not production ...
Try this simple approach:
background-image: url('gliphicons-halflings.png')
EDIT: glyphicons.scc.scss.erb
#font-face {
font-family: 'Glyphicons';
src: url('<%= asset_path('glyphicons-regular.eot')%>');
src: url('<%= asset_path('glyphicons-regular.eot?#iefix')%>') format('embedded-opentype'), url('<%= asset_path('glyphicons-regular.woff')%>') format('woff'), url('<%= asset_path('glyphicons-regular.ttf')%>') format('truetype'), url('<%= asset_path('glyphicons-regular.svg#glyphicons_halflingsregular')%>') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="glyphicons-"]:before {
display: inline-block;
font-family: 'Glyphicons';
font-style: normal;
font-weight: normal;
text-decoration: inherit;
*display: inline;
*zoom: 1;
}
how to emebed a font using #font-face on rails:
my fonts are located in:
/vendor/assets/stylesheets/fonts/custom-font-lists-here.eot
my stylesheet that contain a #font-face is inside:
/vendor/assets/stylesheets/fonts.css
I am using this right now
#font-face {
font-family: 'ArimoRegular';
src: url('<%= asset_path('fonts/arimo-regular-webfont.eot') %>');
src: url('<%= asset_path('fonts/arimo-regular-webfont.eot') %>'+'?#iefix') format('embedded-opentype'),
url('<%= asset_path('fonts/arimo-regular-webfont.woff') %>') format('woff'),
url('<%= asset_path('fonts/arimo-regular-webfont.ttf') %>') format('truetype'),
url('<%= asset_path('fonts/arimo-regular-webfont.svg') %>#ArimoRegular') format('svg');
font-weight: normal;
font-style: normal;
}
I wonder if this is right,
Any suggestion are welcome,
Thank you
You shouldn't need the fonts/ portion of the file path. The app/assets/fonts directory should already be included in asset_path, so you should be able to use this:
<%= asset_path('arimo-regular-webfont.eot') %>
I don't know why this happens, but I've heard of people having issues with the assets/fonts directory not being in the asset pipeline so you have to add it manually. If the above doesn't work for you, try added the directory manually by putting the following in config/application.rb:
config.assets.paths << "#{Rails.root}/app/assets/fonts"
While using asset_path helper, you should append .erb to your font.css so it becomes font.css.erb. A better solution would be to use asset helpers from sass-rails or less-rails gems, in your case font-url.
More about it: sass-rails features
In my rails(2.x) application. I want to use custom font in my view. So that I added the font files in public under fonts folder. When I try to get the fonts in url or via application, it through routing error. I guess rails routes not able to recognize the format/file. Correct me if I am wrong and give me solution
css code:
#font-face {
font-family: 'Effra';
src: url('/fonts/effra_std_rg-webfont.eot');
src: url('/fonts/effra_std_rg-webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/effra_std_rg-webfont.woff') format('woff'),
url('/fonts/effra_std_rg-webfont.ttf') format('truetype'),
url('/fonts/effra_std_rg-webfont.svg#EffraRegular') format('svg');
font-weight: normal;
font-style: normal;
}
Note: I can able to get woff, ttf file by directly typing the path but not eot file.
Error trace:
Unknown action
No action responded to fonts. Actions: XXXXXXsomeactionsXXXXX and rescue_404
Thanks in advance,
Arun.
I fixed the above issue by moving the font folder under public/stylesheets/fonts. and made the above code as below.
font-face {
font-family: 'Effra';
src: url('fonts/effra_std_rg-webfont.eot');
src: url('fonts/effra_std_rg-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/effra_std_rg-webfont.woff') format('woff'),
url('fonts/effra_std_rg-webfont.ttf') format('truetype'),
url('fonts/effra_std_rg-webfont.svg#EffraRegular') format('svg');
font-weight: normal;
font-style: normal;
}
Hope this will help to others.