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 Zmiana ikon Menu, Search, Login i Koszyk w menu dla urządzeń mobilnych

Dyskusja w 'Poradniki, gotowe rozwiązania' rozpoczęta przez użytkownika WodzBorsuk, 31 Marzec 2020.

  1. WodzBorsuk

    WodzBorsuk Zaglądacz

    Wiadomości:
    14
    Docenione treści:
    2
    Udało mi się rozwiązać problem z którym męczyłem się od paru dni i postanowiłem podzielić się rozwiązaniem, a więc do dzieła:

    Jak zmienić standardowe ikony w menu RWD.

    1. Potrzebujemy ikonek, których chcemy użyć. Ja wykorzystałem Flaticon gdzie dodałem interesujące mnie ikony do kolekcji, którą pobrałem w formacie Ikon Font (odpowiednio spreparowana czcionka zawierająca symbole (jak FontAwesome używane domyślnie)

    2. Po ściąciągnięciu fontu, z paczki zip wyciągamy pliki .eot .svg .ttf .wof i wrzucamy je do własnych plików graficznych użytkownika.

    3. otwieramy plik CSS i kopiujemy do własnego CSS tę część:
    HTML:
    @font-face {
      font-family: "Flaticon";
      src: url("./Flaticon.eot");
      src: url("./Flaticon.eot?#iefix") format("embedded-opentype"),
           url("./Flaticon.woff2") format("woff2"),
           url("./Flaticon.woff") format("woff"),
           url("./Flaticon.ttf") format("truetype"),
           url("./Flaticon.svg#Flaticon") format("svg");
      font-weight: normal;
      font-style: normal;
    }
    
    @media screen and (-webkit-min-device-pixel-ratio:0) {
      @font-face {
        font-family: "Flaticon";
        src: url("./Flaticon.svg#Flaticon") format("svg");
      }
    }
    i zapamiętujemy kody symboli na samym dole CSS:
    HTML:
    .flaticon-user:before { content: "\f100"; }
    .flaticon-shopping-bag:before { content: "\f101"; }
    .flaticon-search:before { content: "\f102"; }
    .flaticon-menu:before { content: "\f103"; }
    4. We własnym stylu CSS wrzucamy następujące tagi:
    HTML:
    .fa-align-justify:before {
        content: "\f103";
        font-family: "Flaticon";
    }
    .fa-search:before {
        content: "\f102";
        font-family: "Flaticon";
    }
    .fa-user:before {
        content: "\f100";
        font-family: "Flaticon";
    }
    .icon-custom-cart:before {
        content: "\f101";
        font-family: "Flaticon";
    }
    
    podmieniając kody \f100 - \f103 na odpowiednie w naszym przypadku (są w kolejności dodawania do kolekcji na Flaticon, zresztą mają sugestywne nazwy zazwyczaj więc łatwo się połapiecie. font-family polecam ustawić dla każdego symbolu osobno, bo jeszcze w kilku miejscach na stronie używany jest FontAwesome i łatwo o pomyłkę.

    Efekt:
    upload_2020-3-31_23-23-43.png

    Pamiętajcie o wklejeniu gdzieś na stronie linka do atrybującego Flaticon, który jest do skopiowania podczas pobierania fontu.

    Tyle.
     
    machum93 lubi to.

Poleć forum znajomym