PROMOÇÃO - Magazine Luiza - NÃO PERCA!

Publicidade:

Encontre no blog...

25/09/16

Oito gafes no WhatsApp que atrapalham a sua imagem profissional

WHATSAPP_BLOG

 

Gafes no WhatsApp que atrapalham a sua imagem

No contexto profissional, é melhor evitar piadas, frases de autoajuda ou “desabafos” sobre política para não se comprometer com o chefe ou os colegas de equipe

por Empregos.com.br
http://www.empregos.com.br

Via de regra, redes sociais se dividem claramente entre pessoais e profissionais: é quase consenso que plataformas como Facebook e Instagram pertencem ao primeiro grupo, enquanto ferramentas como o LinkedIn se enquadram na segunda categoria.

Mas como você classificaria o WhatsApp? Com cerca de 100 milhões de usuários no Brasil, o aplicativo não serve apenas para manter o contato com familiares e amigos, mas também para conversar com colegas de trabalho, chefes, subordinados e clientes.

Isso causa uma infinidade de confusões no mundo corporativo. Usar o WhatsApp para fins profissionais torna a comunicação muito mais fácil e rápida, mas é preciso ter cuidado para não exceder certos limites e, assim, arranhar a sua reputação.

Saiba quais são os deslizes que você não pode cometer usando o WhatsApp para o trabalho:

1-Mandar mensagens sobre o trabalho fora do expediente

Nenhum empregador gosta que seu funcionário atrase suas tarefas por passar muito tempo conversando no WhatsApp sobre assuntos pessoais. O contrário também deve valer: não é permitido assediar a equipe com cobranças via app no seu período de descanso.

Mandar mensagens fora do expediente não é apenas uma gafe: a prática pode até render processos trabalhistas por horas extras não remuneradas.

2-Trocar o “olho no olho” por balões de texto

Esta mesma orientação vale para WhatsApp, e-mail ou qualquer outra ferramenta online: não abandone as interações presenciais em nome da (inegável) praticidade de se enviar mensagens por escrito.

Isso se aplica especialmente a conversas importantes, como feedbacks para a equipe ou negociações delicadas com clientes e fornecedores.

3-Mandar piadas, frases de autoajuda ou “desabafos” sobre política

Antes de enviar um conteúdo engraçado para colegas, chefes e subordinados, pergunte a si mesmo se você compartilharia aquilo com eles presencialmente. Dependendo do tipo de humor, piadas podem soar inadequadas e até ofensivas. Correntes, frases “inspiradoras” e comentários inflamados sobre política também podem causar irritação.

8 gafes no WhatsApp que atrapalham a sua imagem profissional

Foto: Chonlachai / Shutterstock.com

4-Visualizar e não responder

O WhatsApp notifica a leitura de todas as mensagens: assim que elas são visualizadas pelo destinatário, aparecem com dois risquinhos azuis ao lado. Essa “delação” pode causar muitos conflitos, de quem simplesmente ignorou a mensagem. A melhor saída é desabilitar a função de notificações de leitura.

5-Confundir destinatários

Com a pressa e a distração do dia a dia, não é difícil mandar mensagens para as pessoas erradas. É preciso ter atenção máxima antes de apertar o botão “enviar” — um cuidado que vale especialmente para quem participa de muitos grupos no WhatsApp.

6-Usar uma foto de perfil inadequada

A maioria das pessoas sabe que não deve usar uma foto pessoal tirada na praia como avatar no LinkedIn. Se você se comunica por WhatsApp com outros profissionais ou clientes, não se esqueça de que o mesmo vale para o seu perfil no aplicativo.

7-Errar a mão nos emojis

Um dos recursos mais populares do WhatsApp é o imenso acervo de carinhas e ícones divertidos que você pode adicionar às suas mensagens. Os “emoticons” são aceitáveis numa interação profissional, mas é melhor usá-los com cautela — até porque, em alguns casos, o tom da conversa exige sobriedade. Use apenas os mais básicos.

8-Tropeçar no português

A redação de um e-mail costuma exigir mais tempo e concentração do que a produção de uma mensagem de WhatsApp. Essa rapidez faz com que muitos usuários cometam erros de gramática e ortografia na comunicação pelo aplicativo, o que pode comprometer a sua imagem profissional.

A ferramenta de autocorreção pode parecer salvadora nesses momentos, mas também pode virar um problema. A palavra original pode ser substituída automaticamente por outra muito diferente, e gerar constrangimento dependendo da troca. A regra é a mesma que vale para e-mails: revisar atentamente todo e qualquer texto antes de enviá-lo.

Fonte: Empregos.com.br

Formatos Banner

24/09/16

Seu blog está redirecionando para outra url: http://quickdomainfwd.com/?dn=twitter-fanbox.com&pid=9PO755G95 - como resolver

Seu blog está redirecionando para outra url: http://quickdomainfwd.com/?dn=twitter-fanbox.com&pid=9PO755G95 - como resolver

Redirecionando para outra url

Se você percebeu que toda vez que se clica em algum link no seu blog é automaticamente redirecionado para a url http://quickdomainfwd.com/?dn=twitter-fanbox.com&pid=9PO755G95, provavelmente você deve ter inserido o widget  Fan Box Twitter.

Este widget, disponível nos sites http://www.musicpaax.com/twitter/ e http://www.helperblogger.com/2014/12/twitter-fanbox-blogger.html, como você pode ver abaixo, está gerando este desastroso erro.

Seu blog está redirecionando para outra url: http://quickdomainfwd.com/?dn=twitter-fanbox.com&pid=9PO755G95 - como resolver

Em outubro de 2015, no artigo Coloque o Fan Box Twitter no seu blog (caixa de fãs do Twitter), sugerimos a inclusão do Fan Box Twitter. Infelizmente o widget foi desativado, gerando este erro de redirecionamento. O redirecionamento automático produz muito desconforto aos leitores e deverá eliminado.

Eliminando o erro

Se você  também está tendo este problema, basta excluir definitivamente o widget Fan Box Twitter do seu blog.

No Blogger, em layout, encontre o local onde você inseriu o Fan Box Twitter, apague o código ou exclua o gadget completamente.

No Wordpress, em Aparencia, acesse Widgets. Encontre o local do Fan Box Twitter, apague o código ou exclua o widget completamente.

byALF

19/09/16

Veja quem está observando você - Lightbeam extensão para o Firefox

Veja quem está observando você - Lightbeam extensão do Firefox - Visual Dicas

Lightbean - veja quem está te rastreando online

Lightbeam é uma extensão do Firefox que usa visualizações interativas para mostrar quais sites acessados estão interagindo com você na web. Enquanto você navega, o Lightbeam revela todo o interior da Web, incluindo as partes que não são evidentes para o usuário comum.

Com a extensão, o usuário poderá saber quais sites e serviços de terceiros estão coletando seus dados de navegação com cookies, permitindo decidir quais sites devem ou não ter seus cookies bloqueados.

O que é cookie?

Um cookie é um pequeno pacote de dados enviados de um website para o navegador do usuário quando o usuário visita o site. Cada vez que o usuário visita o site novamente, o navegador envia o cookie de volta para o servidor para notificar atividades prévias do usuário.

Os cookies foram designados para ser um mecanismo confiável para que sites se lembrem de informações da atividade do usuário, como senhas gravadas, itens adicionados no carrinho de compras em uma loja online, links que foram clicados anteriormente, entre outros. (fonte Wikipédia)

Nem todo rastreamento é ruim

Muitos serviços dependem dos dados dos usuários, para que forneçam conteúdos relevantes para uma melhora experiência de navegação. Mas o rastreamento pode acontecer sem o conhecimento do usuário. Isso não é bom para alguns. Você é quem deve decidir quando, como e se os seus dados de navegação devem ser compartilhados.

Como o Lightbeam funciona

O Lightbeam visualiza as relações entre os sites que visita e sites de terceiros que estão ativamente nessas páginas.

Usando duas representações gráficas interativas distintas - Gráfico e Lista - o Lightbeam permite que você investigue os terceiros individualmente, identificando onde eles se conectam nas suas atividades online, fornecendo caminhos para você.

Instalando o Lightbeam

Acesse o link: https://www.mozilla.org/pt-BR/lightbeam/

Clique no botão [Baixe o Lightbeam para o Firefox].

Veja quem está observando você - Lightbeam extensão do Firefox - Visual Dicas

Clique no botão [+ Adcionar ao Firefox].

Veja quem está observando você - Lightbeam extensão do Firefox - Visual Dicas

Clique em [Instalar].

Veja quem está observando você - Lightbeam extensão do Firefox - Visual Dicas

E [Reiniciar agora] para reiniciar o Firefox.

Veja quem está observando você - Lightbeam extensão do Firefox - Visual Dicas

Após reiniciar o navegador, observe que aparece o ícone do Lightbeam.

Veja quem está observando você - Lightbeam extensão do Firefox - Visual Dicas

Clique no ícone Lightbeam para abrir o painel de visualização.

Veja quem está observando você - Lightbeam extensão do Firefox - Visual Dicas

De acordo com suas navegações no Firefox, irá sendo montado o banco de dados do Lightbeam. A extensão coleta informações sobre os sites visitados, construindo um mapa completo sobre as relações entre os serviços e os servidores.

O dados podem ser vistos na forma de gráfico, onde você poderá analisar em tempo real todos os serviços de terceiros, como opções de compartilhamento em redes sociais, propaganda, etc. e customizações que estão rastreando o seu histórico de navegação com diferentes objetivos  de serviços ou publicidade.

Veja quem está observando você - Lightbeam extensão do Firefox - Visual Dicas

Estes dados também podem ser visualizados no momento em que forem acessados em forma de lista, que permite encontrar os serviços, redes sociais e publicidade de forma mais rápida.

Veja quem está observando você - Lightbeam extensão do Firefox - Visual Dicas

Tudo que for coletado pelo Lightbeam ficará armazenado apenas no computador do usuário e poderá ser compartilhado apenas se você desejar.

Para salvar apenas uma determinada pesquisa de dados,  clique no botão [Save Data].

Veja quem está observando você - Lightbeam extensão do Firefox - Visual Dicas

Na filtro, você poderá visualizar o último site acessado (Recent Site), os últimos 10 sites (Last 10 Sites), diário (Daily) para ver os acessos do dia ou para ver acessos da semana (Weekly).

Veja quem está observando você - Lightbeam extensão do Firefox - Visual Dicas

Para reiniciar a coleta dos dados, clique me [Reset Data].

Veja quem está observando você - Lightbeam extensão do Firefox - Visual DicasVeja quem está observando você - Lightbeam extensão do Firefox - Visual Dicas

Bem, parece um pouco difícil a utilização deste recurso do Firefox, entretanto, com o tempo, você irá entender melhor sua aplicação e as informações que são coletadas. Esta extensão vai ajudar muito você a conhecer as relações entre os sites visitados, sites de terceiros  e o seu navegador.

E se você possui um blog ou site, o Lightbeam mostrará todas as relações entre o seu site e links de publicidade, redes sociais, sites de terceiros ou até links bloqueados, se houver. Você então poderá decidir o quais links deverá manter no site. Vale a pena conhecer esta extensão do Firefox.

Excluindo o Lightbeam

Para deletar a extensão do Firefox, clique no link [Unistall Lightbeam] que aparece no menu lateral.

Veja quem está observando você - Lightbeam extensão do Firefox - Visual Dicas

Para saber mais sobre o Lightbeam, acesse o endereço: https://www.mozilla.org/pt-BR/lightbeam/about/

byALF

08/09/16

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

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

30/08/16

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

Í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

    Gostou do Post? Então espalhe!

    Quem está curtindo...

    Encontre no blog...

    Gostou? Então espalhe!

    Twitter Delicious Facebook Digg Stumbleupon Favorites More