sexta-feira, 9 de setembro de 2016

Visual Dicas

Visual Dicas

Link to Visual Dicas

Como utilizar a biblioteca Font Awsome - ícones gratuitos para sites e blogs (customização)

Posted: 08 Sep 2016 06:01 PM PDT

Como utilizar a biblioteca Font Awsome - Visual Dicas

O que é Font Awsome

Font Awsome é uma biblioteca de ícones tipo "font icons", pois permite que os ícones do seu banco de dados sejam exibidos e tratados como se fossem caracteres comuns. O legal dessa biblioteca, que além da grande quantidade de ícones disponíveis gratuitamente e da facilidade de utilização, é a total liberdade de customização.

Como utilizar a biblioteca Font Awsome - Visual Dicas

Os ícones podem ser facilmente customizados através de estilos CSS padrão e/ou através classes pré preparadas. A biblioteca Font Awsome possui uma variedade de classes CSS já prontas para customização dos ícones. Estas classes facilitam muito a vida dos programadores e web designers, como mostraremos a seguir:

Usando a biblioteca Font Awsome no seu site

1) Para carregar a biblioteca, Insira a linha de código abaixo na seção <head></head> da página HTML do seu blog ou site.

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">

Obs1.: Leia o post: Ícones gratuitos para sites - Font Awsome para saber como inserir o código no seu blog / site (Blogger, Wordpress, Joomla, e sites em geral).

2) Para visualizar todos ícones que você poderá inserir no seu site, acesse o link: http://fontawesome.io/icons/.

Como utilizar a biblioteca Font Awsome - Visual Dicas

3) Para definir a classe do ícone, utilize o prefixo "fa" antes do nome do ícone. Por exemplo, vamos escolher o ícone "bars". Portanto, a classe do nosso ícone ficará da seguinte forma: fa-bars.

Obs.: Se desejar, clique no ícone desejado para visualizar o nome da classe.

Como utilizar a biblioteca Font Awsome - Visual Dicas

Você então visualizará a classe do ícone. No nosso exemplo, ficará: fa-bars

Como utilizar a biblioteca Font Awsome - Visual Dicas

4) Para inserir o ícone padrão na página HTML ou em uma postagem, utilize o bloco de tags <i></i> com as respectivas classes de cada ícone.  Acrescente o prefixo "fa" antes da classe do ícone que definimos anteriormente. Veja no nosso exemplo a seguir, o código para exibir o ícone "bars" padrão.  Digite utilizando o editor HTML do seu blog.

<i class="fa fa-bars"> </i>

Veja como ficou o ícone padrão do nosso exemplo:

Obs.: Para visualizar ícones antes de inserí-los no seu site, utilize o editor de HTML: http://squids.com.br/editor/. Não esqueça de inserir o código de inicialização para carregar a biblioteca Font Awsome.

(Digite em Código Fonte e clique no botão [Enviar Código] para visualizar)

Como utilizar a biblioteca Font Awsome - Visual Dicas

Customizando ícones

Usando estilos CSS

Você poderá customizar seus ícones usando estilos CSS normalmente. Veja os exemplos abaixo:

<i class="fa fa-car"></i>
<i class="fa fa-car" style="font-size:48px;"></i>
<i class="fa fa-car" style="font-size:60px;color:red;"></i>

</br><br/>

<i class="fa fa-cloud" style="font-size:24px;"></i>
<i class="fa fa-cloud" style="font-size:36px;"></i>
<i class="fa fa-cloud" style="font-size:48px;color:red;"></i>
<i class="fa fa-cloud" style="font-size:60px;color:lightblue;text-shadow:2px 2px 4px #000000;"></i>

Visualização do nosso exemplo:



Classes de dimensões (Large icons)

A classe fa-lg aumenta 33% do ícone padrão. Depois as classes fa-2x, fa-3x, fa-4x ou fa-5x aumentam em vezes o ícone da classe fa-lg. Veja o exemplo abaixo:

<i class="fa fa-car"></i>
<i class="fa fa-car fa-lg"></i>
<i class="fa fa-car fa-2x"></i>
<i class="fa fa-car fa-3x"></i>
<i class="fa fa-car fa-4x"></i>
<i class="fa fa-car fa-5x"></i>

Veja como ficou o nosso exemplo:

Listas de ícones

As classes fa-ul e fa-li devem ser utilizadas para posicionar ícones ordenados por listas. Veja o exemplo a seguir:

<ul class="fa-ul">
  <li><i class="fa-li fa fa-home"></i>Home</li>
  <li><i class="fa-li fa fa-book"></i>Biblioteca</li>
  <li><i class="fa-li fa fa-pencil"></i>Aplicações</li>
  <li><i class="fa-li fa fa-cog"></i>Configurações</li>
</ul>

Visualização do nosso exemplo:

  • Home
  • Biblioteca
  • Aplicações
  • Configurações

Ícones animados

A classe fa-spin gera um efeito de rotação e a classe fa-pulse um efeito de rotação intermitente para qualquer ícone da biblioteca.Veja os exemplos abaixo:

<p>Rotação - classe "fa-pin"</p>
<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
<i class="fa fa-car fa-spin"></i>

<p>Rotação intermitente - classe "fa-pulse"</p>
<i class="fa fa-spinner fa-pulse"></i>
<i class="fa fa-circle-o-notch fa-pulse"></i>
<i class="fa fa-refresh fa-pulse"></i>
<i class="fa fa-cog fa-pulse"></i>
<i class="fa fa-car fa-pulse"></i>

Visualização do exemplo:

Rotação - classe "fa-pin"

Rotação intermitente - classe "fa-pulse"

Rodar e virar ícones

As classes fa-rotate e fa-flip devem ser usadas para girar (rotate) ou virar (flip) qualquer ícone da biblioteca. Veja os exemplos a seguir:

<p>Usando rotate</p>
<i class="fa fa-car"></i>
<i class="fa fa-car fa-rotate-90"></i>
<i class="fa fa-car fa-rotate-180"></i>
<i class="fa fa-car fa-rotate-270"></i>
<p>Usando flip - horizontal</p>
<i class="fa fa-hand-o-left"></i>
<i class="fa fa-hand-o-left fa-flip-horizontal"></i>
<p>Usando flip - vertical</p>
<i class="fa fa-car"></i>
<i class="fa fa-car fa-flip-vertical"></i>

Visualizar o exemplo:

Usando rotate

Usando flip - horizontal

Usando flip - vertical

Sobreposição de ícones

Para sobrepor (empilhar) vários ícones da biblioteca, use a classe fa-stack. As classes fa-stack-1x e fa-stack-2x, mudam o tamanho dos ícones. Para inverter as cores, use a classe fa-inverse. Veja os exemplos a seguir:

<h3><strong>Sobreposição de ícons (padrão):</strong></h3>
<span class="fa-stack">
  <i class="fa fa-circle-thin fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>
<br>

<span class="fa-stack">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
<br>

<span class="fa-stack">
  <i class="fa fa-camera fa-stack-1x"></i>
  <i class="fa fa-ban fa-stack-2x text-danger" style="color:red;"></i>
</span>


<h3>Usndo classe fa-lg (ícones maiores):</h3>
<span class="fa-stack fa-lg">
  <i class="fa fa-circle-thin fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>
Ícone do twitter sobre o ícone do círculo<br>

<span class="fa-stack fa-lg">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
ícone do twitter (inverse) sobre o ícone do círculo<br>

<span class="fa-stack fa-lg">
  <i class="fa fa-camera fa-stack-1x"></i>
  <i class="fa fa-ban fa-stack-2x text-danger" style="color:red;"></i>
</span>
sobreposição do ícone twitter sobre o ícone fa-ban

<h3>Usando classe fa-3x (ícones maiores):</h3>
<span class="fa-stack fa-3x">
  <i class="fa fa-circle-thin fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>
<br>

<span class="fa-stack fa-3x">
  <i class="fa fa-circle fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
<br>

<span class="fa-stack fa-3x">
  <i class="fa fa-camera fa-stack-1x"></i>
  <i class="fa fa-ban fa-stack-2x text-danger" style="color:red;"></i>
</span>

Visualização do nosso exemplo:

Sobreposição de ícones (padrão):



Usndo classe fa-lg (ícones maiores):

Ícone do twitter sobre o ícone do círculo
ícone do twitter (inverse) sobre o ícone do círculo
sobreposição do ícone twitter sobre o ícone fa-ban

Usando classe fa-3x (ícones maiores):



Para saber mais e conhecer outras classes para customização dos ícones da biblioteca Font Awsome, clique no link: http://fontawesome.io/examples/

Testando ícones no Squids Editor

Para visualizar ícones antes de inserí-los no seu site, utilize o editor de HTML: http://squids.com.br/editor/. Não esqueça de inserir o código de inicialização para carregar a biblioteca Font Awsome.

(Digite em Código Fonte e clique no botão [Enviar Código] para visualizar)

Como utilizar a biblioteca Font Awsome - Visual Dicas

byALF

Visual Dicas - A sua fonte de informação!

Este artigo pertence ao Visual Dicas. Plágio é crime e está previsto no artigo 184 do Código Penal.
Nenhum comentário:

sexta-feira, 2 de setembro de 2016

Como comprar imagens para um site (uso Comercial)

Como comprar imagens para um site (uso Comercial)

Link to Montar um Blog – Dicas, Ferramentas e Tutoriais

Como comprar imagens para um site (uso Comercial)

Posted: 02 Sep 2016 11:53 AM PDT

Já diz o velho ditado: “Uma imagem vale mais do que mil palavras”. Para um Webmaster, vale muito mais. As imagens permitem ilustrar o conteúdo da página, melhorando a experiencia do visitante. Uma boa imagem é igualmente essencial para melhorar a indexação do seu conteúdo nos motores de busca, e otimizar a partilha das suas páginas através das… Ler Mais » O post Como comprar...

Aceda ao nosso site para continuar a ler, clique no título.

Como ocultar postagens da Homepage (Inicio) no Blogger

Posted: 02 Sep 2016 02:22 AM PDT

Por norma quando se publica um artigo no Blogger, ele é exibido na página principal, ficando visível até ser substituído por novas postagens. No entanto, podem existir situações em que você não pretende exibir determinado artigo na Homepage, sendo assim, como podemos resolver o problema? Como ocultar postagens da Homepage (inicio) no Blogger Para ocultar uma postagem da… Ler Mais » O post...

Aceda ao nosso site para continuar a ler, clique no título.
Nenhum comentário:

quinta-feira, 1 de setembro de 2016

Como incorporar postagens de página de fãs do Facebook no site

Como incorporar postagens de página de fãs do Facebook no site

Link to Montar um Blog – Dicas, Ferramentas e Tutoriais

Como incorporar postagens de página de fãs do Facebook no site

Posted: 01 Sep 2016 10:28 AM PDT

As páginas do Facebook são excelentes “ferramentas de trabalho”, permitindo manter o contacto com o seu público, divulgar o seu conteúdo, obter estatísticas de utilização do conteúdo, etc. Se pretende promover um conteúdo específico da sua página Facebook (ou outra página qualquer), poderá usar a ferramenta de incorporação de conteúdo disponibilizado pelo próprio Facebook. Você poderá...

Aceda ao nosso site para continuar a ler, clique no título.

Remover o “Pessoas Também curtiram” da página Facebook

Posted: 01 Sep 2016 04:46 AM PDT

Neste tutorial iremos explicar como remover a secção “pessoas também curtiram” da sua página de fãs do Facebook. Apesar de a intenção ser boa, faz imensa confusão estar a promover os seus concorrentes diretamente na sua página, especialmente quando não se ganha dinheiro em troca. A secção “Pessoas também curtiram” baseia-se num processo recíproco, ou seja, você exibe… Ler...

Aceda ao nosso site para continuar a ler, clique no título.
Nenhum comentário:

quarta-feira, 31 de agosto de 2016

Como mudar o wp-admin do WordPress (página de login)

Como mudar o wp-admin do WordPress (página de login)

Link to Montar um Blog – Dicas, Ferramentas e Tutoriais

Como mudar o wp-admin do WordPress (página de login)

Posted: 31 Aug 2016 11:37 AM PDT

Pretende mudar a página de login do WordPress do tradicional wp-admin (ou wp-login) para um URL definido por si? É muito simples, na prática basta recorrer a um plugin gratuito que permite redirecionar a URL para uma página diferente. Dessa forma, conseguirá esconder a página de acesso ao painel administrativo do seu WordPress, reduzindo o risco de ataques… Ler Mais » O post Como mudar o...

Aceda ao nosso site para continuar a ler, clique no título.
Nenhum comentário:

Visual Dicas

Visual Dicas

Link to Visual Dicas

Ícones gratuitos para sites - Font Awsome (bibliotecas tipo “font icons”)

Posted: 30 Aug 2016 04:55 PM PDT

Ícones gratuitos para sites - Font Awsome - Visual Dicas

Bibliotecas de ícones tipo "font icons"

Existem várias bibliotecas de ícones disponíveis na internet. Pesquisando, encontramos 3 bibliotecas "font icons" fantásticas, gratuitas, customizáveis e que podem ser facilmente adicionadas no seu site ou blog. Estamos falando das modernas bibliotecas: Font Awsome, Bootstrap e Google Material Design.

Font icons: Bibliotecas que exibem ícones como se fossem caracteres comuns.

Neste artigo mostraremos como instalar a biblioteca de ícones Font Awsome em blogs nas plataformas Blogger, Wordpress.org, Joomla e sites em geral. A biblioteca Font Awsome conta atualmente com mais de 630 ícones divididos em várias categorias. Vale a pena conhecer!

Ícones gratuitos para sites - Font Awsome - Visual Dicas

Carregando a biblioteca Font Awsome no seu site

Para adicionar a biblioteca você deverá copiar e colar o código abaixo no seu site ou blog:

Código de instalação da biblioteca

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">

Você deverá inserir o código acima individualmente em cada postagem (utilizando um editor HTML) ou em cada página onde se deseja exibir um ícone da biblioteca.

Entretanto, se você pretende utilizar ícones em todo o seu site, poderá adicionar a biblioteca Font Awsome diretamente no documento principal. Assim, o código carregará os "font icons" e todos os estilos CSS da biblioteca, possibilitando a exibição dos ícones customizáveis em qualquer parte do site.

Adicionando o código no documento principal do site

 

Blogger

O Blogger não permite que você cole o código de instalação na página HTML (em Modelo - Editar HTML). Portanto, teremos que inserir o código em um novo gadget tipo HTML/JavaScript .

Em Layout, clique em [+ Adicionar um Gadget].

Ícones gratuitos para sites - Font Awsome - Visual Dicas

Abra um gadget tipo HTML/JavaScript.

Ícones gratuitos para sites - Font Awsome - Visual Dicas

Cole o código de instalação em Conteúdo e clique no botão [Salvar].

    Obs.:

    • Não coloque título no gadget.
    • O gadget poderá ficar posicionado em qualquer local do layout.
    • Para desinstalar a biblioteca, basta excluir o gadget.

    Ícones gratuitos para sites - Font Awsome - Visual Dicas

    Wordpress (wordpress.org)

    No menu lateral do painel do Wordpress, selecione Aparência e clique em [Editor].

    Ícones gratuitos para sites - Font Awsome - Visual Dicas

    Na coluna direita procure o arquivo header.php. Clique no link [Cabeçalho do tema] para abrir o arquivo no editor.

    Ícones gratuitos para sites - Font Awsome - Visual Dicas

    Cole o código de instalação imediatamente antes da tag de fechamento </head>.  Clique no botão [Atualizar Arquivo]. Para desinstalar a biblioteca, basta excluir a linha de código que foi incluído.

    Ícones gratuitos para sites - Font Awsome - Visual Dicas

    Joomla

    No painel do Joomla, acesse Extensões >> Temas >> Temas. Depois clique no link [Detalhes e Arquivos] do "template" que você está utilizando no seu site.

    Ícones gratuitos para sites - Font Awsome - Visual Dicas

    Clique em [index.php].

    Ícones gratuitos para sites - Font Awsome - Visual Dicas

    Cole o código de instalação imediatamente antes da tag de fechamento </head>. Clique no botão [Salvar]. Para desinstalar a biblioteca, basta excluir a linha de código que foi incluído.

    Ícones gratuitos para sites - Font Awsome - Visual Dicas

    Sites em Geral

    Para sites em geral, usando um IDE, basta colocar a linha do código de instalação dentro do bloco <head> </head>  do arquivo principal index, ou em qualquer página onde você irá exibir os ícones da biblioteca.

    Ícones gratuitos para sites - Font Awsome - Visual Dicas

    Usando a biblioteca Font Awsome

    Para exibir os ícones desejados, após ter inserido a linha de código para carregar a biblioteca Font Awsome, basta utilizar o bloco de tags <i></i> com as respectivas classes de cada ícone.

    Para você encontrar a classe dos ícones, acesse o link http://fontawesome.io/icons/.

    Ícones gratuitos para sites - Font Awsome - Visual Dicas

    Clique sobre o ícone desejado. No exemplo abaixo, vamos escolher o ícone "envira".

    Ícones gratuitos para sites - Font Awsome - Visual Dicas

    No nosso exemplo, a classe do ícone será  "fa-envira".

    Ícones gratuitos para sites - Font Awsome - Visual Dicas

    Acrescente o prefixo "fa" antes da classe do ícone, definido a classe CSS padrão do mesmo. Veja no nosso exemplo a seguir, o código para exibir o ícone "envira".  Digite utilizando o editor HTML do seu blog.

    <i class="fa fa-envira"> </i>

    Veja abaixo como ficou o nosso exemplo.

    Veja outros exemplos a seguir:

    <i class="fa fa-cloud" style="font-size:24px;"></i>
    <i class="fa fa-cloud" style="font-size:36px;"></i>
    <i class="fa fa-cloud" style="font-size:48px;color:red;"></i>
    <i class="fa fa-cloud" style="font-size:60px;color:lightblue;text-shadow:2px 2px 4px #000000;"></i>

    Observe que podemos customizar os ícones com estilos CSS (tamanho, cor, sombras, etc)

    Uma dos recursos mais legais da biblioteca Font Awsome é variedade de classes CSS já prontas para customização dos ícones. Estas classes facilitam muito a vida dos programadores e web designers. Mas isto mostraremos no próximo artigo…

    Ícones gratuitos para sites - Font Awsome - Visual Dicas

    byALF

    Visual Dicas - A sua fonte de informação!

    Este artigo pertence ao Visual Dicas. Plágio é crime e está previsto no artigo 184 do Código Penal.
    Nenhum comentário:
    Assinar: Postagens (Atom)

    Afilia-se na NetAffiliation

    Ganhe dinheiro com os Programas de Afiliados

    Cursos Online é Cursos 24 Horas