CODEWITHSUNDEEP
csstwitter-bootstrap
Maik Klein
Maik Klein

Reputation: 16148

Twitter bootstrap - Glyphicons

I am using amazon s3.

My glyphicons don't show up.

I added the following to my head

<style>
[class^="icon-"],
[class*=" icon-"] {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-top: 1px;
  *margin-right: .3em;
  line-height: 14px;
  vertical-align: text-top;
  background-image: url("https://s3.amazonaws.com/BUCKET/img/glyphicons-halflings.png");
  background-position: 14px 14px;
  background-repeat: no-repeat;
}

</style>

I thought it would overwrite the old path, but I still can not see the glyphicons.

Any ideas?

Upvotes: 2

Views: 2101

Answers (2)

Pete Oliveira
Pete Oliveira

Reputation: 66

I have the same issue - and have narrowed it down to the .css using the production CDN instead of TEST.

On heroku I have RAILS_ENV and RACK_ENV set to test however it still compiles the CSS with the Production CDN.

Other assets show the correct CDN, Prod CDN seems to be used due to folowing:

@iconSpritePath: asset-path('twitter/bootstrap/glyphicons-halflings.png');

Upvotes: 4

albertedevigo
albertedevigo

Reputation: 18411

Each sprite has a background-position where it's located and you are overwriting them all with that styles. As you only want to change the source of your sprites, use:

[class^="icon-"],
[class*=" icon-"] {
    background-image: url("https://s3.amazonaws.com/BUCKET/img/glyphicons-halflings.png");
}

Upvotes: 6

Related Questions