CODEWITHSUNDEEP
htmlcssasp.net-mvctwitter-bootstrap
Hanno Opperman
Hanno Opperman

Reputation: 143

Custom icons not displaying in MVC project using Bootstrap

I have a MVC project using the Unify Bootstrap template.

Clients wanted custom icons so I followed the following guide:

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

I generated a sprite with the icons, put it in assets/img/icons (I just named it sprite.png)

Copied and pasted all the CSS into my .css file where I put all the custom css.

I want to make it display on a "service-block" I've created, but no joy, however as soon as I point towards one of the original icons it does work. Makes me think something is wrong in the way I'm trying to reference the icons maybe.

Code examples:

Custom 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; }

In my view:

<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>

It stays exactly the same - no icon whatsoever - however when I change that class to "icon-smile" which is one of the original ones, that works.

I've tried fiddling around with the url that references the sprite, but to no joy either.

Am I missing something really obvious?

Upvotes: 0

Views: 605

Answers (1)

heads5150
heads5150

Reputation: 7443

The class in your icon element is "cus-check" but there is no class like that in your pasted css file.

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

should be

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

matching the class name that you want. Therefore replace all 

cus.XXXXX

with 

.cus-XXXX

and that should fix your issue.

Upvotes: 3

Related Questions