PORADNIK Obrazki/teksty przed elementami w sklepie

Wiele osób pyta o to jak umieścić obrazek lub cokolwiek innego przed różnymi elementami w sklepie, przykładowo przed jakimś menu lub linkiem.
Sprawa jest bardzo prosta.
Powiedzmy, że mamy górę sklepu wyglądającą tak:


i chcemy przed elementami menu wstawić powiedzmy literki ABC, robimy to następująco:
We własnym stylu dodajemy:

Kod:

#headlink14 > span::before {
    content: "ABC";
}
#headlink6 > span::before {
    content: "ABC";
}
#headlink1 > span::before {
    content: "ABC";
}
#headlink8 > span::before {
    content: "ABC";
}
#headlink9 > span::before {
    content: "ABC";
}   
#headlink10 > span::before {
    content: "ABC";
}   
#headlink11 > span::before {
    content: "ABC";
}   

numerki headlink możemy zobaczyć np w źródle sklepu

Otrzymamy efekt:

Oczywiście w każdym content możemy wpisać coś innego, dzięki czemu możemy mieć przy każdym elemencie menu inną treść.

Ok, ale jak wstawić tu np ikonkę z fa-icon?
Powiedzmy, że przy pierwszym menu wstawiamy ikonkę "plik"
w moim CSS wstawiamy:

Kod:

#headlink14 > span::before {
font-family: FontAwesome;
content: "\f15b";
padding-right:5px;
}

numerki do content możemy pobrać ze strony: https://fontawesome.com/v4.7.0/
UWAGA!! działa tylko część tych ikon
tu dodatkowo dodałem prawe wypełnienie aby ikonka była odsunięta od napisu, za to odpowiada padding.
Efekt będzie taki:

a po najechaniu oczywiście:

 

Jeśli chcemy użyć obrazka musimy go przygotować w odpowiedniej wielkości i wrzucić na sklep aby mieć do niego link, wtedy we własnym CSS wrzucamy:

Kod:

#headlink14 > span::before {
content: url('https://sklep-demo.home.pl/public/flags/pl_PL.png');
padding-right:5px;
}

osiągniemy efekt:

i oczywiście po najechaniu będziemy mieli;

 

Dzięki TheL. Super poradnik! A czy istnieje jakiś sposób na to, żeby sklep zaczął współpracować z ikonami Font Awesome 5?

 

@kolukas
w integracjach własnych w head dodajesz nową czcionkę w następujący sposób:

Kod:

<link href="https://use.fontawesome.com/releases/v5.10.1/css/all.css" rel="stylesheet">

Później w sekcji CSS będziesz mógł korzystać z font awesome 5 w następujący sposób:

Kod:

.klasa:before{
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
   content: "\f167";
}

Może być taka systuacja, iż niektóre ikony z poprzedniej wersji font awesome będą wymagały wymiany ale to już trzeba zobaczyć na konkretnym przykładzie.

 

Dzięki za odpowiedź! Faktycznie działa. W końcu osiągnąłem zamierzony efekt w menu .

 

hej, pomoże ktoś jak dodać nową belke w nagłówku nad belką login w której zawre numer telefonu i kwotę darmowej dostawy;-)

pozd
Paula

 

Dzięki za poradę. Użyteczna. Ale nasuwają się dwa dalsze pytania
1. Jak obrazkiem zastąpić tekst w menu?
2. Jak dodać/zastąpić obrazkiem elementy podmenu?

 

możesz zrobić to używając id linków z menu i dodając im background-image a dla tekstu przycisku ustawiasz przezroczysty kolor czcionki aby zachować wymiary przycisku
Efekt może być np taki

 

A napiszesz może jak tego dokonać?

 

Np.

Kod:

a#headlink1 {
    background-image: url(/skins/user/rwd_clickshop_1/images/logo.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    & span {
        color: transparent;
    }
}

gddzie headlink1 to id konkretnej kategorii w sklepie oczywiście powtórzenia oraz rozmiar możesz modyfikować według potrzeby

 

Pięknie, dodałem jeszcze wyrównanie:

Kod:

background-position: center; 

i hover i śmiga. Bardzo dziękuję. Całość może wyglądać tak:

Kod:

a#headlink1 {
    background-image: url(/skins/user/rwd_clickshop_1/images/logo.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center;
    & span {
        color: transparent;
    }
}
a#headlink1:hover {
    background-image: url(/skins/user/rwd_clickshop_1/images/logo2.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center;
    & span {
        color: transparent;
    }
}