Categorias
X

    Esse é o primeiro cabeçalho cabeçalho rotativo e talvez seja o único que eu não precise acrescentar nenhuma palavra à poesia (música) a qual me inspirei pra criá-lo.


  • Antigamente quando queríamos usar ícones, deveríamos procurar no Google a imagem que queríamos e inserir onde quiséssemos. Isso era meio trabalhoso, porque precisávamos achar o ícone com cor ideal, de repente manipular em algum programa de edição, salvar num tamanho pequeno pra não pesar no carregamento do blog e depois usar como imagem no template.

    Se você ainda faz isso, talvez eu esteja resolvendo um dos seus problemas hoje!

    Existe uma ferramenta linda e maravilhosa chamada Font Awesome, a qual contém nada mais e nada menos que 634 ícones (inclusive de redes sociais) que você pode usar no seu blog de graça.

    Como funciona

    Toda as vezes que você quiser algum ícone que esteja disponível na lista de ícones, você vai simplesmente pegar o código que o site vai te dar ao clicar no link desejado. Por exemplo, se você quer usar o ícone do facebook, ao clicar nele você vai encontrar a seguinte página:

    Então o código que você vai usar pra que apareça o ícone será este no último campo cinza.
    Extremamente fácil, viu?

    Como instalar no blog

    Download

    Fazendo download diretamente do Font Awesome.

    Você vai precisar fazer o Download de alguns arquivos. Depois de feito, você vai enviar esses arquivos para uma pasta no seu diretório. Por exemplo: /seublog.com/path/to

    Depende de como você organiza seus arquivos, mas recomendo não colocar em pastas de Templates do WordPress (/wp-content/themes/), porque um dia você apaga o template e esquece que o arquivo de fontes também está lá e aí você vai precisar fazer o download de novo.

    Seguindo esse caminho do exemplo, você precisará agora ir em Aparência > Editor e abrir o arquivo header.php.
    Procure a tag e insira o seguinte código após essa tag:

    PS: se você colocou os arquivos de download em outro endereço dentro do seu diretório, basta substituir o que vem antes de /font-awesome pelo endereço correto.

    Embed Code

    Deixa que o Font Awesome faz esse trabalho pra você

    A outra forma mais simples de usar é adicionando seu email no formulário na página Get Started.

    Como usar Fonte Awesome Icons

    Assim que você preencher, você receberá um email com um código super pequeno que você deverá inserir depois da tag head do editor do seu blog.

    Tudo instalado?

    Basta usar! Visite a página de ícones, escolha o que deseja e prontinho!

    como-usar-font-awesome-3

    Como personalizar

    Você também pode personalizar seus ícones com cores e tamanhos que desejar.
    A class nativa é sempre ‘fa‘. Ou seja, pra personalizar todos os ícones, você seu código vai ficar mais ou menos assim:


    i.fa {
    color: #000; /* cor dos ícones */
    font-size: 12px; /* tamanho dos ícones */
    }

    Se quiser, por exemplo, que eles fiquem dentro de um quadrado vermelho. Você pode estilizá-los assim:


    i.fa {
    color: #000;
    font-size: 12px;
    padding: 5px; /* espaço entre o ícone e as bordas */
    background: red; /* cor do fundo */
    }

    Mas se você quer personalizar um ícone específico, então você vai precisar usar a classe usada no código que o Font Awesome te deu.

    Digamos que queira personalizar o ícone do facebook. Então seu código vai ser parecido com esse:


    i.fa-facebook {
    color: #000; /* cor dos ícones */
    font-size: 12px; /* tamanho dos ícones */
    }

    O padrão sempre será esse: fa- seguido do nome do ícone. Daí você pode personalizar os ícones das redes sociais, por exemplo, pra que cada um seja da cor de suas respectivas plataformas.

    Você pode visitar a página de Exemplos pra dar uma olhada em outras formas de personalização.

    Deixei passar alguma explicação? Deixe nos comentários que vou ter o maior prazer em ajudar da forma que eu puder!



    ← voltar

    assine a newsletter e receba toda semana muito amor e dicas pra fazer seu blog crescer e deixá-lo ainda mais com sua cara, além de acesso grátis a:

  • Templates de banners
    Vários templates lindos de diversos estilos e temas pra você usar nos posts do seu blog, no Instagram e no Pinterest. É só baixar e editar!
  • E-books & Tutoriais
    Conteúdos exclusivos pra te ajudar em várias áreas do seu blog, sem contar com as listas de tutoriais e códigos pra deixar seu blog mais dinâmico
  • Gráficos diversos
    Se você acha que não tem dom pra montar elementos gráficos pra suas fotos, pode deixar comigo que eu crio e você usa ;)