Os ícones de penas são uma coleção de fontes que podem ser usadas em aplicativos e sites. Oferece ícones gráficos de vetores escaláveis ​​que são altamente personalizáveis ​​em termos de sombra, cor, tamanho e qualquer outra propriedade que os CSs possam lidar. Desenvolvedores e designers que trabalham em várias plataformas podem baixar a crescente coleção de ícones de fontes de penas e utilizá -la de acordo com suas preferências.

Este artigo discutirá o método para Use ícones de penas em Html e CSS. Além disso, exemplos relacionados ao procedimento especificado serão fornecidos. Então vamos começar!

Observação: Antes de avançar, verifique se você instalou ícones de penas. Se você ainda não o tiver, siga a seção abaixo do ritmo abaixo.

Como instalar ícones de penas

Existem vários métodos para instalar ícones de penas; No entanto, compilamos o mais fácil para você incorporar ícones de penas em HTML e CSS sem nenhum aborrecimento.

Método 1: Instalando ícones de penas usando CDN

Rede de entrega de conteúdo (CDN) fornece acesso aos arquivos JavaScript que são utilizados por pessoas em todo o mundo. Você pode usar qualquer um dos links a seguir para adicionar ícones de penas ao seu arquivo HTML:

OU

Método 2: Instalando ícones de penas usando a biblioteca NPM

““penas-icons”É uma biblioteca NPM usada para integrar a fonte de penas a qualquer aplicativo JavaScript. Se você deseja instalar ícones de penas usando a biblioteca NPM, você deve executar este comando no terminal:

NPM Instale as penas -icons -Save

Método 3: Instalando ícones de penas baixando sua coleção

Primeiro de tudo, faça o download da pasta Zippeado dos ícones de penas e depois copie o “Fonte/" e "CSS/”Diretórios para o seu projeto. Em seguida, vá para o seu arquivo html e especifique o caminho do “Feathericon.min.CSS"Arquivo no"" marcação:

Como usar ícones de penas em HTML e CSS

Para demonstrar o procedimento de usar ícones de penas em HTML e CSS, criaremos um novo arquivo HTML chamado “meu arquivo.html”No Código do Visual Studio:

Em "meu arquivo.html”Arquivo, primeiro, adicionaremos o link do pacote de ícones de penas como fonte, dentro do“" marcação:

Então, especificaremos os ícones usando “Data Fature”Valor do atributo no marcação. Você pode ver no código fornecido, estamos usando “estrela","quadrado","Sino", e "prêmioÍcones de penas no arquivo html:

Estamos usando ícones de penas em HTML e CSS

Por fim, vamos invocar a pena.Substitua () Método para substituir os elementos DOM pelos ícones de penas adicionados:

Aqui está a aparência do código completo em nosso “meu arquivo.html”:

Abra o arquivo no navegador e confira os ícones de penas que usamos no “meu arquivo.html" arquivo:

Neste ponto, você definiu o layout básico dos ícones de penas no arquivo html. Então, agora, se você deseja personalizar o estilo de ícones de penas, pode executar esta operação com a ajuda do CSS.

Na nossa "estilo.CSS”Arquivo, definiremos três classes para definir o tamanho dos ícones de penas:

.penas-10
Largura: 10px;
Altura: 10px;

.Feather-24
Largura: 24px;
Altura: 24px;

.Feather-48
Largura: 48px;
Altura: 48px;

Para aplicar essas configurações a um ícone de penas, você deve mencionar a classe CSS necessária da seguinte maneira:

Mais uma vez, salve seu arquivo HTML, abra -o para o seu navegador favorito e observe a diferença no estilo dos ícones de penas:

Isso foi tudo sobre o uso básico de ícones de penas em HTML e CSS. Para explorar ainda mais, confira a documentação dos ícones de penas.

Conclusão

Para usar ícones de penas em HTML e CSS, você deve instalá -los primeiro usando a CDN, NPM Library ou baixando seus arquivos relacionados no site oficial. Depois de instalar ícones de penas, você pode integrar sua bela coleção de ícones e estilizá -los de acordo com suas preferências usando CSS. Este artigo discutiu o método para usar ícones de penas em HTML e CSS. Além disso, exemplos relacionados ao procedimento especificado também são fornecidos.