Como usar os ícones do Google em HTML & CSS?

Os ícones são representações visuais de diferentes ações, programas ou arquivos e podem desempenhar um papel muito significativo no design do site. Eles podem aprimorar a aparência geral do site e provar ser uma boa fonte de atrair mais audiência para o seu site. Os ícones fornecem navegação fácil, aumentando a experiência do usuário. Há uma vasta gama de ícones que você pode adicionar ao seu site; no entanto, este artigo foi projetado para guiá -lo sobre como usar os ícones do Google em HTML & CSS.

Os tópicos explorados neste artigo são:

1. O que são ícones do Google?
2. Como adicionar um ícone do Google?
3. Redimensionando um ícone do google
4. Modificando a cor de um ícone do Google

Vamos começar.

O que são ícones do Google?

O Google fornece uma enorme variedade de ícones (um total de 750) que são considerados ícones de design de material. Esses ícones são simples, mas modernos e representam ações ou objetos comumente usados. Por exemplo, um ícone de lixo representa a ação "excluir". Esses ícones são suportados por todos os navegadores atuais. A captura de tela anexada abaixo mostra alguns dos ícones de design de material.

Agora que sabemos o que são os ícones do Google, vamos aprender a adicioná -los às páginas da web.

Como adicionar um ícone do Google?

Com o objetivo de adicionar ícones de design de materiais do Google aos seus sites, seguem as etapas abaixo mencionadas.

Passo 1
A primeira etapa é adicionar o link da biblioteca de fontes de material-icons na seção do seu arquivo html. Aqui está como você faz isso.

Passo 2
Depois de adicionar o link da biblioteca de icons de material, o próximo passo é adicionar a classe “icons material” no ou tag da seção e também adicione o nome do ícone.

Wi-fi

Exemplo 1
Neste exemplo, um ícone de configurações está sendo adicionado na página da web.

configurações

Saída

Icon de configurações adicionado com sucesso.

Exemplo 2
No exemplo abaixo, um ícone de logout está sendo adicionado na página da web.

sair

Saída

Ícone de logout inserido com sucesso.

Você também pode alterar o tamanho desses ícones de design de material usando CSS. Vamos explorar em detalhes.

Redimensionando um ícone do google

Você pode alterar o tamanho dos ícones do Google Material Design de acordo com o seu desejo usando CSS. Siga as etapas mencionadas nesta seção para redimensionar seu ícone de design de material do google.

Passo 1
Na tag usando a classe Material-icons, define o tamanho do ícone, por exemplo.

Passo 2
Use a mesma classe no tag junto com o nome do ícone.

configurações

Saída

O tamanho do ícone de configurações mudou com sucesso.

Além do tamanho, você também pode modificar a cor dos ícones do Google. Vamos ver como é feito.

Modificando a cor um ícone do Google

Com o objetivo de alterar a cor dos ícones de design de material do Google, seguem as mesmas etapas mencionadas na seção acima, com uma pequena diferença que, juntamente com o tamanho da fonte, você pode precisar definir a cor usando a propriedade de cor do CSS.

Exemplo
Suponha que você queira mudar a cor do ícone de configurações para azul.

configurações

Saída

A cor do ícone de configurações mudou com sucesso.

Conclusão

Para incorporar ícones do Google em suas páginas da Web HTML, você deve adicionar o link da biblioteca de fontes de icons material na seção do seu arquivo html e adicionar os icons de material da classe no ou tag da seção junto com o nome do ícone. Você também pode alterar o tamanho e a cor dos ícones através do CSS, definindo-os na tag usando a classe Material-icons. Este artigo discute como usar os ícones do Google em HTML & CSS em profundidade com a ajuda de exemplos apropriados.