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

Jak korzystać z niesamowitych ikon czcionek w Weebly?

2

Znakomite ikony czcionek to skalowalne ikony wektorowe, pierwotnie opracowane do użytku z frameworkiem Bootstrap, a później udostępnione dla innych. Jak sama nazwa wskazuje, ikony Font Awesome są po prostu świetne do wykorzystania w dowolnym miejscu w witrynie do wielu celów. Ikony są skalowalne, co oznacza, że ​​możesz używać tej samej ikony w różnych rozmiarach bez utraty jakości wyświetlania. Obecnie Weebly oferuje domyślną opcję dodawania czcionek ikon do elementów witryny. W tym artykule omówimy, dlaczego i jak używać niesamowitych ikon czcionek w witrynie Weebly.

Dlaczego warto rozważyć użycie ikon czcionek?

Istnieje wiele powodów, dla których warto rozważyć użycie ikon czcionek:

  • Ikony są bezpłatne do użytku osobistego i komercyjnego.
  • Nie potrzebujesz obrazu i JavaScript do tworzenia ikon, które poprawiają czas ładowania strony.
  • Wygląd ikony można całkowicie dostosować za pomocą CSS.
  • Różne rozmiary ikon mogą być używane z idealną rozdzielczością.
  • Bardzo atrakcyjny na urządzeniach z wyświetlaczem Retina.

Być może widzisz użycie ikon czcionek na innych platformach, takich jak WordPress, i zastanawiasz się, jak można to zrobić w witrynie Weebly.

Jak korzystać z niesamowitych ikon czcionek w Weebly?

Chociaż istnieje wiele sposobów korzystania z niesamowitych ikon czcionek, wyjaśnimy dwie proste metody:

  • Korzystanie z Bootstrap CDN z dowolnych usług CDN, takich jak MaxCDN
  • Hosting niesamowitych ikon czcionek na własnej stronie

Korzystanie z usługi Bootstrap CDN

Jest to najprostszy, niezawodny i łatwy sposób na korzystanie z niesamowitych ikon czcionek na swojej stronie bez żadnych problemów. Musisz po prostu połączyć następujący arkusz stylów w sekcji nagłówka swojej strony lub witryny.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

Zalecamy połączenie arkusza stylów w sekcji nagłówka dowolnej strony w zakładce „Strony" przed wdrożeniem go w aktywnej witrynie. Możliwe, że możesz utworzyć stronę testową ukrytą przed wyszukiwarkami lub utworzyć witrynę testową i połączyć arkusz stylów w sekcji nagłówka pod Zakładka „Ustawienia”.Pamiętaj, że niesamowite ikony czcionek będą działać na bezpłatnej witrynie Weebly i nie ma potrzeby posiadania w tym celu planów premium.

Hosting w Twojej witrynie

Zamiast korzystać z Bootstrap CDN CSS, możesz również pobrać kompletne pliki czcionek i CSS ze strony głównej font awesome site na Github. Prześlij całe foldery ze swojej witryny Weebly, edytując źródłowy kod HTML/CSS. Upewnij się, że przesyłasz wszystkie typy czcionek i plików CSS, jak pokazano na poniższym obrazku:

Jak korzystać z niesamowitych ikon czcionek w Weebly?

Prześlij niesamowite pliki czcionek do Weebly

Połącz plik CSS z sekcją nagłówka wymaganej strony lub na poziomie witryny.

<link rel="stylesheet" href="http://yoursite.weebly.com/files/theme/font-awesome.min.css">

Możesz użyć pliku .css lub pliku .min.css. Zminimalizowana wersja jest zalecana w aktywnej witrynie, ponieważ poprawia czas ładowania witryny.

Przykłady użycia ikon czcionek

Gdy już zdecydujesz, czy chcesz przesłać arkusze stylów i czcionki, czy użyć CSS CDN, następnym krokiem jest użycie go na swojej stronie za pomocą elementu „Kod do umieszczenia na stronie”.

Weźmy przykład dodawania ikony koła zębatego na twojej stronie, format dodawania niesamowitej ikony czcionki jest prosty, jak poniżej:

<i class="fa fa-phone-square"></i> This is a font awesome phone icon.

Składnia składa się z trzech części:

  • … – każda ikona powinna być użyta w tagu.
  • fa – wspaniały prefiks klasy CSS czcionki.
  • fa-phone-square – aktualna nazwa ikony.

Wynik powyższego kodu wklejonego wewnątrz elementu „Embed Code” będzie taki jak poniżej:

Jak korzystać z niesamowitych ikon czcionek w Weebly?

Przykład niesamowitej ikony czcionki w Weebly

Zwiększanie rozmiaru ikony

Istnieje pięć klas CSS, które zwiększają rozmiar ikony, jak poniżej:

<i class="fa fa-phone-square fa-lg"></i> Increases the icon size by 33% <i class="fa fa-phone-square fa-2x"></i> Increases the icon size by 2x <i class="fa fa-phone-square fa-3x"></i> Increases the icon size by 3x <i class="fa fa-phone-square fa-4x"></i> Increases the icon size by 4x <i class="fa fa-phone-square fa-5x"></i> Increases the icon size by 5x

Nieograniczone dostosowania

Gdy już opanujesz korzystanie z ikon czcionek, istnieje wiele przydatnych sposobów ich wykorzystania w witrynie. Na przykład możesz dodać listę jak poniżej:

<ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>List item 1</li> <li><i class="fa-li fa fa-check-square"></i>List item 2</li> <li><i class="fa-li fa fa-check-square"></i>List item 3</li> <li><i class="fa-li fa fa-check-square"></i>List item 4</li> </ul>

Lista będzie jak poniżej:

Jak korzystać z niesamowitych ikon czcionek w Weebly?

Lista ikon czcionek

Możesz zapoznać się z przykładami, aby sprawdzić, jak łatwo dodać wiele funkcji na swojej stronie za pomocą ikon czcionek. Zapoznaj się również ze ściągawką, aby szybko uzyskać nazwy ikon. Możesz także użyć Unicode zamiast nazwy ikony. Na przykład w powyższym przykładzie ikony listy zamiast nazwy ikony fa-check-square można użyć odpowiadającej jej wartości Unicode .

Źródło nagrywania: 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