Jak dodać niesamowite ikony czcionki w HTML i CSS?
Font Awesome ikony oparte na CSS i mniej, są jedną z opcji wśród ogromnej oferty ikon, które można osadzić na Twojej stronie internetowej. Zbadajmy, jak je dodać na swojej stronie internetowej.
Jak dodać niesamowite ikony czcionki?
Istnieją dwa sposoby dodania bezpłatnej edycji Font Awesome ikon na stronie internetowej HTML, które są:
Załaduj bibliotekę
Pierwszym podejściem do dodania niesamowitej ikony czcionki na Twojej stronie jest dodanie niesamowitej biblioteki czcionki w sekcji pliku HTML. Na przykład w poniższej składni czcionka niesamowita biblioteka wersji 4.7.0 jest dodawane w sekcji.
Biblioteki innych Font Awesome wersje są dostępne online.
Zdobądź kod zestawu
Drugim podejściem do dodania niesamowitej ikony czcionki na Twojej stronie jest stworzenie konta na Font Awesome oficjalna strona internetowa, aby otrzymać kod według nazwy „Kod zestawu”. Ten kod może być używany podczas wstawienia czcionki niesamowitej na Twojej stronie internetowej. Po uzyskaniu kodu zestawu dodaj link w atrybucie SRC znacznika…
Po otrzymaniu kodu zestawu wstaw go zamiast „kod Kitcode” w linku i zacznij. Na przykład.
Przykład
Załóżmy, że chcesz wstawić ikonę aparatu za pomocą podejścia kodu zestawu. W tym celu rozważ następujący fragment kodu:
Notatka: Czcionki są niesamowite ikony lub elementy.
Prefiks FA służy do dodawania niesamowitych ikon czcionki wraz z nazwą ikony. Nowsze wersje Font Awesome używają również prefiksów, takich jak FA (dla trybu solidnego) i FAR (dla trybu zwykłego).
Wyjście
Ikona kamery niesamowitej czcionki z powodzeniem włożona.
Poniższa demonstracja pokazuje różnicę między prefiksami FA i FAR.
Wyjście
Ikona Font Awesome Bell (tryb solidny i tryb regularny) z powodzeniem osadzony.
Teraz, gdy wiemy, jak wstawić ikonę czcionki na stronie internetowej, zobaczmy, jak zmienić rozmiar czcionki niesamowite.
Zmiana czcionki Niesamowite ikony
Istnieje w sumie 13 klas, które służą do zmiany wielkości niesamowitych ikon czcionki, a te klasy są; FA-XS, FA-SM, FA-LG, FA-2X, FA-3X, FA-4X, FA-5X, FA-6X, FA-7X, FA-8X, FA-9X i FA-10X.
Przykład
Ten przykład pokazuje kilka z wyżej wymienionych klas.
Wyjście
Ikona Font Awesome Bell z różnymi rozmiarami jest wkładana na stronę internetową.
Więcej o niesamowitych ikonach czcionkach!
Tutaj wymieniliśmy kilka rzeczy, które można zrobić, aby czcionić niesamowite ikony, aby poprawić wrażenia użytkowników.
Animate Font Awesome ikony
Możesz animować niesamowite ikony czcionki za pomocą poniżej wspomnianych klas.
fa-spin: Służy do obracania ikony.
fa-pulse: Służy również do obracania ikony, ale z 8 krokami.
Przykład
Ten przykład pokazuje wyżej wymienione klasy.
Wyjście
Ikony synchronizacji i spinnera są animowane za pomocą klas FA-Spin i FA-Pulse.
Ikony wymienione przez czcionki
Możesz wymienić zwykłe pociski za pomocą klas FA-UL i FA-LI.
Przykład
Klasy wspomniane powyżej pokazano tutaj.
- Przedmiot 1
- Pozycja 2
- Pozycja 3
Wyjście
Ikony wymienione przez czcionki są osadzone na stronie internetowej HTML.
Obracaj i odwróć niesamowite ikony czcionki
Możesz obracać i odwrócić niesamowite ikony czcionki, używając klas FA-ROTATE-* i FA-Flip-*.
Przykład
Poniższy przykład pokazuje, jak obrócić ANF Flip Font Awesome ikony.
Wyjście
Niesamowita ikona czcionki samochodowej jest obracana i odwracana pod różnymi kątami.
Układanie czcionek niesamowite ikony
Możesz układać czcionki niesamowite ikony za pomocą następujących klas.
FA Stack: jest używany do ikony uważany za rodzic na stosie.
FA Stack-1x: Służy do ikony o regularnym rozmiarze w stosie.
FA Stack-2x: Służy do ikony o większym rozmiarze w stosie
FA odwrotne: służy do zmiany koloru ikon w stosie.
Przykład
Ten przykład jest demonstracją ułożonych czcionek Niesamowite ikony.
Wyjście
Ikona Font Awesome Ban z powodzeniem ułożona na ikonę samochodu Font Awesome.
Graniczące i wyciągane czcionki niesamowite ikony
Możesz dodać granice i pobierać niesamowite ikony czcionki za pomocą klas; FA-BORDER, FA-PULL RIGHT i FA-PULL-LEFT KLASY.
Przykład
Tutaj ilustrują klasy i ikony wyciągnięte.
Ikony to sposób na wykazanie działania lub obiekt wizualnie. Są one uważane za bardzo ważne w projekcie stron internetowych, aby zwrócić uwagę użytkownika. Poza tym ikony zwiększają wygląd strony internetowej, zapewniają łatwą nawigację i zwiększają wrażenia użytkownika. Font Awesome ikony oparte na CSS i mniej, są jedną z opcji wśród ogromnej oferty ikon, które można osadzić na Twojej stronie internetowej.
Wyjście
Cytat został pomyślnie wyciągnięty w lewo z granicą.
Wniosek
Font Awesome ikony mogą być osadzone na Twojej stronie, otrzymując kod zestawu z oficjalnej witryny Font Awesome. Istnieją różne klasy, aby zmienić rozmiar Niesamowite ikony czcionki, co więcej, możesz robić wiele rzeczy z tymi ikonami, takimi jak Animate Font Awesome ikony, używać ich zamiast zwykłych pocisków na liście, obracaj i odwróć te ikony itp. To i wiele więcej o czcionkach Niesamowite ikony są omawiane w tym artykule za pomocą odpowiednich przykładów.