Bootstrap tutorial logo

Ikony Font Awesome

autor: Robert

15 lipca 2013

Nasze menu, button czy lista ładniej wyglądają gdy posiadają również ikonkę prócz samego tekstu. Zastosowanie znajdują tutaj ikony Font Awesome których zaletą jest to, że są wektorowe (wyglądają dobrze niezależnie od powiększenia), można je obracać a także nakładać na siebie.
Aby korzystać z ikon należy dołączyć je do swojego projektu.

Z racji tego, że ikony są niczym innym jak arkuszem stylów CSS to najprostszym sposobem jest dołączenie ich w sekcji <head> aby były pobierane z zewnętrznego serwera CDN.
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

Co jakiś czas pojawia się nowa wersja Font Awesome, więc przed zamieszczeniem linka sprawdzajcie na oficjalnej stronie czy nie pojawiło się nowe wydanie

Wykorzystanie ikony

Aby wyświetlić ikonkę korzystamy ze znacznika <i class="fa fa-nazwa-ikony"></a>
Lista dostępnych ikon znajduje się TUTAJ

fa-github
fa-bitcoin
fa-arrow-right
fa-refresh
fa-facebook

Zmiana rozmiarów ikon

Rozmiary ikon zmieniamy poprzez dodanie klasy .fa-lg, .fa-2x, .fa-3x, .fa-4x, .fa-5x.

fa-lg
fa-2x
fa-3x
fa-4x
fa-5x

Stała szerokość ikon

Z racji tego, że ikony mają różne szerokości to czasami po stworzeniu z nich listy nie jest ona idealnie równa. Z pomocą przychodzi tutaj klasa .fa-fw, która dodaje boczne marginesy dla ikon.

Listy z ikonami

Nic nie stoi na przeszkodzie by zamiast standardowych kropek elementy listy zawierały ikony Font Awesome.W tym celu do znacznika <ul> dodajemy klasę .fa-ul a wewnątrz każdego znacznika <li> umieszczamy standardowy kod ikonki z klasą .fa-li.

  • Listy
  • Mogą zawierać
  • ikony Font Awesome
  • jako ich wypunktowania

Ramki oraz przestawianie ikon

Poprzez klasę .pull-left możemy ustawiać ikonę obok tekstu co ładnie spisuje się na przykład podczas cytowania.
Klasa .fa-border dodaje wokół ikony jasną ramkę.


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.

Obracające się ikony

Dzięki animacjom w CSS3 możemy wprawić naszą ikonę w ruch. Pamiętajcie, że jeszcze nie wszystkie przeglądarki wspierają tą funkcję.
Aby animować ikonkę dodajemy jej klasę .fa-spin

Obracanie ikon

Gdy chcemy by nasza ikona była obrócona o 90, 180, 270 stopni do dodajemy do niej odpowiednio klasy: fa-rotate-90, fa-rotate-180, fa-rotate-270. Aby stworzyć lustrzane odbicia ikon korzystamy z klas: .fa-flip-horizontal, .fa-flip-vertical

normal
fa-rotate-90
fa-rotate-180
fa-rotate-270
fa-flip-horizontal
icon-flip-vertical

Nakładanie ikon

Możemy nałożyć 2 ikony na siebie, przykładowo gdy chcemy uzyskać czarne tło lub znaczek zakazu a taka ikona nie występuje w dokumentacji. W takim przypadku najpierw otwieramy <span> z klasami .fa-stack fa-lg (używam większego rozmiaru ikon gdyż na standardowym stają się one nieczytelne. Następnie wewnątrz umieszczamy kod 2 ikon z czego ta większa czyli przykładowo ramka musi mieć klasę .fa-stack-2x a ikona wewnątrz czyli mniejsza musi mieć klasę .fa-stack-1x. W przypadku gdy nasza ikona oraz ramka są czarne do dla ikony trzeba dodać klasę .fa-inverse która zmieni jej kolor na biały. Klasę .fa-inverse można stosować nie tylko w tym przypadku ale zawsze gdy chcemy zmienić kolor ikony na przeciwny.

fa-twitter wewnątrz fa-square-o
fa-flag wewnątrz fa-circle
fa-terminal wewnątrz fa-square
fa-ban wewnątrz fa-camera

Połączenie Font Awesome i Bootstrap

Oczywiście Font Awesome znakomicie współpracuje z Bootstrapem. Poniżej przykłady ich wykorzystania.

Buttony z ikonami

Aby dodać ikonę do naszego przycisku wystarczy wkleić kod do jego wnętrza.

USUŃ!
Ustawienia
Font Awesome
Wersja 4.2.0

Grupy buttonów

Przy tworzeniu grup przycisków idea jest taka sama.

Pola formularzy

Ikony można również dodać do pól formularzy. W tym przypadku wewnątrz diva z klasą .input-group umieszczamy span z klasą .input-group-addon a wewnątrz niego kod odpowiadający za wyświetlanie ikony.

Rozwijany przycisk z ikonami

Prócz zwykłego przycisku możemy stworzyć również taki który się rozwija i zawiera listę. Lista ta również może posiadać ikony.



Post się przydał? Oceń go proszę.
1 Gwiazdka2 Gwiazdki3 Gwiazdki4 Gwiazdki5 Gwiazdek (16 głosów, średnia: 5,00 na 5)
Loading...

Komentarze: 19 komentarzy

Tomasz 16 października 2014 o 18:10

Ta klasa margin-bottom-sm przy divach input-group chyba nic nie robi?

Odpowiedz
    Robert 16 października 2014 o 20:28

    No faktycznie:) Czasami korzystam z gotowego kodu z angielskiej dokumentacji i tam zdarzają się nie Bootstrapowe klasy. Dziękuję za zwrócenie uwagi, już poprawiłem.

    Odpowiedz
rachman 28 marca 2015 o 18:18

Świetna sprawa :) Orientujesz się czy działa to we wszystkich przeglądarkach, w tym mobilnych?

Odpowiedz
    Robert 30 marca 2015 o 08:07

    Działają:) Prócz IE7 ale z tego, mam nadzieję, już nikt nie korzysta:)

    Odpowiedz
Maciej 11 maja 2015 o 18:42

Czy mógłbyś doradzić jak zrobić żeby w przypadku accordion przy zwiniętej zakładce ikoną była strzałka w dół a przy rozwiniętej strzałka w górę. Świetny kurs, pozdrawiam!

Odpowiedz
    Robert 12 maja 2015 o 07:59
    $(document).ready(function(){    
        $('#accordProfile').on('shown', function () {
           $(".icon-chevron-down").removeClass("icon-chevron-down").addClass("icon-chevron-up");
        });
    
        $('#accordProfile').on('hidden', function () {
           $(".icon-chevron-up").removeClass("icon-chevron-up").addClass("icon-chevron-down");
        });
    })
    
    Odpowiedz
      Maciej 12 maja 2015 o 17:52

      To w js file mam dodać ?

      Odpowiedz
        Robert 13 maja 2015 o 08:15

        Możesz dodać w sekcji head albo do zewnętrznego pliku JS, który będziesz importował w pliku index.html

        Odpowiedz
Maciej 26 sierpnia 2015 o 13:45

Takie pytanie, jak linkować do konkretnego page’a jeżeli mam menu zrobione w oparciu o collapse navbar-collapse ? Nie zmienia się w ogóle adres strony, bo to wszystko jest jedną podstroną tak naprawdę. Pytam bo chciałbym to pod alalytics podpiąć.

Odpowiedz
    Robert 27 sierpnia 2015 o 08:04

    Linkowanie w ramach jednej podstrony odbywa się za pomocą kotwicy do danego diva. Tworzysz diva z ID=”sekcja1″ a link do niego wygląda

    Odpowiedz
Jurek 21 stycznia 2016 o 20:37

Witaj
Bardzo to wszystko proste i klarownie wyjaśnione ale mam takie pytanie jak poprawić prawdopodobnie mój błąd. Po zmianie „kropeczki” na „check” zmienia mi się formatowanie tekstu tzn druga linijka zachodzi poz ikonę znacznika. Podpowiedz jak z tego wybrnąć

Odpowiedz
    Jurek 21 stycznia 2016 o 20:44

    Juz opanowałem -inside – outside :)

    Odpowiedz
Jan 6 listopada 2016 o 22:18

Witam, czy bootstrap współpracuje z http://fontello.com/ ?

Odpowiedz
    Robert 7 listopada 2016 o 08:08

    Na pewno można ich używać w połączeniu z Bootstrapem jak i z każdym innym kodem html/css ale nie wiem jak się zachowają w przypadku umieszczenia ich w Bootstrapowym buttonie lub jako element listy. Nie korzystałem z tego, więc nie jestem w stanie udzielić Ci dokładnej odpowiedzi.

    Odpowiedz
Filip 13 listopada 2016 o 20:03

Cześć jestem początkujący proszę podaj dokładnie gdzie mogę wkleić ten link żeby pobierało mi te ikony bo jeszcze się tak dobrze nie orientuje w tych wszytkich plikach na serwerze do presty

Odpowiedz
    Robert 14 listopada 2016 o 07:53

    Najprościej gdzieś w header.php pomiędzy znacznikami head.

    Odpowiedz
      Filip 14 listopada 2016 o 14:12

      czyli wystarczą te znaczniki head i nie ważne w którym miejscu w tym pliku to wpiszę ?? I proszę powiedz mi jeszcze czy jak dobrze się to zapisze to będzie mi dane ikony wyświetlało nawet w zbadaj element ? czy muszę to po prostu wpisać w cssa i dopiero sprawdzać.

      Odpowiedz
        Robert 14 listopada 2016 o 14:49

        Nie wiem jak dokładnie wygląda plik header.php w preście bo nie robię na niej aktualnie nic. Ścieżka do Font Awesome musi się znaleźć pomiędzy znacznikami <head>...</head> Wstaw ją linijkę przed </head>

        Tutaj masz CDNa z najnowszym FA -> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

        Aby wyświetlić ikonę musisz w kodzie HTML umieścić znacznik span z klasą ikony np <span class="fa fa-snowflake-o" aria-hidden="true"></> i taki zapis zobaczysz podczas badania elementu.

        Lista dostępnych ikon znajduje się tutaj -> http://fontawesome.io/icons/

        Odpowiedz