使用 Bootstrap 的 MVC 项目中未显示自定义图标

Question

我有一个使用 Unify Bootstrap 模板的 MVC 项目。

客户想要自定义图标，所以我遵循以下指南：

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

我用图标生成了一个精灵，把它放在 assets/img/icons 中（我只是将它命名为 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>

它保持完全一样 - 没有任何图标 - 但是当我将该类更改为原始类之一的“icon-smile”时，它可以工作。

我试过摆弄引用精灵的 url，但也没有任何乐趣。

我是否遗漏了一些非常明显的东西？

Answer 1

图标元素中的类是“cus-check”，但粘贴的 css 文件中没有类似的类。

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

应该是

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

匹配你想要的类名。因此全部替换

cus.XXXXX

与

.cus-XXXX

这应该可以解决您的问题。