自定義圖標不顯示在MVC項目中使用引導

Question

我有一個使用Unify Bootstrap模板的MVC項目。

客戶想要的自定義圖標，所以我遵循以下指導：

http://favbulous.com/post/1006/create-custom-icons-for-twitter-bootstrap-easily

我產生與圖標的精靈，把它的資產/ IMG /圖標（我只是把它命名爲sprite.png）

將所有CSS複製並粘貼到我放入所有自定義CSS的.css文件中。

我想讓它顯示「服務模塊」在我創建，但沒有喜悅，但是隻要我指向原來的圖標之一，它的工作。讓我覺得我試圖引用這些圖標的方式可能是錯誤的。

代碼示例：

自定義CSS：

[class^="cus-"], 
[class*=" cus-"] { 
    display: inline-block; 
    width: 17px; 
    height: 16px; 
    *margin-right: .3em; 
    line-height: 14px; 
    vertical-align: text-top; 
    background-image: url("icons/sprite.png"); 
    background-position: 14px 14px; 
    background-repeat: no-repeat; 
} 
[class^="cus-"]:last-child, 
[class*=" cus-"]:last-child { 
    *margin-left: 0; 
} 

cus.check{ background-position: 0 0; width: 16px; height: 16px; } 
cus.coffee{ background-position: -21px 0; width: 16px; height: 16px; } 
cus.p{ background-position: -42px 0; width: 16px; height: 16px; } 
cus.pentzil{ background-position: -63px 0; width: 16px; height: 16px; } 
cus.simbol{ background-position: -84px 0; width: 16px; height: 16px; } 
cus.smile{ background-position: -105px 0; width: 16px; height: 16px; } 
cus.star2{ background-position: -126px 0; width: 16px; height: 16px; } 
cus.star{ background-position: -147px 0; width: 16px; height: 16px; } 
cus.sun{ background-position: -168px 0; width: 16px; height: 16px; } 

筆者認爲：

<div class="span4 servive-block-in servive-block-colored servive-block-grey"> 
       <h4>Avoid disputes over team composition</h4> 
       <p style="color:black;">Players will randomly be arranged in teams — avoiding the human factor.</p> 
       <p><i class="cus-check"></i></p> 
      </div> 

它保持完全相同的 - 沒有任何圖標 - 但是當我改變類「圖標微笑「，這是原來的一個，它的作品。

我試着擺弄周圍引用這些精靈的URL，但沒有任何的喜悅。

我是否錯過了一些非常明顯的東西？

Answer 1

類在你的圖標元素是「CUS檢查」，但有一樣，在粘貼的CSS文件中沒有類。

cus.check{ background-position: 0 0; width: 16px; height: 16px; } 

應該

.cus-check{ background-position: 0 0; width: 16px; height: 16px; } 

匹配所需的類名。因此與

.cus-XXXX 

全部更換

cus.XXXXX 

，並應解決您的問題。