As fontes de ícones são impressionantes para o seu site: veja por que

Propaganda

Você já ouviu falar de ícones e quase certamente ouviu sobre fontes, mas o que é um Fonte do ícone? Hoje, mostrarei o que são fontes de ícones e como você pode usá-las para animar seu site. Vamos começar.

O que são fontes de ícones?

As fontes de ícone são exatamente as mesmas que as fontes "regulares" - elas definem a aparência de um pedaço de texto. A grande diferença aqui é que as fontes de ícones não contêm letras e números, mas símbolos e ícones. Você pode ficar confuso com isso, pois que fonte é boa se você não pode escrever cartas para sua mãe!

As fontes de ícone são usadas principalmente para estilizar sites. Como são baseados em vetores, eles podem ser redimensionados, movidos, estilizados e alterados usando CSS 5 etapas do bebê para aprender CSS e se tornar um feiticeiro de Kick-Ass CSSCSS é a única mudança importante nas páginas da web na última década e abriu caminho para a separação entre estilo e conteúdo. Na forma moderna, XHTML define a estrutura semântica ... consulte Mais informação

. Isso oferece uma enorme vantagem sobre os métodos tradicionais de design, como imagens. A aparência de um grande número de ícones pode ser alterada com apenas algumas linhas de código. Você não precisa editar nenhuma imagem, abrir o Photoshop ou fazer upload dos novos arquivos - basta escrever o código.

Começando

Eu vou estar usando Font Awesome para esses exemplos, mas a teoria pode ser aplicada a muitos outros pacotes de fontes.

Aqui está o HTML inicial:

Essa é a quantidade mínima de HTML necessária para produzir uma página da web. Não explicarei a maioria disso, pois abordamos isso em nosso guia sobre Como fazer um website.

A linha mais importante é a seguinte:

Isso carrega a folha de estilo Font Awesome do seu CDN. Sem essa linha, seu site não saberia o que é o Font Awesome, por isso é muito importante. Esta folha de estilo lida com todo o trabalho duro de incorporar fontes da Web e geralmente facilita muito as coisas para você.

Os ícones Font Awesome são definidos pelas classes CSS adicionadas ao Eu Tag. Eles foram escolhidos por não terem um navegador ou um estilo definido padrão associado a eles, para que seus ícones não fiquem confusos. Como alternativa, você pode adicionar as classes ao período tags, mas isso atrapalha seu HTML.

Aqui está o uso básico. Coloque isso dentro do seu corpo Tag:

 Meu primeiro ícone

Aqui está o que parece:

Quão fácil foi isso? Vamos dividir. Existem duas classes necessárias para que o Font Awesome funcione. O primeiro é chamado fa, que significa Font Awesome. Isso é necessário para qualquer ícone, independentemente de qual você usar. A segunda classe especifica o ícone específico que você deseja usar - pode ser qualquer coisa, um avião, uma pessoa ou cartão de crédito. Também é prefixado com fae, como se trata de um ícone de engrenagem, seu nome é fa-cog. Você pode ver uma lista de todos os ícones em Font Awesome no site deles.

Tente alterar o ícone da engrenagem para qualquer outra.

Indo Mais Fundo

Depois de conhecer o básico, é hora de fazer alguns truques avançados.

Se você não quiser escrever seu próprio CSS, poderá usar os estilos criados diretamente no Font Awesome. Existem muitas classes que você pode usar para aumentar os ícones:

Outra classe útil a ser usada é a fa-spin. Isso fará com que os ícones girem e, quando combinados com as classes de tamanho anteriores, você poderá produzir alguns efeitos interessantes. Aqui está o código:

Aqui está o resultado:

É fácil girar ícones - use o girar fa classe:

O número no final define os graus de rotação do ícone, mas não se empolgue. Você está limitado a 90, 180ou 270.

Um truque final que você pode fazer é empilhar. o fa-stack A classe permite combinar dois ou mais ícones. Aqui está o código:

Aqui está o que parece:

Depois que você começa a combinar todas essas classes, as possibilidades são infinitas.

CSS customizado

Como as fontes de ícone são somente fontes, você pode estilizá-las com CSS da mesma forma que faria com qualquer outro elemento. Usar um pouco de CSS3 pode percorrer um longo caminho:

Aqui está o HTML para esse ícone:

Aqui está o CSS:

@ keyframes move {from {margin-left: 0; } para {margem esquerda: 400 px; } } .bike {nome da animação: mover; duração da animação: 4s; }

Esse CSS é bastante básico, mas tem um grande impacto. No entanto, este não é um tutorial de CSS, então você pode querer aprenda CSS 10 exemplos simples de código CSS que você pode aprender em 10 minutosDeseja saber mais sobre o uso de CSS? Experimente estes exemplos básicos de código CSS para começar e aplique-os em suas próprias páginas da web. consulte Mais informação se você quiser saber mais sobre o funcionamento interno.

Você pode fazer algumas coisas especiais se realmente quiser:

Isso gagueja um pouco para reduzir o tamanho do arquivo da web. Aqui está o HTML:

Aqui está o CSS:

@keyframes fade {from {opacity: 0; } a {opacidade: 1; } } .person {opacidade: 0; nome da animação: fade; } # p1 {color: red; duração da animação: 2s; } # p2 {cor: laranja; duração da animação: 4s; } # p3 {cor: verde; duração da animação: 6s; } # p4 {duração da animação: 8s; }

Como no exemplo anterior, isso usa animações CSS3. Uma animação chamada desvaneça é criado e o ícone de cada pessoa implementa essa animação com um tempo variável. Há muito potencial para enlouquecer com esses ícones e CSS3.

Isso é tudo por hoje. Agora você deve poder usar as Fontes de ícone para animar seu site! Se você ainda não tem tanta certeza de suas habilidades, confira estas Sites modelo CSS 11 Sites de modelos CSS: Não comece do zero!Existem milhares de modelos CSS gratuitos disponíveis on-line, todos adotando tendências e tecnologias de design moderno. Você pode usá-los em sua forma original ou personalizá-los para torná-los seus. consulte Mais informação ou estes Canais do YouTube para começar Quer aprender Web Design? 7 canais do YouTube para você começarO YouTube possui milhares de vídeos e canais para iniciantes em web design. Aqui, examinamos alguns dos melhores para começar. consulte Mais informação com web design.

Você aprendeu algo novo hoje? Qual é a sua fonte de ícone favorita? Deixe-nos saber nos comentários abaixo!