бутстраповские иконки не отображающие

Question

Я скачал изображение для бутстрэпами иконок, и я хотел бы использовать их на веб-странице

У меня есть изображение, и правильный CSS

Но они Арент показывая что-либо вообще.

CSS

.icon-home { 
    background-image:url(../img/glyphicons-halflings.png); 
    background-position: 0 -24px; 
} 

HTML

     <div class="col"> 
          <span class="icon-home"></span> 
          <p>Pittsburgh, PA 15276</p> 
         </div> 

Fiddle

https://jsfiddle.net/jwct6rmk/

Я загрузил изображение на счет Imgur.

Answer 1

Вам не хватает стиля. В основном display:block на элементе span.

Попробуйте это:

.icon-home { 
    background-image:url(http://i.imgur.com/UMAlj55.png); 
    background-position: 0 -24px; 
    width: 12px; 
    height: 12px; 
    display:block; 
} 

или лучше:

.icon { 
    background-image:url(http://i.imgur.com/UMAlj55.png); 
    width: 12px; 
    height: 12px; 
    display:block; 
} 

.icon-home { 
    background-position: 0 -24px; 
} 

.icon-car { 
    background-position: 0 -36px; 
} 

...