使用Bootstrap在MVC项目中不显示自定义图标

时间:2014-01-18 09:56:24

标签: html css asp.net-mvc twitter-bootstrap

我有一个使用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”时,这是原始的一个,这是有效的。

我试图摆弄引用精灵的网址,但也没有喜悦。

我错过了一些非常明显的东西吗?

1 个答案:

答案 0 :(得分:3)

图标元素中的类是“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

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