Glyphicons return wrong symbols or errors / Thumbnails display only text / Buttons don't display gradients

[ghost]

There seems to be a problem with glyphicon.less (wrong or no sysmbols), thumbnails.less (displays only text) and the button gradient, which is not displaying at all.

I am using Bower to pull the latest LESS version of Bootstrap and compile CSS/JS with Grunt:

{
  "name": "bootstrap-grunt-bower",
  "version": "0.0.1",
  "dependencies": {
    "bootstrap": "latest"
  }
}

I am organising my main less-file as suggested. In order to test the setup I am using the sample Bootstrap theme. All features display correctly with the mentioned exception.

Would appreciate your advice.

[cvrebert]

This is unlikely to be specifically Bower-related.
Do these problems still occur when using our precompiled bootstrap.css?
What browser and OS are you using?

[ghost]

I just tried bootstrap.css and bootstrap.min.css which come with the latest package on Bower:

• Thumbnails are still not working
• Button gradients are still not working
• Glyphicon seem to work

I am using Ubuntu Linux LTS 12.04 with latest Chrome, Chromium and Firefox, which display exactly the same results.

[cvrebert]

Please post a JS Fiddle, CodePen, JS Bin, or similar that demonstrates the problems.

[ghost]

Please have a look here:

http://jsbin.com/wevapona/1/

I used the minifed output.

[cvrebert]

Please use BootstrapCDN for the Bootstrap CSS & JS assets in the example and also remove Font Awesome from the example.

[cvrebert]

Also, you realize that the example placeholder thumbnail image uses holder.js, right?

[cvrebert]

Pending a revised JS Bin to the contrary, my conclusion is that you merely didn't implement the example completely correctly.

[ghost]

http://jsbin.com/pacuqasi/1/

Using the hosted css/js it is working. However, using LESS from Bower, the Glyphicons don't show up or show up wrong. There still seems to be something wrong with the paths of the font-variables as reported by other users.

The fonts are placed in `/bower_components/bootstrap/fonts/...``, but strangely the links refer to the public folder where the css/js is hosted. I get a 404 for all font families:

Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/testing/public/assets/fonts/glyphicons-halflings-regular.woff
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/testing/public/assets/fonts/glyphicons-halflings-regular.ttf
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/testing/public/assets/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular

[cvrebert]

• Why exactly is that strange? The fonts are just another static asset like the CSS & JS...
• What's your localhost URL for the bootstrap[.min].css file?
• Are you using any tool on top of or additional to Bower itself that messes with the directory structure of installed Bower packages?

[ghost]

LESS should resolve the absolute path as specified in glyphicons.less, which it is currently not doing correctly. I have to explicitly define @icon-font-path: "http://localhost/testing/bower_components/bootstrap/fonts/";, otherwise Bootstrap assumes that my Glyphicons are not stored in the bower_components-folder, but rather in the public/assets/css, where the minifed CSS is stored that Grunt compiles. I am not using any other packages that could mess up the structure, which actually is:

www
/testing
.
├── app
│   └── assets
├── bower_components
│   ├── bootstrap
│   ├── fontawesome
│   ├── jquery
│   ├── jquery.stellar
│   ├── sticky
│   └── superslides
├── bower.json
├── favicon.ico
├── Gruntfile.js
├── humans.txt
├── index.html
├── node_modules
│   ├── grunt
│   ├── grunt-contrib-concat
│   ├── grunt-contrib-imagemin
│   ├── grunt-contrib-less
│   ├── grunt-contrib-uglify
│   └── grunt-contrib-watch
├── package.json
├── public
│   └── assets
├── README.md
└── robots.txt

[cvrebert]

Yeah, so you're effectively changing the locations of the CSS and the fonts relative to one another, thus you'll have to override the @icon-font-path variable yourself (although you should still be able to specify a relative path for it). LESS isn't psychic.

[ghost]

This could be an issue within the LESS compiler when dealing with relative paths as reported by other users. Less has obviously not been able to address this issue in over 2 years.

[cvrebert]

Ah, well, if it's a less.js problem, then there's not much we can do about it...
If Sass handles this case better, you can always try using our Sass port instead: https://github.com/twbs/bootstrap-sass