Bild von Sprite und fügen Sie in eine href

Question

Ich habe alle meine Symbole in ein Sprite hinzugefügt. Jetzt muss ich ein Symbol von diesem Sprite mit einem Link zeigen. Wenn ich das Sprite hinzufüge und seine Hintergrundposition auf der Verbindung festlege, ist der gesamte Hintergrund der Verbindung das Sprite-Sprite.

a{ 
    background-image:url('sprite.png'); 
} 
.sprite_link_icon{ 
    padding-left: 20px; 
    background-position: -36px -10px 
} 
<a class="sprite_link_icon" href="">test link test</a> 

Wie stelle ich die Breite des Sprites und Höhe, so dass es nur ein Symbol zeigt?

Ist die einzige Möglichkeit, zwei divs im "a" -Tag hinzuzufügen? Zuerst das div mit Sprite-Icon und Breite und Höhe einstellen, und im anderen Text?

<a href=""> 
    <div class="sprite_link_icon" style="width: 10px; height: 10px;"></div> 
    <div>test link</div> 
</a> 

Answer 1

könnten Sie :before oder :after verwenden, um den tatsächlichen Hintergrund zu einem anderen (pseudo-) Elemente zu bewegen, die genau die richtige Größe eines Symbols ist.

Etwas wie folgt aus:

.icon { 
    /* nothing special here, just a dynamic element, 
    maybe with a fixed height? */ 
} 
.icon:before { 
    content: ''; 
    display: inline-block; 
    height: 16px; 
    width: 16px; 
    background: url(...) etc; 
    margin-right: .25em; /* might not be necessary due to inline-block */ 
} 

Eine Geige: http://jsfiddle.net/rudiedirkx/RG3Kd/ (mit falschen Größen, denn ich habe kein gutes Sprite praktisch).

Answer 2

Sie können es nicht so machen, wenn Sie Sprites machen, sollten Sie sich Gedanken machen, wie groß die Breite und die Höhe des Elements sein wird.

Sie können das Problem lösen, wenn Sie einen Bereich im Tag "a" hinzufügen und den Hintergrund dazu mit einer bestimmten Breite und Höhe hinzufügen. Oder Sie können Ihr Sprite neu anordnen.

Answer 3

Verwenden Sie diesen Code in der Art:

a 
    { 
     background-color:#00cc00; 
     padding-left:20px; 
     } 

    a span 
    { 
     background-color:#fff;    
     }  

dann diese html:

<a href="#"><span>test link</span></a>