TechBlogSD - Wszystko do WordPressa i tworzenia stron internetowych
Instrukcje WEB i WordPress, nowości, recenzje motywów i wtyczek

Jak naprawić niesamowite ikony czcionek wyświetlane jako pudełko?

6

W tworzeniu stron internetowych powszechne jest używanie ikon czcionek w formacie SVG zamiast wpisywania symboli za pomocą encji ucieczki. Na przykład ikony Font Awesome są najbardziej popularne ze względu na skalowalność ikon bez utraty jakości. Jeśli jednak nie zaimplementujesz poprawnie czcionki, niesamowite ikony będą wyświetlane jako prostokąty. Jeśli masz problemy z ikonami czcionek, sprawdź, jak to naprawić.

Korzystanie z czcionek Awesome na stronie internetowej

Istnieją dwa sposoby używania ikon czcionek w witrynie. Jednym z nich jest użycie w znaczniku HTML, a drugim jest użycie pseudoklas CSS. W obu metodach powinieneś połączyć niesamowity CSS z czcionką źródłową i umieścić pliki czcionek na swoim serwerze, aby można było zastosować odpowiednie style do ikon. Poniżej znajduje się przykład użycia czcionki awesome w HTML:

Jak naprawić niesamowite ikony czcionek wyświetlane jako pudełko?

Korzystanie z czcionek Awesome

Sprawdź ten artykuł z oficjalnej strony o tym, jak używać ikon czcionek w swojej witrynie. Gdy czegoś brakuje podczas ładowania, zamiast ikony zobaczysz pole jak poniżej.

Jak naprawić niesamowite ikony czcionek wyświetlane jako pudełko?

Ikona czcionki Sow Box

Dlaczego ikony Font Awesome są wyświetlane jako pudełko?

Aby wstawić ikonę czcionki na swojej stronie, musisz mieć:

  • Hostuj czcionki na swoim serwerze
  • Połącz poprawną czcionkę niesamowitą wersję CSS
  • Brak konfliktu ze starą i nową wersją w tej samej witrynie
  • Sprawdź poprawną rodzinę czcionek
  • Użyj odpowiedniej klasy CSS
  • Sprawdź grubość czcionki
  • Sprawdź kod zawartości CSS

Sprawdźmy szczegółowo punkt łatwości.

1 Hostuj czcionki na twoim serwerze

Aby używać font awesome na swojej stronie, konieczne jest umieszczenie plików fontów również w tym samym katalogu. Wszystkie kroje czcionek internetowych powinny być dostępne w folderze „/webfonts" i odwoływać się do CSS znajdującego się w folderze „/css”.

W większości przypadków motyw lub wtyczka, której używasz, zainstalują na Twoim serwerze wszystkie niezbędne pliki CSS i czcionki. Dzieje się tak, zwłaszcza gdy używasz WordPressa na swojej stronie.

2 Link Poprawna wersja CSS

Font awesome był dostępny za darmo do wersji 4.70. Dostępne są jednak zarówno wersje bezpłatne, jak i pro, począwszy od wersji 5.0. Chociaż wersja 4.70 była przestarzała, większość darmowych wtyczek i motywów nadal używa 4.70 ze względu na jednolitą klasę CSS i łatwość użycia. Jednak wersja 5.0 ma marki i solidne style dla darmowych użytkowników i możesz użyć all.css, aby uwzględnić oba style.

Możesz zarejestrować się w niesamowitej witrynie czcionek, aby uzyskać zestaw CDN lub skorzystać z plików CDN dostępnych w Cloudflare.

Jak naprawić niesamowite ikony czcionek wyświetlane jako pudełko?

Uzyskaj zestaw Font Awesome CDN

3 sprzeczne wersje CSS

Jednym z problemów, z jakimi mieliśmy do czynienia w przypadku witryny WordPress, jest to, że wtyczka korzystała z wersji 4.70, a motyw używał wersji 5.0. To powodowało konflikt z powodu niezgodnych kodów klas CSS i treści. Dlatego upewnij się, że używasz najnowszej wersji 5.0 z odpowiednim plikiem źródłowym CSS w swojej witrynie.

Jak naprawić niesamowite ikony czcionek wyświetlane jako pudełko?

Ikony czcionek wyświetlane jako prostokąt

4 Użyj prawidłowej rodziny czcionek

Aby używać czcionek awesome w CSS, powinieneś użyć odpowiedniej rodziny czcionek. Poniżej znajduje się rodzaj kodu CSS używanego w wersji 4.70.

.li:przed {
treść:”00A3″; rodzina czcionek: „FontAwesome”; grubość czcionki: normalna; }

Jednak w wersji 5.0 pojawi się pole zamiast ikony. powinieneś używać następującego kodu CSS z bezpłatną wersją 5.0.

.li:przed {
treść:”00A3″; rodzina czcionek: „ Font Awesome 5 Free “; grubość czcionki: 900 ; }

Dlatego upewnij się, że używasz poprawnej rodziny czcionek „Font Awesome 5 Free” w CSS. Ponadto, jeśli używasz ikon społecznościowych, rodzina czcionek powinna mieć postać „Font Awesome 5 Brands”. Są to dwie rodziny czcionek dostępne dla użytkowników bezpłatnych.

5 Użyj właściwego prefiksu stylu CSS

Kolejnym zamieszaniem jest to, że wersja 5.0 ma inne klasy CSS niż poprzednie wersje. W wersji 4.7 możesz użyć prefiksu stylu fa, jak poniżej:

<i class=”fa fa-camera”>

Nie będzie to jednak działać w wersji 5.0 i nowszych. Prefiks stylu fa został przestarzały i powinieneś używać fas dla solidnych ikon i fab dla ikon brandingu społecznościowego, takich jak Facebook.

6 Sprawdź grubość czcionki

Font awesome wersja 5.0 nie obsługuje ogólnej deklaracji „font-weight:normal” w CSS. Powinieneś zadeklarować określoną grubość czcionki, aby ikona się pojawiła.

7 Sprawdź kod zawartości CSS

Ostatnim punktem jest upewnienie się, że kod treści używany w CSS jest poprawny. Musisz użyć jednego z dostępnych kodów z niesamowitej strony z czcionkami w pseudo elemencie CSS. Ponadto upewnij się, że używasz kodu w formacie „f00d”; aby wyświetlić ikonę poprawnie.

Streszczenie

Poniżej znajduje się podsumowanie rodziny czcionek, grubości czcionki, prefiksu stylu i stylów dostępnych dla użytkowników bezpłatnych i profesjonalnych. Musisz upewnić się, że wszystkie te elementy są poprawne, aby ikona pojawiła się zamiast pola.

Styl Dostępność Waga czcionki Przedrostek stylu Rodzina czcionek
Solidny Darmowy 900 ty robisz Font Awesome 5 Free lub Font Awesome 5 Pro
Regularny Zawodowiec 400 daleko Czcionka Awesome 5 Pro
Lekki Zawodowiec 300 fala Czcionka Awesome 5 Pro
Duotone Zawodowiec 900 chwilowa moda Czcionka Awesome 5 Duotone
Marki Darmowy 400 fajnie Czcionka Awesome 5 marek

Źródło nagrywania: www.webnots.com
Leave A Reply

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów