Open homebase-dev opened 9 years ago
I had the same problem with the Fontawesome icons when using less
. I've setup my own fork with a fix and submitted a pull request. (But it hasn't been accepted yet.)
You can try my fix by replacing the following line in your Gemfile
gem "twitter-bootstrap-rails"
with
gem "twitter-bootstrap-rails", github: 'torstenb/twitter-bootstrap-rails'
Or simply add the line for @fa-font-path
to your bootstrap_and_overrides.less
:
[...]
@fontAwesomeSvgPath: font-url("fontawesome-webfont.svg#fontawesomeregular");
// Font Awesome
@import "fontawesome/font-awesome";
@fa-font-path: "/assets"; // Override fontawesome less variable in order for it to work with Rails asset pipeline
[...]
Let me know if that fixes it for you as well.
Hey torstenb,
thanks for your help! I tried to replace the gem with yours, unfortunately it didn't work with it either. So I stopped webrick and deleted the whole content of the tmp folder, just in case.. afterwards I restarted the webserver and then something different happened:
I also tried to just add the @fa-font-path statement to my bootstrap_and_overrides.less, but still, the assets weren't found. Tried including it also in combination with your gem, but didn't work either for me (same error again).
This was fixed and released in railsstrap. Give it a try!
The fix I provided is for the Fontawesome icons. So your bootstrap_and_overrides.less
should look like this:
@import "twitter/bootstrap/bootstrap";
// Set correct font paths
@glyphiconsEotPath: font-url("glyphicons-halflings-regular.eot");
@glyphiconsEotPath_iefix: font-url("glyphicons-halflings-regular.eot?#iefix");
@glyphiconsWoffPath: font-url("glyphicons-halflings-regular.woff");
@glyphiconsTtfPath: font-url("glyphicons-halflings-regular.ttf");
@glyphiconsSvgPath: font-url("glyphicons-halflings-regular.svg#glyphicons_halflingsregular");
// Set the Font Awesome (Font Awesome is default. You can disable by commenting below lines)
@fontAwesomeEotPath: font-url("fontawesome-webfont.eot");
@fontAwesomeEotPath_iefix: font-url("fontawesome-webfont.eot?#iefix");
@fontAwesomeWoffPath: font-url("fontawesome-webfont.woff");
@fontAwesomeTtfPath: font-url("fontawesome-webfont.ttf");
@fontAwesomeSvgPath: font-url("fontawesome-webfont.svg#fontawesomeregular");
// Font Awesome
@import "fontawesome/font-awesome";
@fa-font-path: "/assets"; // Override fontawesome less variable in order for it to work with Rails asset pipeline
// Glyphicons
//@import "twitter/bootstrap/glyphicons.less";
// Your custom LESS stylesheets goes here
//
// Since bootstrap was imported above you have access to its mixins which
// you may use and inherit here
//
// If you'd like to override bootstrap's own variables, you can do so here as well
// See http://twitter.github.com/bootstrap/customize.html#variables for their names and documentation
//
// Example:
// @link-color: #ff0000;
thanks. now it runs in dev fine, but still missing in production. what could be the reason?
Hi, any update on this? I could not make it work in production.
I have the same problem with Fontawesome icons. Fixed by added this
@fa-font-path: "../..";
as the last line in the _bootstrap_andoverrides.css.less
Unfortunately, I couldn't find using of @fontAwesomeEotPath
variable during @font-face
definition.
Apparently, this is still a problem. I have tried the @fa-font-path
suggestions listed here, but neither seem to make any difference, and I still have the funky placeholder icons as shown in homebase-dev's first screenshot.
Wellp, it never fails; I can spend a few hours on something like this, and as soon as I post a comment, I stumble upon a resolution within minutes. In this case, I was missing the fa
class from my <i>
tags.
<i class="fa-arrow-left"></i>
becomes <i class="fa fa-arrow-left"></i>
(FWIW: I've been upgrading my application from twitter-bootstrap-rails v2.2.8 to v3.2.0, and always had icon-*
classes. Now, I'm having to rename them to fa-*
and add an additional fa
class.)
Still doesn't work for twitter-bootstrap-rails 3.2.0
, rails 4.2.1
.
@freemanoid I fixed it like this: http://stackoverflow.com/questions/20255711/ruby-on-rails-bootstrap-glyphicons-not-working/30868672#30868672
@meierjan thanks. I was looking into this since yesterday and the tips above do not work (like @freemanoid says). But your suggestion seems to work fine.
any solution to this issue? @cooltribes did you resolved the issue in the production server? i have the same error.
@stefanhendriks something?
I having the same error on heroku/production on rails 4.2.4/twitter-bootstrap 3.2.0.
None of the above suggestions work for heroku deployment. The sugggestion on stackoverflow works only for localhost
Still having issues myself in production using heroku
I am also having this problem still - on my development/production machines using twitter-bootstrap-rails (3.2.2), ruby (2.3.0), and rails (4.2.5).
I get an empty box when I use the html:
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
I tried @meierjan 's fix and it worked well locally, but not when I pushed to heroku
@toadkicker used railsstrap and no longer have this issue! works very well.
I figured out a solution! I noticed that If you read /app/assets/stylesheets/bootstrap_and_overrides.css there's a note:
Use Font Awesome icons (default)
To use Glyphicons sprites instead of Font Awesome, replace with "require twitter-bootstrap-static/sprites"
=require twitter-bootstrap-static/fontawesome
I swapped the require statements and it worked! I added a comment to stackoverflow about it here: http://stackoverflow.com/questions/20255711/ruby-on-rails-bootstrap-glyphicons-not-working/30868672#comment57269123_30868672
The following post from Stack Overflow worked for me:
In application.css
, add:
@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');
}
oh boy did the original code ever worked? since asset's path on production includes hash digest..
@font-face {
font-family: 'Glyphicons Halflings';
src: url('<%= font_path 'glyphicons-halflings-regular.eot' %>');
src: url('<%= font_path 'glyphicons-halflings-regular.eot' %>?#iefix') format('embedded-opentype'),
url('<%= font_path 'glyphicons-halflings-regular.woff' %>') format('woff'),
url('<%= font_path 'glyphicons-halflings-regular.woff2' %>') format('woff2'),
url('<%= font_path 'glyphicons-halflings-regular.ttf' %>') format('truetype'),
url('<%= font_path 'glyphicons-halflings-regular.svg' %>') format('svg');
}
Change application.css
to application.scss
, then add:
@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.woff2') format('woff2'),
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');
}
worked for me!
And don't forget to uncomment
@import "twitter/bootstrap/glyphicons.less";
in bootstrap_and_overrides.less file after adding
@font-face { ....
in application.scss
Just use the next code inside the bootstrap_and_overrides.css.less
file:
@import "twitter/bootstrap/bootstrap";
// Glyphicons are not required by default, uncomment the following lines to enable them.
@icon-font-path: "../../";
@import "twitter/bootstrap/glyphicons.less";
Remove @import bootstrap and add the cdn. to your scss file. @import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");
Super late to the party, but for future people.. Or I do hope this can somehow time travel and it is helpful for people 4 years ago.., because you really shouldn't need this in 2023 :)
app/assets/stylesheets/application.css
*= require twitter-bootstrap-static/sprites
Hi there,
I'm using twitter-bootstrap-rails in my app and somehow the glyphicons assets are missing, even after I uncommented the line stated in the docs. I googled a lot but still could not resolve this problem.
Screenshot here:![assets_missing](https://cloud.githubusercontent.com/assets/7480751/5789218/deae7ae4-9e61-11e4-878d-333321e3ac80.png)
I'm using:
My _bootstrap_and_overrides.less_ looks like this:
My _gemfile_
How I access the glyphicon in the view
I played around a bit and I noticed that when I run a rake assets:precompile in production mode and having a look at the assets folder, it seems that the glyphicons are in the wrong directory? Could this have something to do with this problem?