Como colocar e usar ícones font awesome no blog | Quero Dicas Quero Dicas : Como colocar e usar ícones font awesome no blog

Quero Dicas : Como colocar e usar ícones font awesome no blog

Como colocar e usar ícones font awesome no blog

| |


Hoje eu ensino para vocês como colocar e usar font awesome no blog. Eu mesmo utilizo muito este estilo ao invés de adicionar arquivos de imagens ao meus blogs ou nas construções e/ou personalizações que faço (png, jpge...).

Mais, Porque utilizar font ao invés de imagens?

Quem não gosta de um blog ou site com lindas imagens para dar destaques a suas postagens? Acredito que todo mundo, não é?

Colocar imagens nas postagens deixa as mesmas mais interessantes e muito mais atrativas. Infelizmente, isso faz com que site ou blog pese na hora do carregamento. Por este fato, recorremos a algumas técnicas ou ferramentas.

Acesse e veja alguns sites de exemplos para este tipo de serviço:
Sites Grátis para Otimizar e Redimensionar fotos e Imagem

O fato é:
Utilizamos imagens em quase todo o nosso blog e quanto mais imagens no blog, mais pesado ele demora a carregar e, obviamente, quanto menos imagens melhor será o carregamento. Claro, entre outros fatores!

A maioria dos blogs e sites utilizam redes sociais para a sua divulgação e entretenimento externo com seus visitantes e colocam arquivos (jpg, jpge, png) de imagens dos ícones em seus respectivos blogs.

E que tal, utilizarmos esses mesmos ícones de nossas redes sociais sem a utilização de arquivos e sim, utilizando fontes? Legal, não é?

No site Font Awesome, existe mais de 470 ícones de todos os tipos (rede sociais ou não).  Acessando o site, você poderá baixar (versão paga), fazer upload e utilizar em seu blog sem dificuldade.

Outra forma fácil e gratuita de utilização é seguir o tutorial abaixo:


  TUTORIAL

1º - Acesse o painel do seu blog
2º - Clique em: Modelo e Editar HTML
3º - Tecle Ctrl + F para abrir a caixa de busca
4º - Dentro da caixa de busca digite ou cole o código abaixo:

 
<head>

5º - Abaixo de <head> cole:

 

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



Ou se preferir, adicione este mesmo código acima de </body> (também funcionará).

Utilizando o código 

Para utilizar os ícones font.

1 - Acesse: font awesome/icons
2 - Escolha o ícone desejado e clique sobre ele
3 - Na página a seguir copie o código descrito e adicione onde quer que ele apareça.

Exemplo:

1 º Opção:
Google Plus 
<i class="fa fa-google-plus fa-5x" ></i>

A escrita azul é o ícone. A escrita em vermelho é o tamanho do ícone

2 º Opção:
Caso não consiga visualização do seu ícone ao seu template, utilize este outro código:

 
<span class="fa fa-google-plus"/>


Google Plus 
<span class="fa fa-google-plus"/>

A escrita azul é o ícone. Neste caso não existe tamanho. Para isso, você deve adicionar o CSS em seu template. Exemplo:

.fa-gogle-plus {
 font-family: FontAwesome;
cor: #fff;
font-size: 14px;
}

O código acima, é somente um exemplo, basta você adicionar outros elementos CSS

Adicionando elementos ao HTML já existentes.

Para isso, você deve utilizar a classe :before no CSS aos elementos HTML.
Para isso faça desse jeito:

/* Ícone Google Plus */
.gogle-plus:before {
  content: "\f0d5";
  font-family: FontAwesome;
}

O código acima, é somente um exemplo, basta você adicionar os elementos, tais como: cor, tamanho da fonte entre outras propriedades de CSS.

Para saber o código content: veja um desses sites - Astronaut ou Hshanbhag

Gostou? Deixe seu comentário.
Beijinhos

Este artigo é pertencente ao blog: Quero Dicas



Compartilhe

* Você reservou um tempinho para comentar? *

Desde já agradeço!

Devido a falta de tempo, não prometo responder a todos os comentários. Mas farei o possível!


Um comentário:

Amigos do Blog

agenda dos blogs Universo das Dicas

Ganhe Visitantes | Inscreva-se!

GeraLinks Linkicha Atoananet Linkirado
subir