Jak korzystać z ikon Google w HTML i CSS?

Ikony to wizualne reprezentacje różnych działań, programów lub plików i mogą odgrywać bardzo istotną rolę w projektowaniu stron internetowych. Mogą poprawić ogólny wygląd strony i okazać się dobrym źródłem przyciągania większej liczby odbiorców do Twojej witryny. Ikony zapewniają łatwą nawigację, tym samym zwiększając wrażenia użytkownika. Istnieje szeroki zakres ikon, które można dodać do swojej witryny, jednak ten artykuł ma na celu prowadzenie, jak korzystać z ikon Google w HTML i CSS.

Tematy badane w tym zapisie to:

1. Co to są ikony Google?
2. Jak dodać ikonę Google?
3. Zmiana zmiany ikony Google
4. Modyfikowanie koloru ikony Google

Zaczynajmy.

Co to są ikony Google?

Google zapewnia ogromną różnorodność ikon (w sumie 750), które są uważane za ikony projektowania materiałów. Te ikony są proste, ale nowoczesne i reprezentują powszechnie używane działania lub obiekty. Na przykład ikona śmietnika reprezentuje akcję „Usuń”. Te ikony są obsługiwane przez wszystkie współczesne przeglądarki. Załączony zrzut ekranu poniżej pokazuje niektóre ikony projektowania materiałów.

Teraz, gdy wiemy, czym są ikony Google, nauczmy się dodać je na strony internetowe.

Jak dodać ikonę Google?

W celu dodania ikon projektowania materiałów Google do swoich stron internetowych, wykonaj poniżej wspomniane kroki.

Krok 1
Pierwszym krokiem jest dodanie linku biblioteki czcionek materiałowych w sekcji pliku HTML. Oto jak to robisz.

Krok 2
Po dodaniu linku biblioteki material-icons następnym krokiem jest dodanie klasy „Material-Icons” w lub znacznik sekcji, a także dodaj nazwę ikony.

Wifi

Przykład 1
W tym przykładzie na stronie internetowej dodawana jest ikona ustawień.

Ustawienia

Wyjście

Ikona ustawień pomyślnie dodana.

Przykład 2
W poniższym przykładzie ikona wylogowania jest dodawana na stronie internetowej.

Wyloguj

Wyjście

Ikona wylogowania pomyślnie wstawiona.

Możesz także zmienić rozmiar tych ikon projektowych materiałów za pomocą CSS. Zbadajmy to szczegółowo.

Zmiana zmiany ikony Google

Możesz zmienić rozmiar ikon projektowania materiałów Google według pragnienia za pomocą CSS. Wykonaj kroki wymienione w tej sekcji, aby zmienić rozmiar ikonę projektowania materiałów Google.

Krok 1
Na przykład w znaczniku za pomocą klasy materiałów zdefiniuj rozmiar ikony.

Krok 2
Użyj tej samej klasy w Tag wraz z nazwą ikony.

Ustawienia

Wyjście

Rozmiar ikony ustawień pomyślnie zmieniono.

Oprócz rozmiaru możesz również zmodyfikować kolor ikon Google. Zobaczmy, jak to się robi.

Modyfikowanie koloru ikony Google

W celu zmiany koloru ikon projektowania materiałów Google wykonaj te same kroki, jak wspomniano w powyższej sekcji, z niewielką różnicą, że wraz z rozmiarem czcionki może być konieczne zdefiniowanie koloru za pomocą właściwości kolorów CSS.

Przykład
Załóżmy, że chcesz zmienić ikonę koloru ustawień na niebieski.

Ustawienia

Wyjście

Kolor ikony ustawień pomyślnie zmienił się.

Wniosek

Aby osadzić ikony Google na swoich stronach internetowych HTML, musisz dodać link biblioteki czcionek materialnych w sekcji pliku HTML, a następnie dodać materiały klasowe w lub znacznik sekcji wraz z nazwą ikony. Możesz także zmienić rozmiar i kolor ikon za pośrednictwem CSS, definiując je w znaczniku za pomocą klasy materiałów. W niniejszym zapisie omówiono, jak dogłębnie korzystać z ikon Google w HTML i CSS za pomocą odpowiednich przykładów.