autor: Robert
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
Aby wyświetlić ikonkę korzystamy ze znacznika <i class="fa fa-nazwa-ikony"></a>
Lista dostępnych ikon znajduje się TUTAJ
Rozmiary ikon zmieniamy poprzez dodanie klasy .fa-lg
, .fa-2x
, .fa-3x
, .fa-4x
, .fa-5x
.
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.
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
.
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.
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
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
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
Oczywiście Font Awesome znakomicie współpracuje z Bootstrapem. Poniżej przykłady ich wykorzystania.
Aby dodać ikonę do naszego przycisku wystarczy wkleić kod do jego wnętrza.
USUŃ!
Ustawienia
Font Awesome
Wersja 4.2.0
Przy tworzeniu grup przycisków idea jest taka sama.
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.
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.
$(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
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ąć
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.
Odpowiedzczyli 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ć.
OdpowiedzNie 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