Twitter bootstrap - Glyphicons

Question

我正在使用亞馬遜s3。

我的字形不會出現。

我在腦海中添加了以下內容

<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>

我以為它會覆蓋舊路徑，但我仍然看不到字形。

有任何想法嗎？

Answer 1

每個精靈都有一個background-position ，你可以用這些樣式覆蓋它們。 由於您只想更改精靈的來源，請使用：

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

Answer 2

我有同樣的問題 - 並使用生產CDN而不是TEST將其縮小到.css 。

在heroku上我將RAILS_ENV和RACK_ENV設置為測試，但它仍然使用Production CDN編譯CSS。

其他資產顯示正確的CDN，Prod CDN似乎由於以下原因而被使用：

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