Ikony Font Awesome | Kurs / Tutorial Bootstrap

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.

Home Library Applications Settings

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.

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.

Profil

Podobne

Post się przydał? Oceń go proszę.

(20 głosów, średnia: 5,00 na 5)

Komentarze: 19 komentarzy

Kliknij tutaj, aby anulować odpowiadanie.

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

Robert 22 stycznia 2016 o 07:58

Cieszę się, że się udało:)

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

Ikony Font Awesome autor: Robert

15 lipca 2013

Wykorzystanie ikony

Zmiana rozmiarów ikon

Stała szerokość ikon

Listy z ikonami

Ramki oraz przestawianie ikon

Obracające się ikony

Obracanie ikon

Nakładanie ikon

Połączenie Font Awesome i Bootstrap

Buttony z ikonami

Grupy buttonów

Pola formularzy

Rozwijany przycisk z ikonami

Podobne

Komentarze: 19 komentarzy

Tomasz 16 października 2014 o 18:10

Robert 16 października 2014 o 20:28

rachman 28 marca 2015 o 18:18

Robert 30 marca 2015 o 08:07

Maciej 11 maja 2015 o 18:42

Robert 12 maja 2015 o 07:59

Maciej 12 maja 2015 o 17:52

Robert 13 maja 2015 o 08:15

Maciej 26 sierpnia 2015 o 13:45

Robert 27 sierpnia 2015 o 08:04

Jurek 21 stycznia 2016 o 20:37

Jurek 21 stycznia 2016 o 20:44

Robert 22 stycznia 2016 o 07:58

Jan 6 listopada 2016 o 22:18

Robert 7 listopada 2016 o 08:08

Filip 13 listopada 2016 o 20:03

Robert 14 listopada 2016 o 07:53

Filip 14 listopada 2016 o 14:12

Robert 14 listopada 2016 o 14:49

Ikony Font Awesome
autor: Robert