Como adicionar Font Awesome no Blogger

em 16/05/2022

Tempo de leitura:

 

Como adicionar Font Awesome no Blogger


  • Atualmente, é impossível encontrar um blog\site que não tenha pelo menos uma conta de mídia social associada a ele.

  • Twitter, Facebook, Instagram, Pinterest, YouTube, etc. 

  • Com o tempo, as mídias sociais aumentaram cada vez mais sua presença online.

  • Um item obrigatório para blogueiros que nunca deve ser esquecido são os ícones de mídia social que usamos para compartilhar e fazer com que nosso público nos siga de mais maneiras.

  • Indispensável na atualidade para realizar nossas divulgações, de postagens, brindes, itens a venda e prestação de serviços.

  • Depois que suas contas de mídia social estiverem configuradas, você não pode simplesmente ficar a espera que elas sejam descobertas.

  • Claro, você pode usar #hashtags para se encontrar e se comunicar com nichos semelhantes, você precisa de algo mais em seu blog.

  • Dessa forma faz com que o público, marca de interesse em seu blog tenham outras formas de atualização e novidades que você publique.

  • Como fazer?

  • Simples, através dos ícones sociais.

  • Cada rede social possui seu ícone e cor representativa, sua marca, sempre inconfundível.

  • Como funciona?

  • Font Awesome, oferece ícones vetoriais escaláveis que podem ser personalizados imediatamente.

  • Tamanho, cor, sombra projetada qualquer coisa que possa ser feita através do CSS, funcionando como um kit de ferramentas onde você obtém acesso a mais de 500 ícones para usar em seu blog gratuitamente.

  • Porque usar o Font Awesome?

  • As outras formas de imagens demoram a carregar, com o passar do tempo tendem a perda sua qualidade a medida que a resolução do computador aumenta. 
  • Usando Font Awesome seus ícones iram carregar mais rápido com aparência nítida e limpa.

  • Uma grande coleção de ícones tanto de para uso das redes sociais como tradicionais.

  • Suporte CSS onde permite que ajuste os ícones conforme o melhor adequação ao seu blog possibilitando muitas personalizações.

  • Carregamento rápido e é gratuito.
  • Adicionando Font Awesome em seu Blogger.

  • Vá ao seu editor do blogger em tema, clique na seta ao lado de personalizar, editar HTML assim que seu editor abrir você logo verá a tag <head> abaixo dela cole o código que faz com que os ícones funcionem:

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

  • Após essa etapa o blog já está pronto para adicionarmos o Font Awesome, adicionando os links dos ícones das mídias sociais ao HTML do Blogger.

<div id="fawesomeicons">
<a href="URL-AQUI" title="Facebook" target="_blank" rel="nofollow"> <i class="fa fa-facebook"></i> </ a>
<a href="URL-AQUI" title="Google Plus" target="_blank" rel="nofollow"> <i class="fa fa-google-plus"></i> </a>
< a href="URL-AQUI" title="Twitter" target="_blank" rel="nofollow"> <i class="fa fa-twitter"></i> </a>
<a href="URL-AQUI" title="Pinterest" target="_blank" rel="nofollow"> <i class="fa fa-pinterest"></i> </a>
<a href="URL -AQUI" title="Instagram" target="_blank" rel="nofollow"> <i class="fa fa-instagram"></i> </a>
<a href="URL-AQUI" title=" Bloglovin" target="_blank" rel="nofollow"> <i class="fa fa-heart"></i> </a>
<a href="URL-AQUI" title="Tumblr" target="_blank " rel="nofollow"> <i class="fa fa-tumblr"></i> </a>
<a href="URL-AQUI" title="RSS" target="_blank" rel="nofollow"> <i class="fa fa-rss"></i> </a>
</div>
 
 
  • O Font Awesome funciona em qualquer lugar com a tag <i>, porque é projetado para funcionar em elementos inline, embora possamos usar <span> a documentação oficial prefere a opção <i>.

  • Os ícones podem ser adicionados em qualquer lugar usando o prefixo CSS "fa" com o nome do ícone.

  • Para saber o nome dos ícones e conhecer os modelos no site Font Awesome.

  • Incluindo o ícone na lista:

  • Copie qualquer linha que comece com "<a href" e termine com "</a>" do código acima, cole onde desejar que ele aparaça e substitua o código que começa com "<i class="fa" e termina com "</i>" com o ícone escolhido.

  • Onde instalar?

  • Você pode adicionar os ícones em Gadget HTML\Javascript, o código disponibilizado acima.
  • Em personalizações específicas como perfil da autora, rodapé de postagem, perfil da autora ao final da postagem, menu, rodapé de créditos. (Para saber os códigos dessas personalizações basta procurar no menu do blog a postagem correspondente).

  • O código das personalizações deve ser adicionados acima da tag de fechamento ]]></b:skin>.

  • Para visualizar todos os ícones visite o FontAwesome.

  • Caso você deseje alterar tamanho, altura, largura  acrescente o código abaixo e teste para visualizar como fica.

#fawesomeicons a {
    tamanho da fonte: 16px; (tamanho do ícone)
    largura: 30px;
    altura: 30px;
    altura da linha: 30px;
}

  • Personalizar o ícone individualmente com suas respectivas cores.

#fawesomeicons a . fa-fa-pinterest{
background: #background-color ;
cor: #font-color ;
}

  • Agora é só você testar com as combinações desejadas em seu blog, não esquecendo de sempre realizar primeiro no seu blog de testes, se ainda não criou um é hora de fazer.

  • Dúvidas, sugestões e pedidos deixe aqui nos comentários, que rapidinho respondo.

  • Até mais!

Nenhum comentário , comente também!

Postar um comentário

Você leu um artigo escrito com grande dedicação. Gostou? !
Deixe seu comentário, crítica e sugestão, eles são importantes para o desenvolvimento do Blog.
Sua mensagem será respondida o mais rápido possível.
Obrigado pela visita, volte sempre. Aproveite para inscrever-se e receber as novidades.