font-awesome Samouczek
Pierwsze kroki z niesamowitymi czcionkami

Android Angular 2 CSS HTML JavaScript jQuery React Ruby on Rails SVG twitter-bootstrap
Szukaj…


Uwagi

FontAwesome to zestaw ponad 600 ikon wektorowych. Jest dostępny bezpłatnie w ramach licencji OFL / MIT i może być wykorzystywany w projektach open source lub komercyjnych.

Ustawiać

Do integracji FontAwesome ze stroną internetową można zastosować różne podejścia:

W przypadku zwykłego HTML / CSS:

  • Pobierz zip dostępny tutaj , rozpakuj i skopiuj zawartość na swoją stronę. Następnie odwołać /css/font-awesome.css na stronie internetowej head tak:

    <link rel="stylesheet" src="/assets/font-awesome/css/font-awesome.css">
  • Odwołaj się do niego w head strony za pomocą adresu CDN. Jednym z takich adresów byłby https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css . Aby się do tego odwołać, po prostu użyj znacznika link ale zamiast tego ustaw źródło na adres CDN

W przypadku menedżerów pakietów:

Większość menedżerów pakietów obsługuje Font Awesome jako pakiet, a poniżej znajduje się kilka przykładów:

  • NuGet: Po prostu wyszukaj i zainstaluj Font-Awesome lub uruchom poniższe polecenie w konsoli pakietu: Install-Package FontAwesome
  • Ruby: Wystarczy uruchomić polecenie: gem install font-awesome-rails
  • npm: wystarczy uruchomić polecenie: npm install font-awesome

Podstawowy przykład: użycie ikony

Prostym przykładem użycia jest odniesienie do pojedynczej ikony w jej normalnym rozmiarze: <i class="fa fa-camera-retro"></i> (Zobacz wynik w tym skrzypce.)

Utwórz pusty znacznik (zalecane jest użycie <i> użytego do tego) i przypisz klasę „ fa ” oraz klasę odpowiadającą żądanej ikonie (zobacz listę ikon tutaj ).

Korzystanie z Font Awesome

Font Awesome to niezwykle prosta, ale potężna biblioteka, z 634 ikonami dostępnymi w kilku słowach.

Jak to działa? Czcionka Awesome używa znaków Unicode przechowywanych w katalogu ../fonts do zmiany dowolnych elementów i.fa na odpowiedni znak Unicode, wyświetlając ikonę jako tekst.

Jak utworzyć ikonę? Wszystkie klasy ikona musi być i elementem, albo italic element , głównie do najlepszych praktyk, ale również poprawia wydajność z Font niesamowite. Wszystkie ikony mają również klasę fa . Oznacza to ikonę i nie będzie działać bez niej . Następnie po prostu dodaj żądaną ikonę, poprzedzoną innym fa- . Gotowy przykład znajduje się poniżej:

<i class="fa fa-pencil"></i> staje się ołówek fa

Ponieważ czcionka awesome działa na znaki Unicode, umożliwia także dowolne manipulowanie tekstem, takie jak font-size , color i inne.



Modified text is an extract of the original Stack Overflow Documentation
Licencjonowany na podstawie CC BY-SA 3.0
Nie związany z Stack Overflow