Font Awesome 6: Pełna recenzja
- 1 Jak zainstalować Font Awesome
- Metoda 1.
- Metoda 2.
- 2 Jak używać niesamowitych ikon czcionki
- 1 ikony standardowe
- 2 duże ikony
- 3 ikony o stałej szerokości
- 4 ikony do listy Bulleted
- 5 ikon oprawionych i cytatów
- 6 animowanych ikon
- 7 Przekształcone ikony
- 8 ikony kombinacji
- 3 Font Awesome 4.5.0 collection, classes orazcss code to insert using the content property
- 4 powiązane zasoby
- Rozmiar ikony
- Kolor ikony
- Często Zadawane Pytania
Font Awesome to zbiór skalowalnych ikon wektorowych. Ikony można sformatować za pomocą właściwości CSS, ustawić ich kolor, rozmiar, cień i wiele innych. Wersja czcionka 5.5.0 zawiera 605 ikon.
1 Jak zainstalować Font Awesome
Metoda 1.
Użyj wersji pliku Font-Awesome.css, dodając następujący kod do<head> Sekcja:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">Po podłączeniu czcionki możesz użyć ikon w witrynie.
Metoda 2.
Pobierz czcionkę z Font Awesome . Rozpakuj archiwum i prześlij dwa foldery z archiwum do serwera witryny - CSS i czcionek. Jeśli masz już foldery z takimi nazwami na swojej stronie, musisz tylko dodać pliki z pobranych folderów do nich.
Możesz użyć pełnej lub minimalnej wersji pliku:
<link rel="stylesheet" href="http://yoursite/css/font-awesome.css"><link rel="stylesheet" href="http://yoursite/css/font-awesome.min.css ">2 Jak używać niesamowitych ikon czcionki
Ikony można dodać do strony internetowej na dwa sposoby: ustawiając odpowiednie klasy dla<i> oraz<span> elements, lubby adding them to the desired element using the :before, :after pseudo-elements orazthe appropriate value of the content property.
<i class="fa fa-home fa-fw"></i> li: Przed {content: "\ f015";/ * Dodaj ikonę domową */Font-Family: Fontawesome; Color: #Aaaaaa; Margin-Right: 10px;}1 ikony standardowe
Font Awesome jest zaprojektowany do użycia z elementami wbudowanymi. Aby dodać ikony, najpierw musisz ustawić klasę FA na<i> lub<span> element.
Aby dodać wybraną ikonę przed lub po elemencie, pusty<i></i> lub<span></span> Element jest dodawany do elementu, który przypisuje się klasę ikon, a także dodatkową klasę, która rozszerza styl.
<i class="fa fa-camera-retro"></i>2 duże ikony
Aby zwiększyć rozmiar ikony w stosunku do jej pojemnika, użyj klas FA-LG (wzrost 33%), FA-2X, FA-3X, FA-4X, FA-5X.
<i class="fa fa-camera-retro fa-lg"></i> <i class="fa fa-camera-retro fa-2x"></i> <i class="fa fa-camera- retro fa-3x"></i> <i class="fa fa-camera-retro fa-4x"></i> <i class="fa fa-camera-retro fa-5x"></i>3 ikony o stałej szerokości
Use the fa-fw class to fix the width of the icon. This can be useful for designing navigation lublists on the site.
<ul> <li><a href="#"><i class="fa fa-home fa-fw"></i> Dom</a></li> <li><a href="# "><i class="fa fa-book fa-fw"></i> Biblioteka</a></li> <li><a href="#"><i class="fa fa-pencil fa -fw"></i> Aplikacje</a></li> <li><a href="#"><i class="fa fa-cog fa-fw"></i> Ustawienia</a ></li></ul>4 ikony do listy Bulleted
Użyj klas FA-UL i FA-LI, aby zastąpić domyślne pociski w<ul>…</ul> Lista opuchniętowa.
<ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>element listy</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>element listy</li> <li><i class="fa-li fa fa-square"></i>element listy</li></ul>5 ikon oprawionych i cytatów
Use the fa-border class to set the border for the icon. The pull-right orazpull-left classes will add quotes to the text.
<p><i class="fa fa-quote-left fa-3x pull-left fa-border"></i>LORM IPSUM DOLOR SIT AMET, Konsektowa adipiscing Elit. Donec NEC Purus Congue, Posuere Libero In, Porta Sapien. W lettus sed elit. Sed lacus elit, semper vitae felis id, sodales congue sapien.</p>6 animowanych ikon
Dodaj klasy FA-Spin, FA-Pulse, FA-Refresh, FA-COG, aby skonfigurować ikony wirowania. Animacja nie jest obsługiwana w IE8 - IE9.
<i class="fa fa-spinner fa-spin"></i><i class="fa fa-circle-o-notch fa-spin"></i><i class="fa fa-refresh fa -spin"></i><i class="fa fa-cog fa-spin"></i><i class="fa fa-spinner fa-pulse"></i>7 Przekształcone ikony
Aby obrócić lub odwrócić ikony, użyj klas FA-ROTATE-* i FA-Flip-*.
<i class="fa fa-shield"></i> <i class="fa fa-shield fa-rotate-90"></i> <i class="fa fa-shield fa-rotate-180" ></i><i class="fa fa-shield fa-rotate-270"></i> <i class="fa fa-shield fa-flip-horizontal"></i> <i class=" fa fa-shield fa-flip-vertical"></i>8 ikony kombinacji
You can combine icons by overlaying one on top of the other. Use the fa-stack class for the parent icon, the fa-stack-1x class for the standard size, orazfa-stack-2x for the enlarged size.
<span class="fa-stack fa-lg"> <i class="fa fa-square-o fa-stack-2x"></i> <i class="fa fa-twitter fa-stack-1x" ></i></span> <span class="fa-stack fa-lg"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-flag fa-stack-1x fa-inverse "></i></span> <span class="fa-stack fa-lg"> <i class="fa fa-square fa-stack-2x"></i> <i class="fa fa-terminal fa-stack-1x fa-inverse "></i></span> <span class="fa-stack fa-lg"> <i class="fa fa-camera fa-stack-1x"></i> <i class="fa fa-ban fa-stack-2x text-danger "></i></span>3 Font Awesome 4.5.0 collection, classes orazcss code to insert using the content property
Ikony aplikacji internetowych Fa -adjust - \ f042;Fa -canchor - \ f13d;
Fa -archive - \ f187;
FA -Arrows - \ f047;
Fa -asterisk - \ f069;
Faat - \ f1fa;
FA-Balance-skala-\ f24e;
Fa -ban - \ f05e;
Fa -bank - \ f19c;
Fa -barcode - \ f02a;
Fa-battery-pusty-\ f244;
Fa-battery-half-\ f242;
FA-Battery-Quarter-\ f243;
Fa-battery-trzech kwartałów-\ f241;
Fa-battery-full-\ f240;
Fa -bed - \ f236;
Fa -beer - \ f0fc;
Fa -bell - \ f0f3;
Fa-bell-slash-\ f1f6;
FA -Binoles - \ f1e5;
FA-BirthDay-Cake-\ f1fd;
Fa -bolt - \ f0e7;
Fa -bomb - \ f1e2;
Fa -book - \ f02d;
Aby obrócić lub odwrócić ikony, użyj klas FA-ROTATE-* i FA-Flip-*.
4 powiązane zasoby
Oprócz kolekcji Font Awesome możesz również użyć innych czcionek ikon.
Fontello.Fontello ma dużą kolekcję różnych czcionek ikon. Możesz wybrać ikony, które lubisz i pobrać je na komputer.
Ikona fundamentu.Icon Foundation to kolejna kolekcja czcionek ikon od programistów Fundacji. Oprócz ikon standardowych witryna zawiera okrągłe ikony, ikony mediów społecznościowych i wiele innych.
Ikony materiałowe.Ikony materiałów to jednolite płaskie ikony Google, które ucieleśniają łatwość percepcji. Ikony są zoptymalizowane pod kątem pięknego wyświetlacza na wszystkich popularnych platformach i dla wszystkich rozdzielczości ekranu.
Kolekcja czcionek ikon zawiera ponad 750 ikon. Najłatwiejszym sposobem zainstalowania kolekcji w Twojej witrynie jest użycie ikon takich jak Google Web Fonts. Aby to zrobić, następujący kod znajduje się w znaczniku strony:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">Aby poprawnie wyświetlić czcionkę w przeglądarkach, element, który będzie używał czcionki ikon, otrzymuje klasę Material-Icons:
.Material-ikony {Font-Family: „Material Icons”; Wash-Wait: Normalny styl czcionki: normalny rozmiar czcionki: 24px; / * Preferowany rozmiar ikony */ Display: Inline-Block; Szerokość: 1em; Wysokość: 1em; Wysokość linii: 1; Tekst-transform: brak; Spacer z literami: normalny wapień: normalny; Biała przestrzeń: nowrap; Kierunek: LTR; -Webkit-font gładkie: Antyalizowane; / * Obsługiwane przez wszystkie przeglądarki WebKit */ Rendering Tekst: OptimizeLeGibility; / * Safari i Chrome Support */ -Moz-OSX-Font klimatyczne: Grayscale; /* Wsparcie Firefox. */ Font-Feature-Settings: „Liga”; /* IE wsparcie. */}Same ikony są dodawane za pomocą<I class=''material-ikony''>Ligature lub kod HTML ikony</i> Tag, na przykład:
<i class="material-ikony">ConcT_Balance_Wallet</i><i class="material-ikony"></i>Ligatura jest rozumiana przez wszystkie nowoczesne przeglądarki, tj. - począwszy od wersji 10. Kod ikony jest generowany automatycznie, ponieważ potrzebujesz kliknięcia w lewo ikony i skopiować sugerowany wygląd.
Rozmiar ikony
Rozmiar ikony is controlled by additional classes:
.material-ikony.md-18 {font-size: 18px;} /* dla dla<i class="material-ikony md-18"></i> */.Material-ikony.md-24 {font-size: 24px;} /* dla dla<i class="material-ikony md-24"></i> */.Material-ikony.md-36 {font-size: 36px;} /* dla dla<i class="material-ikony md-36"></i> */.Material-ikony.md-48 {font-size: 48px;} /* dla dla<i class="material-ikony md-48"></i> */Kolor ikony
Kolor ikon jest również ustawiony za pomocą dodatkowych klas:
.Material-Icons.md-Dark {Color: rgba (0, 0, 0, 0,54);} /*<i class="material-ikony md-dark"></i> */.Material-Icons.md-Light {Color: RGBA (255, 255, 255, 1);} /*<i class="material-ikony md-light"></i> */.Material-ikony.md-dark.md-inactive {color: rgba (0, 0, 0, 0,26);} /*<i class="material-ikony md-dark md-inactive"></i> * /.Material-Icons.md-Light.md Inactive {Color: RGBA (255, 255, 255, 0,3);} /*<i class="material-ikony md-light md-inactive">Twarz</i> */Aby ustawić niestandardowy kolor, musisz dodać klasę, która określa kolor ikon, na przykład:
.Material-ikony.indigo {Color: #1A237E;} /*<i class="material-ikony indigo"></i> */Często Zadawane Pytania
- Co jest niesamowite w prostych słowach?
- Zasadniczo jest to czcionka z ikonami, którą można dodać do dowolnego elementu strony, aby zwiększyć jego widoczność i projekt. Kolekcja składa się z kilkuset ikon odpowiednich do każdego zadania i celu.Więcej informacji na temat tego linku
Michel Pinson jest entuzjastą podróży i twórcą treści. Połącząc pasję do edukacji i eksploracji, skomplikował się do dzielenia się wiedzą i inspirowaniem innych poprzez urzekając treści edukacyjne. Zbliżając świat, wzmacniając osoby globalną wiedzę i poczucie wędrowania.
