Como adicionar ionicons em HTML e CSS

Expressar seus pensamentos em palavras pode ser um processo um pouco difícil e detalhes longos sobre qualquer coisa podem não ter a atenção do usuário; portanto, inserir os ícones em um site em vez de texto pode ser uma abordagem melhor. Os ícones se tornaram uma parte essencial de qualquer site, porque o uso adequado dos ícones pode expressar a mensagem exata em forma visual.

Para incorporar ícones em um site, existem vários conjuntos de ícones disponíveis, um dos mais significativos entre eles é Ionicons. O INoicons estão disponíveis gratuitamente para todos e podem fornecer resultados eficazes para todas as principais plataformas, como iOS, desktop, etc.

Este artigo apresentará um entendimento detalhado de como usar Ionicons Em HTML e a este respeito, temos que seguir os seguintes conceitos:

• O que são ionicons
• Como usar o Ionicons
• Estilos de Ionicons

Vamos começar

O que são ionicons

É um conjunto de ícones acessíveis gratuitamente que fornece mais de setecentos ícones para quase todas as plataformas, como Android, Web, Desktop, etc.

Como usar o Ionicons

Para usar o Ionicons, siga o guia passo a passo fornecido abaixo:

Primeiro passo

Para adicionar ionicons em um site, a primeira coisa que você precisa fazer é abrir um navegador da web e pesquisar o “Ionicons”:

Clicando no Ionicons o levará à página seguinte:

Ou clique aqui para visitar o site oficial da Ionicons.

Segundo passo

Depois, você deve clicar no uso opção como mencionado na figura a seguir:

Clicando no "Uso" a opção abrirá uma nova página:

Terceiro passo

Role para baixo um pouco e você encontrará um "instalação" seção. Na opção de instalação, você encontrará alguns scripts:

Copie os scripts e cole -os perto da etiqueta corporal de fechamento do seu documento HTML ou na etiqueta da sua página da web:

Quarta etapa

Agora, podemos carregar os ionicons em nosso documento HTML. Para fazer isso, volte para o "Uso" guia e role para baixo um pouco para encontrar o “Uso básico” Seção para entender como usar o componente Ionicon:

Quinto passo

Agora, volte para o “Ícones” guia e procure o ícone de sua escolha:

Clicar no ícone mostrará o código do componente:

Sexto passo

Copie o código e cole -o no seu documento HTML:

A seguir, será a saída para o trecho acima:

A saída verifica que o “Ionicons O ícone doméstico é adicionado com sucesso à nossa página HTML. Dessa forma, você pode inserir tantos Ionicons como você quiser.

Estilos de Ionicons

Você pode selecionar os ícones de três estilos diferentes, como mostrado no snippet abaixo:

Exemplo

Este exemplo utilizará um Ionicons doméstico dos três estilos:

Ionicons em HTML

O trecho acima do dado produz a seguinte saída:

A saída mostra como os estilos de esboço, preenchidos e nítidos parecem. Entre esses estilos eu.e. contorno, cheio, nítido, você pode escolher qualquer estilo que atenda às suas necessidades.

Conclusão

Para incorporar um ionicon em html, tudo o que você precisa fazer é copiar os scripts da seção de instalação dos ionicons e colá -los no seu documento HTML. Posteriormente, selecione o ionicon de sua escolha, copie o código do componente e cole -o no seu documento HTML. Este artigo fornece uma compreensão detalhada do que são os ionicons e como implementar/usar ionicons no HTML. Capturas de tela são fornecidas com cada etapa para uma compreensão completa dos conceitos.