ROZWIĄZANE Zmiana ikony w nagłówku stylu RWD

Czy ktoś mógłby mi powiedzieć w jaki sposób zmienić ikonę rejestracji w motywie RWD i jak dodać ikonę telefonu? Dzięki!

Sklep: www.embpro.pl

 

Przeanalizowałem kod źródłowy Twojej strony i wspomniany przez Ciebie element (numer telefonu) został dodany przez Ciebie do sklepu w ten sposób:

Kod:

<li>
<a href="/kontakt/" title="Kontakt z nami" style="font-color:#fff; font-weight:bold; margin-top:3px;">
Tel. 600-457-202
</a>
</li>

Poniżej dodaję przykład jak dodawany jest element odpowiedzialny za rejestrację w nagłówku (czyli jak dodawany jest napis "Zarejestruj się" wraz z ikonką po lewej):

Kod:

<li class="register">
<a href="/pl/reg" title="Zarejestruj się" class="register">
<img src="/public/images/1px.gif" alt="" class="px1">
<span>Zarejestruj się</span>
</a>
</li>

Zwróć uwagę na podstawie powyższego przykładu z rejestracją, w jaki sposób dodawany jest obrazek i odpowiednio zmodyfikuj pliki swojego szablonu. Spróbowałbym umieścić to w taki sposób (zamienić kod podany w pierwszym przykładzie z tym poniżej):

Kod:

<li class="register">
<a href="/kontakt/" title="Kontakt z nami" class="kontakt">
<img src="/public/images/1px.gif" alt="" class="px1">
<span>600-457-202</span>
</a>
</li>

Następnie we własnym stylu CSS należy jeszcze dodać nową klasę "kontakt":

Kod:

.login-bar a.kontakt img {
    background: url('../../styles/../images/nazwa_pliku.png') top right no-repeat;
    width: 16px;
    height: 25px;
    display: inline-block;
    margin-right: 10px;
}

Zamiast "nazwa_pliku.png" umieść nazwę obrazka, który ma być wyświetlany obok numeru telefonu.

Przy okazji proszę o wyrozumiałość, ponieważ nie testowałem powyżej opisanego rozwiązania, przygotowałem go "z głowy". Według mnie wskazane powyżej rozwiązanie powinno dodać odpowiednią ikonkę we wskazanym przez Ciebie miejscu.

 

Niestety ikona się nie pojawia

 

Wiem. dodałem plik graficzny, podaję jego ścieżkę i dalej nie pojawia się na stronie

 

Sugeruję dodanie obrazka o takiej samej wielkości oraz szerokości jak ikona od rejestracji.

Ikona od rejestracji ma wielkość 16px na 16px, zmniejsz swoją ikonkę telefonu i wrzuć ponownie na serwer. Obecnie ikona telefonu ma wielkość: 32px na 32px.

 

Dobra, działa.

Kod do własnego CSS jest troszkę inny. Mianowicie:

Kod:

.login-bar a.kontakt img {
    background: url('../images/user/PHONE.png') top right no-repeat;
    width: 26px;
    height: 25px;
    display: inline-block;
    margin-right: 4px;
}