ottieni l'immagine da sprite e aggiungi a un href

Question

Ho aggiunto tutte le mie icone in uno sprite. Ora, ho bisogno di mostrare un'icona da quello sprite con un link. Quando aggiungo lo sprite e ne imposto la posizione di sfondo sul link, tutto lo sfondo del collegamento è lo 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> 

Come faccio a impostare la larghezza e l'altezza dello sprite, in modo che mostri solo un'icona?

È l'unico modo per aggiungere due div nel tag "a"? In primo luogo, il div con l'icona sprite e la larghezza e l'altezza impostate, e nell'altro testo?

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

Answer 1

Si potrebbe utilizzare :before o :after per spostare lo sfondo reale a un altro elemento (pseudo-) che è esattamente la giusta dimensione di un'icona.

Qualcosa di simile a questo:

.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 */ 
} 

un violino: http://jsfiddle.net/rudiedirkx/RG3Kd/ (con dimensioni di sbagliato, perché non ho un buon sprite a portata di mano).

Answer 2

Non si può fare così, quando si fanno gli sprite dovresti avere idea di quanta sarà la larghezza e l'altezza dell'elemento.

È possibile risolvere il problema quando si aggiunge uno span nel tag "a" e si aggiunge lo sfondo ad esso, con larghezza e altezza specifiche. Oppure puoi riorganizzare il tuo sprite.

Answer 3

Utilizzare questo codice in stile:

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

    a span 
    { 
     background-color:#fff;    
     }  

allora questo html:

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