1. Forum używa plików Cookies. Dowiedz się więcej o celu ich używania i możliwości zmiany ustawień Cookies w przeglądarce. Czytaj więcej...

PORADNIK Obrazki/teksty przed elementami w sklepie

Dyskusja w 'Poradniki, gotowe rozwiązania' rozpoczęta przez użytkownika TheL, 3 Luty 2019.

  1. TheL

    TheL @Lider VIP Moderator forum

    Wiadomości:
    2 363
    Docenione treści:
    519
    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:
    001.png

    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:
    002.png
    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:
    003.png
    a po najechaniu oczywiście:
    004.png
     
  2. TheL

    TheL @Lider VIP Moderator forum

    Wiadomości:
    2 363
    Docenione treści:
    519
    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:
    005.png
    i oczywiście po najechaniu będziemy mieli;
    006.png
     
    LukaszC, Przemek143 oraz casar lubią to.

Poleć forum znajomym