我有一个使用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”时,这是原始的一个,这是有效的。
我试图摆弄引用精灵的网址,但也没有喜悦。
我错过了一些非常明显的东西吗?
答案 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
这应该可以解决您的问题。