Jak dodać jonikony w HTML i CSS

Wyrażanie myśli słowami może być nieco trudnym procesem, a długie szczegóły na temat wszystkiego może nie mieć uwagi użytkownika, dlatego wkładanie ikon na stronie internetowej zamiast tekstu może być lepszym podejściem. Ikony stały się istotną częścią każdej strony internetowej, ponieważ właściwe użycie ikon może wyrażać dokładny komunikat w formie wizualnej.

W celu osadzania ikon na stronie internetowej dostępnych jest wiele zestawów ikon, jednym z najbardziej znaczących z nich jest Jonikony. Inoicons są swobodnie dostępne dla wszystkich i mogą zapewnić skuteczne wyniki dla wszystkich głównych platform, takich jak iOS, komputer itp.

Ten zapis przedstawi szczegółowe zrozumienie, jak korzystać Jonikony W HTML i pod tym względem musimy przestrzegać następujących pojęć:

• Czym są jonikony
• Jak używać jonikonów
• Style Ionicons

Zaczynajmy

Czym są jonikony

Jest to swobodnie dostępny zestaw ikon, który zapewnia ponad siedemset ikon dla prawie każdej platformy, takiej jak Android, Web, Desktop itp.

Jak używać jonikonów

Aby korzystać z jonikonów, postępuj zgodnie z przewodnikiem krok po kroku podany poniżej:

Pierwszy krok

Aby dodać jonikony na stronie internetowej, pierwszą rzeczą, którą musisz zrobić, to otworzyć przeglądarkę internetową i wyszukać „Jonikony”:

Kliknięcie Jonikony doprowadzi Cię do następnej strony:

Lub kliknij tutaj, aby odwiedzić oficjalną stronę internetową Ionikonów.

Drugi krok

Następnie musisz kliknąć stosowanie Opcja, jak wspomniano na poniższym rysunku:

Kliknięcie "Stosowanie" Opcja otworzy nową stronę:

Trzeci krok

Przewiń trochę w dół, a znajdziesz "instalacja" Sekcja. W opcji instalacji znajdziesz kilka skryptów:

Skopiuj zarówno skrypty i wklej je w pobliżu zamykającego znacznika ciała dokumentu HTML lub w znaczniku strony internetowej:

Czwarty krok

Teraz możemy załadować jonikony w naszym dokumencie HTML. Aby to zrobić, wróć do "Stosowanie" zakładka i przewiń trochę w dół, aby znaleźć „Podstawowe użycie” Sekcja, aby zrozumieć, jak używać komponentu jonikonu:

Piąty krok

Teraz wróć do „Ikony” Zakładka i wyszukaj wybraną ikonę:

Kliknięcie ikony pokaże kod komponentu:

Szósty krok

Skopiuj kod i wklej go do dokumentu HTML:

Poniżej pojawią się wyjście dla wyżej podanego fragmentu:

Wyjście weryfikuje, że „Jonikony ” Ikona domu jest pomyślnie dodawana do naszej strony HTML. W ten sposób możesz wstawić tyle Jonikony jak chcesz.

Style Ionicons

Możesz wybrać ikony z trzech różnych stylów, jak pokazano na fragmencie poniżej podanego:

Przykład

Ten przykład wykorzysta domowe jonikony wszystkich trzech stylów:

Jonikony w Html

Powyższy fragment daje następujące dane wyjściowe:

Wyjście pokazuje, jak wyglądają kontur, wypełniony i ostre style. Wśród tych stylów ja.mi. Zarys, wypełniony, ostry, możesz wybrać dowolny styl, który odpowiadał Twoim potrzebom.

Wniosek

Aby osadzić jonikon w html, wszystko, co musisz zrobić, to skopiować skrypty z sekcji instalacji jonikonów i wkleić je w dokumencie HTML. Następnie wybierz wybrany jonikon, skopiuj kod komponentu i wklej go do dokumentu HTML. Ten zapis zawiera szczegółowe zrozumienie tego, czym są jonikony i jak wdrażać/używać jonikonów w HTML. Zrzuty ekranu są wyposażone w każdy krok w celu dokładnego zrozumienia pojęć.