Custom icons not displaying in MVC project using Bootstrap

Question

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?

debug and check in the applied CSS if icon gets loaded or not.. "If it says failed to load image", then your icon path is not correct.. — Prasanna Aarthi
– Prasanna Aarthi, Commented Jan 18, 2014 at 10:07
When I inspect the element using chrome I can see it's using the sprite, it's just not displaying the correct (or any) icon. — Hanno Opperman
– Hanno Opperman, Commented Jan 18, 2014 at 10:25
As soon as I change the height and width in the main class, it starts displaying the icon, but the same one. — Hanno Opperman
– Hanno Opperman, Commented Jan 18, 2014 at 11:06

heads5150 · Accepted Answer · 2014-01-18 11:05:36Z

3

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.

answered Jan 18, 2014 at 11:05

heads5150

7,5333 gold badges28 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

heads5150 Over a year ago

@Hanno Opperman No problems. It happens to all of us at one time or another.

Collectives™ on Stack Overflow

Custom icons not displaying in MVC project using Bootstrap

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related