W artykule:
Ludzie są naturalnie przyciągani do wizualnych aspektów witryny WordPress, tak samo jak przyciągają ich treści pisane, które udostępniasz. W rzeczywistości, według marketingu internetowego Jeff Bullas, artykuły ze zdjęciami uzyskać 94% więcej wyświetleń niż artykuły bez zdjęć.
To ogromny wzrost odsłon, jeśli O mnie chodzi.
I za co?
Wystarczy dodać kilka wysokiej jakości, odpowiednich do artykułu obrazów w całej treści.
Ale co z obrazami na twojej stronie, które wykraczają poza zrzuty ekranu i zdjęcia stockowe? A co z obrazami, które nie tylko przyciągają uwagę, ale także pełnią użyteczną funkcję?
Tak, mówię o ikonach. Wiesz, te malutkie obrazy, które są rozrzucone po stronach internetowych w celu udostępniania społecznościowego, kontaktowania się z właścicielami firm i pobierania informacji, aby wymienić tylko kilka.
Ponieważ pomysł pojawił się na tej stronie, odwiedzający nie tylko przyciągali ikony obrazów na stronach internetowych, ale także byli skłonni do interakcji z nimi, ludzie zaczęli dodawać je do swoich stron internetowych.
Jednak wraz z rozwojem technologii, jak zawsze, tradycyjne ikony obrazów zaczęły słabnąć jako rozwiązanie graficzne dla stron internetowych. Dzieje się tak dlatego, że dodają zbyt dużą wagę plików, wymagają zbyt wielu żądań http, nie skalują się dobrze, a co najgorsze – nie są przyjazne dla urządzeń mobilnych.
Ale jest rozwiązanie: czcionki ikon.
Dzisiaj omówię, jakie są czcionki ikon i zalety korzystania z nich w witrynie WordPress. Ponadto pokażę Ci, jak dodać czcionki ikon do witryny WordPress za pomocą popularnej wtyczki Better Font Awesome. Na koniec, jako dodatkowy bonus, zamierzam zaoferować kilka alternatyw dla lepszej Font Awesome, dzięki czemu masz wiele opcji dodawania wysokiej rozdzielczości, skalowalnych i przyjaznych dla urządzeń mobilnych ikon do swojej witryny.
Więc zaczynajmy.
Czym są czcionki ikon i dlaczego z nich korzystać?
Czcionki ikon są dokładnie takie, jak brzmią-czcionki, które składają się w całości z ikon. W rzeczywistości czcionki ikon można opisać jako czcionkę, która wyświetla tylko znaki lub symbole, pomijając litery i cyfry, które zawierają tradycyjne czcionki tekstowe.
Czcionki ikon służą do wyświetlania powszechnie używanych symboli na twojej stronie internetowej. Na przykład przyciski mediów społecznościowych, Twój koszyk, przyciski pobierania i przyciski nawigacji to przykłady ikon, które wyświetlają się jako małe, interaktywne obrazy w Twojej witrynie.
Dlaczego Warto Używać Czcionek Ikon?
Ikony obrazów działały dobrze w przeszłości dla wielu właścicieli witryn. Jednak ponieważ zasady nawigacji, użyteczności i projektowania ewoluowały w świecie Internetu, czcionki ikon stały się lepszym rozwiązaniem do wyświetlania interaktywnych obrazów na stronie internetowej.
Oto kilka przekonujących powodów, dla których czcionki ikon są lepszym wyborem:
- Skaluj łatwo i nie trać jakości
- Możliwość dostosowania pod względem koloru i cienia
- 100% responsywności
- Działa jak obrazy CSS, ale może stylować jak tekst
- Łatwy w użyciu
- Przejrzyste wsparcie knockout
- Cross-browser friendly
- Dostosuj krycie, obrót i inne funkcje
- Mniejsze rozmiary plików
- Nie poświęcaj szybkości ani wydajności swojej witryny
Jak widać, istnieje kilka powodów, dla których możesz chcieć użyć czcionki ikon na swojej stronie internetowej w przeciwieństwie do ikony obrazu.
Instalowanie ikon czcionek na swojej stronie przy użyciu lepszej Font Awesome
Better Font Awesome to darmowa wtyczka WordPress, która pozwala automatycznie zintegrować najnowszą wersję Font Awesome z projektem WordPress. Ponadto jest dostarczany z towarzyszącym CSS, shortcodes i generatorem skrótów ikon TinyMCE.
Ta wtyczka oferuje wiele przydatnych funkcji dla właścicieli witryn:
- Rutynowe aktualizacje najnowszej wersji
- Możliwość przełączania między wersjami czcionek bez modyfikowania skrótów
- Obsługa innych popularnych wtyczek czcionek, w tym ich skrótów
- Ściąga z superszybkiego jsDelivr CDN
Krok 1: Instalacja i aktywacja lepszej czcionki Awesome
Aby rozpocząć, zainstaluj i aktywuj wtyczkę Better Font Awesome za pośrednictwem pulpitu WordPress, tak jak każda inna wtyczka.
Najpierw przejdź do Wtyczki > Dodaj Nowy i wyszukaj ” lepsza czcionka Awesome.”
Następnie wybierz Zainstaluj Teraz a następnie kliknij na Aktywuj.
Po aktywacji wtyczka dodaje link „lepsza czcionka” pod Ustawienia menu w panelu WordPress.
Krok 2: Skonfiguruj Ustawienia Wtyczki
Aby skonfigurować lepszą wtyczkę Font Awesome, zacznij od kliknięcia na Lepsza Czcionka Awesome pozycja menu pod Ustawienia. Gdy to zrobisz, zobaczysz ekran podobny do tego:
Tutaj możesz wykonać następujące czynności:
- Wersja: Wybierz wersję lepszej czcionki Awesome, której chcesz użyć.
- Użyj minified CSS: Zaznacz to pole, jeśli chcesz użyć zminifikowanej wersji CSS.
- Usuń istniejącą czcionkę Awesome: Zaznacz to pole, aby spróbować usunąć Font Awesome CSS i skróty dodane przez inne wtyczki i motywy.
- Ukryj powiadomienia administratora: Ukryj domyślne Ostrzeżenia administratora, które pokazują, gdy wystąpią błędy API i CDN.
Oprócz minimalnej ilości opcji ustawień Better Font Awesome, istnieje mały Użycie sekcja opisująca jak możesz dodawać ikony do swojej witryny.
Krok 3: Dodawanie ikon do witryny
Istnieją trzy proste sposoby dodawania ikon do witryny przy użyciu lepszej czcionki Awesome-za pomocą shortcode, HTML lub TinyMCE.
#1. Dodawanie Ikon Za Pomocą Skrótów
Aby dodać ikony do swojej witryny za pomocą shortcode, najpierw przejdź do strony Font Awesome, aby zobaczyć całą listę dostępnych ikon, które można użyć.
Tutaj możesz wyszukać dowolną ikonę. Na przykład, jeśli chcesz ikonę „E-Mail”, po prostu wyszukaj za pomocą tego słowa kluczowego i wybierz ikonę, której chcesz użyć, klikając na nią.
Po kliknięciu ikony, którą chcesz dodać, zobaczysz ekran pokazujący obraz ikony, jego różne rozmiary i mały blok kodu:
Wystarczy skopiować blok kodu i wkleić go w dowolnym miejscu na swojej stronie za pomocą Edytor Tekstu tab. Oto jak to będzie wyglądać na zapleczu Twojej witryny:
W końcu oto, co odwiedzający witrynę zobaczą, gdy klikną Twoją witrynę:
#2. Dodawanie ikon za pomocą HTML
Jak widać w Użycie sekcja, masz możliwość użycia HTML do wstawiania ikon na swojej stronie internetowej. Jednak programiści wtyczek ostrzegają, że używanie HTML wymaga specyficznych prefiksów, które są specyficzne dla wersji.
Dlatego zalecają zamiast tego stosowanie skrótów. Jeśli jednak chcesz używać HTML, Font Awesome zawiera pomocne informacje.
#3. Dodawanie Ikon Za Pomocą TinyMCE
Jest to prawdopodobnie najprostszy sposób na dodanie ikon do swojej witryny. Będąc w trybie edytora wizualnego, po prostu kliknij Wstaw Ikonę. Następnie przewiń dostępne opcje ikon lub zawęź wyniki za pomocą funkcji filtrowania.
Gdy znajdziesz żądaną ikonę, po prostu kliknij na nią. Generator skrótów automatycznie wprowadza wymagane informacje do Twojego postu lub strony.
Jeśli chcesz dowiedzieć się, jak dostosować ikony witryny, zapoznaj się z przykładami Font Awesome.
Dodatkowe Opcje Ikon Czcionek
Korzystanie z lepszej Font Awesome nie jest jedynym sposobem, aby dodać czcionki ikon do swojej witryny. I, zgodnie z obietnicą, zamierzam podzielić się z wami najlepszymi alternatywami.
Na początek przyjrzyjmy się niektórym z najlepszych miejsc, w których można znaleźć zarówno darmowe, jak i premium zestawy czcionek. Dzięki tym zasobom możesz generować niestandardowe ikony czcionek, korzystać z ekskluzywnych i unikalnych obrazów ikon, a nawet uzyskać dostęp do narzędzi, które pomogą Ci importować ikony bezpośrednio do witryny.
- Fontello. Konwertuj Darmowe Niestandardowe obrazy wektorowe na webfonts do użytku w Twojej witrynie, które są przejrzyste, skalowalne i przyjazne dla wielu przeglądarek. Ponadto dostosuj za pomocą CSS, aby zmienić kolory, rozmiary, cienie i inne.
- Piktogramy Nowoczesne. Użyj dowolnej liczby ponad 260 rysunków obiektów i ikon dla wielu interfejsów, takich jak witryna WordPress. Ta usługa premium pozwala na indywidualne zakupy SVG.
- Icomoon. Ta usługa online umożliwia tworzenie wyraźnych, idealnych do pikseli czcionek ikon. Ponadto możesz użyć ekskluzywnego kreatora czcionek ikon, aby zmienić ikony obrazów na czcionki ikon. Dzięki 5000 darmowym i otwartym ikonom oraz ponad 4000 ikonom premium umieszczonym w specjalnych pakietach ikon nie brakuje obrazów do wyboru.
Następnie przyjrzyjmy się dodatkowym wtyczkom czcionek, które mogą być używane w Twojej witrynie WordPress.
-
Ikony WP SVG
WP SVG Icons to wtyczka ikony WordPress, która zawiera ponad ikony 490. Dodatkowo możesz utworzyć i przesłać do 10 własnych niestandardowych ikon za pomocą ekskluzywnego Icomoon Icon Pack Font Importer.
Dzięki tej wtyczce możesz łatwo wstawiać ikony do swoich postów, stron i pasków bocznych bez pisania pojedynczej linii kodu za pomocą najnowszej funkcji shortcode.
-
Genericon ’ d
Genericon ’ D zawiera zestawy ikon 3-Genericons Neue, Social Logos i Genericons-które można umieścić w tematach lub funkcjach witryny za pomocą podstawowego HTML lub postów i widżetów za pomocą skrótów.
Ponadto możesz dostosować rozmiar każdej ikony za pomocą CSS, skrótów lub atrybutu rozmiar. Idealny do dodawania ogólnych ikon na swoim blogu lub stronie internetowej, logo społecznościowe zachęcające do polubienia lub obserwowania lub ikony wyświetlane jako czcionki, Genericon ’ D to świetne rozwiązanie dla ikon.
-
Lista Ikon
Lista ikon potężna, ale prosta wtyczka zapewniająca właścicielom witryn widżet do użycia na standardowych listach w Twojej witrynie. Wyświetlaj dane kontaktowe swojej firmy i platformy mediów społecznościowych wraz z odpowiednimi ikonami, aby odwiedzający witrynę mogli być na bieżąco informowani o Twojej firmie.
-
Inteligentne ikony dla WordPress
Smart Icons for WordPress przynosi 519 niesamowite ikony czcionek do wykorzystania w postach, stronach i niestandardowych typach postów za pomocą jednego kliknięcia przycisku. Jest wyposażony w łatwy w użyciu interfejs, niestandardowe lub domyślne skróty, a nawet opcję ładowania czcionek z CDN.
Ponadto Inteligentne ikony są przyjazne dla wyświetlania w rozdzielczości 4K, współpracują z dowolnym interfejsem API edytora, a nawet obsługują efekty CSS, takie jak zmiany w promieniu i cienie w celu dodatkowego dostosowania.
Myśli Końcowe
Korzystanie z czcionek ikon w witrynie WordPress nie tylko dodaje piękne obrazy bez poświęcania szybkości i wydajności, ale dodaje poziom funkcjonalności do witryny, który zachęca do większej interakcji z użytkownikiem.
Czcionki ikon można łatwo skalować, dostosowywać, a co najlepsze, zapewniają odwiedzającym witrynę, niezależnie od tego, skąd mają dostęp do witryny, najlepsze wrażenia z oglądania.
Korzystanie z wtyczek, takich jak Better Font Awesome, jest jednym z najprostszych sposobów dodawania ikon do witryny. Dzieje się tak dlatego, że z wtyczką do czcionek nie jest wymagana żadna konfiguracja i zwykle wykonuje większość pracy za ciebie, więc nie musisz radzić sobie z obszernym kodem HTML.
Jeśli chcesz zwiększyć wyświetlanie stron w swojej witrynie, zwiększyć interakcję z treścią i zapewnić odwiedzającym witrynę atrakcyjną stronę internetową, która wyraźnie komunikuje, co chcesz, aby zrobili, rozważ dodanie czcionek ikon w swojej witrynie za pomocą lepszej Font Awesome lub dowolnej innej opcji, którą ci udostępniłem.
Tagi:
