I can't get my glyphicons to work in my Rails asset pipeline.
In stylesheets/application.sass, I have...
#import "bootstrap-sprockets"
#import "bootstrap"
#import "glyphicons"
I am using the bootstrap-sass and sass-rails gems
In stylesheets/glyphicons.css, I have...
#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');
}
It's weird, because this (below) works fine, giving me the red danger button...
<a class="detete btn btn-danger" href="#">x</a>
...while this one (below) does not work, not giving me either the grey default button or the star icon...
<a class="btn" href="#"><i class="icon-star-empty"></i></a>
That's why I say Bootstrap is only working "partially" for me. Any help on this would be much appreciated.
Have you added the following line to your application.js. you have not mentioned anything about your application.js here. I hope this will help you
//= require jquery
//= require bootstrap-sprockets
you can check the following link
https://github.com/twbs/bootstrap-sass
By default Glyphicons font directory set to fonts folder. Instead you should define it with asset_path . So try add below code in app/assets/stylesheets/application.css.scs.
#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');
}`
You might also need to make change in config/application.rb file.
config.assets.paths << "#{Rails}/vendor/assets/fonts"
Related
I'm researching how to add custom fonts to my Rails app, e.g. by adding a fonts folder in the assets folder - and I cannot find an "official" Rails way on how to do this.
Yes, there are plenty of questions/answers here on SO about the matter, all seemingly with their own hacks. But shouldn't such a common practice go under Rails' famous "convention over configuration"?
Or if I've missed it - where is the documentation reference on how to organize fonts in a Rails app?
Yes the link given will explain it well, however if u need another detailed explanation then here it is
Firstly to use custom fonts in your app you need to download font files, you can try https://www.1001freefonts.com/ and look for fonts
Few of the most popular font file formats are mainly .otf(Open Type Format) .ttf(True Type Format) .woff(Web Open Font Format)
You can move the downloaded fonts to your app folder under app/assets/fonts/
After downloading the file you need to "declare" the fonts you will be using in your css like this
#font-face {
font-family: "Kaushan Script Regular";
src: url(/assets/KaushanScript-Regular.otf) format("truetype");
}
Finally you can use the font-family that you just declared wherever you want like this
#e-registration {
font-family: "Kaushan Script Regular";
}
Hope this helps.
Just did it...
Download and save the font files (eot, woff, woff2...) in your
assets/fonts/ directory
In your config/application.rb add this line config.assets.paths
<< Rails.root.join("app", "assets", "fonts")
What this does is it
precompiles your fonts folder just as it does by default with your
images, stylesheets etc.
and make sure this line is set to true config.assets.enabled =
true
In your sass/scss or even inline with <script> tag
#font-face { font-family: 'Bariol Regular'; src:
font-url('Bariol_Regular_Webfont/bariol_regular-webfont.eot');
src:
font-url('Bariol_Regular_Webfont/bariol_regular-webfont.eot?iefix')
format('eot'),
font-url('Bariol_Regular_Webfont/bariol_regular-webfont.woff')
format('woff'),
font-url('Bariol_Regular_Webfont/bariol_regular-webfont.ttf')
format('truetype'),
font-url('Bariol_Regular_Webfont/bariol_regular-webfont.svg#webfont3AwWkQXK')
format('svg'); font-weight: normal; font-style: normal; }
Note that you should use the font-url helper instead of css' url to address the fingerprinting done by Rails when it precompiles the assets
Finally, set the font-family in your CSS files
body {
font-family: 'Bariol Regular', serif;
}
FREE TIP:
This being said, the best way in terms of performance is to set this up with JS so that these fonts get loaded asynchronously. Check this loader: https://github.com/typekit/webfontloader
I had some trouble with the approaches listed above, because the production css was not pointing to the compiled ttf font, so I then successfully used this alternative approach borrowed from https://gist.github.com/anotheruiguy/7379570:
Places all font files in assets/stylesheets/fonts. e.g. assets/stylesheets/fonts/digital_7.ttf.
I defined in a .scss file that we use:
#font-face {
font-family: 'Digital-7';
src: asset-url('fonts/digital_7.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
I leveraged the custom font in other .scss files:
.digital-font {
font-family: 'Digital-7', sans-serif;
font-size: 40px;
}
This said, a much cleaner way of doing this is to put the font definition (digital_7_mono.ttf in this example) on a separate site.
If you are using Cloudfront, for example, in a Cloudfront directory called my_path, upload your font files, then define a css file (e.g. digital_fonts.css)
#font-face {
font-family: 'Digital-7-Mono';
font-weight: normal;
font-style: normal;
src: local('Digital 7 Mono'), local('Digital-7-Mono'), url('https://mycloudfront_site.com/my_path/digital_7_mono.ttf') format('truetype');
}
In your html, inside the <head> tag, add:
The only way that worked for me was this:
#font-face {
font-family: 'Vorname';
src: asset-url('Vorname.otf') format('truetype'),
asset-url('Vorname.ttf') format('truetype');
}
Just put fonts under app/assets/fonts, and modify url('Your Font Path') to font-url('Your Font Path') in your scss. Aslo Asset Pipeline will auto precompile fonts into public/assests folder.
check here for more detail:
https://guides.rubyonrails.org/asset_pipeline.html#css-and-sass
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 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;
}
I'm trying to include FontAwesome into my project but I cannot get the letter little "o" to work,
My font-awesome.css.scss.erb
#font-face {
font-family: "FontAwesome";
src: url('<%= asset_path('fontawesome-webfont.eot') %>');
src: url('<%= asset_path('fontawesome-webfont.eot') + '?#iefix' %>') format('eot'), url('<%= asset_path('fontawesome-webfont.woff') %>') format('woff'), url('<%= asset_path('fontawesome-webfont.ttf') %>') format('truetype'), url('<%= asset_path('fontawesome-webfont.svg') + '#FontAwesome' %>') format('svg');
font-weight: normal;
font-style: normal;
}
// Other stuff,,,,,,
my own css
body {
font-family: "FontAwesome"
}
What happens is that the text changes to some serif font, soo something is changing, but the letter "o" is not displayed, I tried various gems but none seems to work.
I also tried different browsers (Chrome, FF, Safari)
As OS I Use Lion 10.7.5
I have also configured the assets path.
FontAwesome requires you to use the font-awesome.css stylesheet.
Then you will create an element to use the font-face such as:
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<i class="fa fa-download"> Download</i>
See Not using Boostrap?1 at http://fortawesome.github.io/Font-Awesome for directions
1. This exists in the Old 3.2.1 documentation.
You shouldn't be using FontAwesome as the font face for your body. You'll want to restrict it to a particular class or something like that.
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