pobierz obraz z ikonki i dodaj do href

Question

Dodałem wszystkie moje ikony do ikonki. Teraz muszę pokazać jedną ikonę z tego duszka z linkiem. Po dodaniu ikonki i ustawieniu jej tła na łączu, wszystkie tło linku jest ikonką ikonki.

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> 

Jak ustawić szerokość ikonki i wysokość, tak, że pokazuje tylko jedna ikona?

Czy jest to jedyny sposób dodania dwóch elementów div w znaczniku "a"? Po pierwsze, div z ikoną ikonki i ustawieniem szerokości i wysokości, a w drugim tekście?

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

Answer 1

Można użyć :before lub :after przenieść rzeczywiste tło do innego (pseudo) element, który jest dokładnie odpowiedni rozmiar z jednej ikony.

coś takiego:

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

ryba: http://jsfiddle.net/rudiedirkx/RG3Kd/ (z niewłaściwych rozmiarach, bo nie mam dobrego ikonki poręczny).

Answer 2

Nie możesz tego zrobić, kiedy robisz duchy, powinieneś wiedzieć, ile będzie szerokości i wysokości elementu.

Możesz wydostać się z problemu po dodaniu rozpiętości w znaczniku "a" i dodaniu do niego tła o określonej szerokości i wysokości. Lub możesz zmienić swój sprite.

Answer 3

użyć tego kodu w stylu:

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

    a span 
    { 
     background-color:#fff;    
     }  

potem to html:

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