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:
    521
    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
     
    kolukas lubi to.
  2. TheL

    TheL @Lider VIP Moderator forum

    Wiadomości:
    2 363
    Docenione treści:
    521
    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.
  3. kolukas

    kolukas Stały bywalec

    Wiadomości:
    36
    Docenione treści:
    8
    Dzięki TheL. Super poradnik! A czy istnieje jakiś sposób na to, żeby sklep zaczął współpracować z ikonami Font Awesome 5?
     
  4. machum93

    machum93 Stały bywalec

    Wiadomości:
    42
    Docenione treści:
    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.
     
    kolukas lubi to.
  5. kolukas

    kolukas Stały bywalec

    Wiadomości:
    36
    Docenione treści:
    8
    Dzięki za odpowiedź! Faktycznie działa. W końcu osiągnąłem zamierzony efekt w menu :).
     

Poleć forum znajomym