Como colocar e usar ícones font awesome no blog | Quero Dicas | Tutoriais para seu blogs


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 claro, 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 fonts? 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='//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' id='font-awesome-css' media='all' rel='stylesheet' type='text/css'/>


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 como cor, tamanho da fonte entre outras propriedades ao CSS.

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


Gostou? Deu tudo certinho? Deixe seu comentário.
Beijinhos

Este artigo é pertencente ao blog: Quero Dicas


Que bom você reservou um tempinho para vir comentar. Você me deixa super feliz e desde já agradeço por sua colaboração.

Comente. Mais peço que leia antes:

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

2 - Educação sempre! Comentários com xingamentos entre outros, não serão publicados ou respondidos.

3 - Comentários não relacionados ao titulo, não serão publicados.

4 - Comentários somente URLs de terceiros, não serão publicados.

♥ - Caso queira divulgar seu blog gratuitamente, Acesse, Galeria de Blogs
♥ - Eu terei o maior prazer em colocar o link ou seu banner nesta galeria.

Muito obrigada por seu comentário e por sua vista.
Beijinhos ♥
Abrir Conversa em CódigoFechar Conversa em Código Abrir EmoticonFechar Emoticon

Obrigada por seu comentário! Ele é muito importante para mim.