Ikony piór to zbiór czcionek, które można używać w aplikacjach i stronach internetowych. Oferuje skalowalne ikony grafiki wektorowej, które można wysocewać pod względem cienia, koloru, rozmiaru i każdej innej właściwości, z jaką CSS może obsłużyć. Deweloperzy i projektanci pracujący na różnych platformach mogą pobrać kolekcję ikon ikon czcionki z piór i wykorzystać ją zgodnie z ich preferencjami.

W tym spisie omówi metodę Użyj ikon piór W Html I CSS. Ponadto zostaną podane przykłady związane z określoną procedurą. A więc zacznijmy!

Notatka: Przed przejściem do upewnienia się, że zainstalowałeś ikony piór. Jeśli jeszcze tego nie masz, postępuj zgodnie z sekcją poniżej podania.

Jak zainstalować ikony piór

Istnieją różne metody instalowania ikon piór; Jednak skompilowaliśmy najłatwiejszy, abyś mógł osadzić ikony piór w HTML i CSS bez żadnych kłopotów.

Metoda 1: Instalowanie ikon piór za pomocą CDN

Sieć dostarczania treści (Cdn) zapewnia dostęp do plików JavaScript wykorzystywanych przez ludzi na całym świecie. Możesz użyć dowolnego z poniższych linków do dodawania ikon piór do pliku HTML:

LUB

Metoda 2: Instalowanie ikon piór za pomocą biblioteki NPM

"Feather-icons”To biblioteka NPM używana do integracji czcionki z piórkiem z dowolną aplikacją JavaScript. Jeśli chcesz zainstalować ikony pióra za pomocą biblioteki NPM, musisz wykonać to polecenie w terminalu:

NPM instaluj feather -icons -save

Metoda 3: Instalowanie ikon pióra poprzez pobieranie jej kolekcji

Po pierwsze, pobierz folder zapinany na zapinane ikony pióra, a następnie skopiuj „czcionka/" I "CSS/„Katalogi do twojego projektu. Następnie przejdź do pliku HTML i określ ścieżkę „Feathericon.min.CSS”Plik w„”Tag:

Jak używać ikon piór w HTML i CSS

Aby zademonstrować procedurę stosowania ikon piór w HTML i CSS, utworzymy nowy plik HTML o nazwie „mój plik.html„W kodzie Visual Studio:

W "mój plik.html”Plik, po pierwsze, dodamy link pakietu ikony pióra jako źródło, w ramach„”Tag:

Następnie określamy ikony za pomocą „Piernik danych”Wartość atrybutu w etykietka. Możesz zobaczyć z danego kodu, używamy „gwiazda”,„kwadrat”,„dzwonek", I "nagroda„Ikony pióra w pliku HTML:

Używamy ikon piór w HTML i CSS

Na koniec wywołamy pióro.Metoda zastępowania () do wymiany elementów DOM dodanymi ikonami piór:

Oto jak wygląda pełny kod w naszym „mój plik.html”:

Otwórz plik w przeglądarce i sprawdź ikony piór, których użyliśmy w „mój plik.html" plik:

W tym momencie ustawiłeś podstawowy układ ikon pióra w pliku HTML. Tak więc, jeśli chcesz dostosować styl ikon pióra, możesz wykonać tę operację za pomocą CSS.

W naszym "styl.CSS„Plik, zdefiniujemy trzy klasy, aby ustawić rozmiar ikon pióra:

.Feather-10
szerokość: 10px;
Wysokość: 10px;

.Feather-24
szerokość: 24px;
Wysokość: 24px;

.Feather-48
szerokość: 48px;
Wysokość: 48px;

Aby zastosować te ustawienia do ikony piór, musisz wspomnieć o wymaganej klasie CSS w następujący sposób:

Ponownie zapisz swój plik HTML, otwórz go na ulubioną przeglądarkę i zanotuj różnicę w stylu ikon piór:

Chodziło o podstawowe zastosowanie ikon piór w HTML i CSS. Aby dalej zbadać, sprawdź dokumentację ikon piór.

Wniosek

Aby używać ikon piórkowych w HTML i CSS, musisz je najpierw zainstalować za pomocą CDN, NPM Library lub pobierając powiązane pliki z oficjalnej strony internetowej. Po zainstalowaniu ikon piór. W tym zapisie omówiono metodę stosowania ikon piór w HTML i CSS. Ponadto podano również przykłady związane z określoną procedurą.