Co to jest czcionka ikony? (I jak z niego korzystać)

Czcionki ikon są popularnym rozwiązaniem typowego problemu CSS; jak włączyć ikony internetowe do projektu swojej strony internetowej w wydajny i szybki sposób.

Dzięki wielu dostępnym usługom ułatwiającym wybieranie i korzystanie z czcionek ikon, nie musisz tworzyć własnego od zera. Czcionki ikon są dostępne w całym Internecie.

Ale czym właściwie jest czcionka ikony? A jak ich używasz? Oto przewodnik po wszystkim, co musisz wiedzieć o czcionkach ikon.

Przeglądaj czcionki

Co to jest czcionka ikony?

Czcionki ikon to kroje pisma, w których używane są małe obrazy, a nie litery. Podobnie jak typ, każdy znak jest skalowalny i można go modyfikować za pomocą CSS.

Głównymi powodami korzystania z czcionki ikony jest to, że możesz z łatwością zmienić rozmiar, kolor, kształt. Czcionki ikon są z natury przezroczyste, dzięki czemu można je umieszczać na dowolnym kolorze lub rodzaju tła, a także dodawać obrysy lub zmieniać krycie ikon.

Wszystko to odbywa się za pomocą CSS, dzięki czemu nie musisz tworzyć unikalnych obrazów dla każdego nowego wystąpienia ikony w projekcie. (Jest to świetne do utrzymywania lekkości witryny i kodu).

Czcionki ikon to obrazy wektorowe, co oznacza, że ​​są skalowalne. Podobnie jak w przypadku każdej innej czcionki, możesz ustawić je tak duże lub małe, jak chcesz. Używaj samych czcionek ikon jako elementów artystycznych, a nawet rozproszonych po innych polach tekstowych.

Najpopularniejszą i najbardziej znaną biblioteką czcionek ikon jest Font Awesome. Jest używany w ponad 100 milionach stron internetowych i zawiera solidny zbiór opcji ikon. Działa ze wszystkimi popularnymi narzędziami, w tym czcionkami internetowymi + CSS, SVG + JS, Sketch, Adobe Apps, Vue.js, Angular, React i Ember.

Istnieje również kilka innych dość znanych zestawów ikon czcionek.

• Flaticon
• Icofont
• Fontello
• IcoMoon

Plusy i minusy używania czcionek ikon

Dlaczego więc miałbyś używać - lub unikać - czcionki? Oto niektóre zalety i wady pracy z tym stylem sztuki.

Plusy używania czcionek ikon

• Ikony można łatwo skalować, o ile w CSS istnieją odpowiednie klasy
• Bez trudu można uzyskać duże biblioteki ikon
• Zmiana właściwości ikony jest łatwa, bez względu na to, z czego korzystałeś podczas tworzenia witryny
• Łatwo jest dodawać ikony do dowolnej strony w witrynie (wystarczy wstawić nazwę ikony)
• Istnieją tysiące ikon do wyboru we wszystkich stylach
• Użytkownicy WordPress mogą dodawać czcionki ikon za pomocą prostej wtyczki lub kopiując katalog czcionek do kodu (prawie dowolny interfejs)
• Możesz stworzyć własną czcionkę ikony, jeśli potrzebujesz czegoś niestandardowego

Wady korzystania z czcionek ikon

• Ikony mają jeden kolor lub gradient koloru (w większości przypadków); zmienia to kilka innych pakietów premium
• Brak dobrej rezerwy, jeśli czcionka ikony się nie ładuje
• Może nie być potrzebny pełny zestaw ikon
• Niektóre czytniki ekranu nie wiedzą, co zrobić z czcionkami ikon
• Możesz nie znaleźć pakietu, który pasuje do twoich potrzeb

Jak korzystać z czcionek ikon

Chociaż instrukcje używania czcionek ikon mogą się nieco różnić w zależności od wybranego dostawcy, podstawowa idea jest taka sama.

Zasadniczo masz trzy opcje (chyba że sam planujesz trochę bardziej zaszyfrować):

• Użyj wtyczki, która instaluje wszystko, więc musisz tylko wywoływać ikony, których chcesz użyć. (Super łatwe!)
• Użyj wbudowanych ikon czcionek z CMS lub narzędzia do tworzenia witryn. Działa to świetnie, jeśli nie masz niestandardowej witryny lub potrzebujesz / chcesz określonego rodzaju ikony czcionki. Większość twórców stron internetowych oferuje coś „od razu po wyjęciu z pudełka”.
• Ręcznie połącz z zewnętrznie hostowaną czcionką ikony. (Bardziej skomplikowana wersja korzystania z wtyczki).

Ikona Czcionki kontra SVG

Większa debata dotyczy tego, czy powinieneś (lub chciałbyś) użyć czcionki ikony w porównaniu do obrazów SVG w celu wstawiania małych obrazów na swojej stronie. Obie opcje są równie realne i mają wiele wspólnego z osobistymi preferencjami.

Czcionki ikon są zazwyczaj łatwiejsze do znalezienia i używania przez większość ludzi. Ikony SVG są preferowane przez użytkowników, którzy potrzebują większej kontroli projektu.

Plik SVG (skalowalny format wektorowy) może dać ci nieco większą elastyczność w projektowaniu. (Nie jesteś ograniczony do jednego koloru). Małe, skalowalne pliki można przesłać bezpośrednio do katalogu multimediów i są łatwe w obsłudze. To dobra opcja, jeśli potrzebujesz tylko kilku ikon i nie chcesz zajmować się biblioteką.

Pliki SVG są bardziej elastyczne z możliwością dodawania większej liczby kolorów i animacji.

Czcionki ikon mogą być ładowane szybciej na dłuższą metę, ponieważ są buforowane. Różnica może być jednak minimalna.

Pozycjonowanie czcionek ikon może być nieco trudne, ponieważ podlegają one typowym regułom czcionek, takim jak rozmiar, odstępy między liniami i wyrównanie w pionie. Już tylko dlatego większość osób korzystających z czcionek ikon decyduje się na uznanego dostawcę, a nie próbuje stworzyć własną.

Pliki SVG mogą zawierać elementy, które czynią je bardziej dostępnymi niż czcionki ikon, które mogą być traktowane jako znaki literowe dla czytników ekranu.

Czcionki ikon są zazwyczaj łatwiejsze do znalezienia i używania przez większość ludzi. Biblioteki są ogólnie dostępne i nie są trudne do zrozumienia. Ikony SVG są preferowane przez użytkowników, którzy chcą większej kontroli projektu i opcji dostosowywania.

Obie opcje są powszechnie używane i działają w większości przypadków. Wybór jednego ma wiele wspólnego z tym, z czym czujesz się najlepiej i co pasuje do twojego wyglądu i interfejsu użytkownika.

Wniosek

Jednym z powodów popularności czcionek ikon jest ich wszechstronność i łatwość użycia. Dzięki skalowalnemu formatowi, który można zainstalować jednym kliknięciem do większości systemów zarządzania treścią, prawie każdy może szybko zacząć używać czcionek ikon.

Prawdziwą zaletą czcionki jest to, że element korzysta z CSS i nie jest niezależnym plikiem obrazu. Jest to dobre do tworzenia szczupłej strony internetowej z elementami, które ładują się szybko iw formacie wektorowym (świetne, jeśli trzeba później zmienić rozmiar).