html - 使用 Bootstrap 的 MVC 元素中不显示自定义图标

Question

我有一个使用 Unify Bootstrap 模板的 MVC 元素。

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

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

我用图标生成了一个 Sprite ，把它放在 assets/img/icons 中(我只是把它命名为 sprite.png)

将所有 CSS 复制并粘贴到我的 .css 文件中，我在其中放置了所有自定义 CSS。

我想让它显示在我创建的“服务 block ”上，但并不令人高兴，但是只要我指向其中一个原始图标，它就会起作用。让我觉得我尝试引用图标的方式可能有问题。

代码示例:

自定义 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”时，它起作用了。

我试过摆弄引用 sprite 的 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

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