リストアイテムのスプライト

Question

こんにちは 私はソーシャルメディアアイコンのスプライトを簡単なリストに使用しようとしています。ここ は、私が期待するものである：

私は、下記のコードを試してみましたが、残念ながら、それは何も表示されません。 誰でも私に正しい方法でそれを使用する方法を教えてもらえますか？

.sprite { 
 
    background-image: url(img/spr.png); 
 
    background-repeat: no-repeat; 
 
    display: block; 
 
} 
 
.soc1 { 
 
    width: 37px; 
 
    height: 37px; 
 
    background-position: 0 0; 
 
} 
 

 
.soc2 { 
 
    width: 37px; 
 
    height: 37px; 
 
    background-position: 0 -37px; 
 
} 
 

 
.soc3 { 
 
    width: 37px; 
 
    height: 37px; 
 
    background-position: 0 -74px; 
 
}

<ul class="secondlist"> 
 
    <li class="secondlist_item"> 
 
    <a href="#" class="soc1" title="Facebook"></a> 
 
    </li> 
 
    <li class="secondlist_item"> 
 
    <a href="#" class="soc2" title="AskMe"></a> 
 
    </li> 
 
    <li class="secondlist_item"> 
 
    <a href="#" class="soc3" title="Twitter"></a> 
 
    </li> 
 
    <li class="secondlist_item"> 
 
    <a href="#" class="soc4" title="MySpace"></a> 
 
    </li> 
 
    <li class="secondlist_item"> 
 
    <a href="#" class="soc5" title="Feed"></a> 
 
    </li> 
 
</ul>

Answer 1

コメントで述べたように：あなたはとても使い、例えばクラスでスプライトをロードする必要があり

class="sprite soc1" 

変更CSSへ：

.sprite { 
    background-image: url(img/spr.png); 
    background-repeat: no-repeat; 
    display: block; 
    width: 37px; 
    height: 37px; 
} 
.soc1 { 
    background-position: 0 0; 
} 

.soc2 { 
    background-position: 0 -37px; 
} 

.soc3 { 
    background-position: 0 -74px; 
} 

それからちょうど例えば使用していますsoc1を使用してスプライトの位置を設定します。