Fonte awesome
Muitos de vocês ja devem ter ouvido falar da fonte awesome, outros não. Para quem não sabe trata-se de uma fonte que reúne centenas de ícones em uma única fonte, que é de fácil uso e mais fácil ainda de instalar.
Instalação
Acesse o site http://fortawesome.github.io/Font-Awesome e baixe a fonte disponibilizada ali, e hospede ela no seu servidor favorito. Para quem não tiver ou não souber como fazer de graça é possível usar a CDN deles.
Ao baixar o arquivo CSS basta adicionar ele ao seu documento com o código abaixo:
Caso vá usar a CDN fica mais fácil ainda, é só colar isso no head do seu documento
Pronto, já está instalada e pronta para uso!
Métodos de uso
Você pode usar as fontes dentro de elementos HTML ou manipulando o CSS, veja exemplos:
Primeiro escolha um ícone aqui
http://fortawesome.github.io/Font-Awesome/icons
Agora vamos adicionar um ícone dentro de um botão, veja:
Isso cria um botão com um ícone da Apple a esquerda do nome "Apple", para criar do lado direito basta inverter o "i"
Exemplo de como usar manipulando CSS
Digamos que você tenha esse elemento
E quer adicionar seu ícone antes do nome da Apple, você precisa usar os métodos before ou after do CSS, veja como:
Aqui você encontra uma lista completa dos códigos usado no CSS (content)
http://astronautweb.co/snippet/font-awesome
No site deles você encontrar várias e várias formas de manipular e estilizar os ícones (é possível até fazer ele ficarem rotacionando apenas com CSS), são muitas possibilidades vale a pena conferir
http://fortawesome.github.io/Font-Awesome/examples/
Veja um live view de nossos exemplos:
http://jsfiddle.net/Wagner/9ksJ7/embedded/result/
A vantagem de usar é que você não necessita de imagens, é tudo feito com uma fonte
Espero que gostem! E até breve...
Muitos de vocês ja devem ter ouvido falar da fonte awesome, outros não. Para quem não sabe trata-se de uma fonte que reúne centenas de ícones em uma única fonte, que é de fácil uso e mais fácil ainda de instalar.
Instalação
Acesse o site http://fortawesome.github.io/Font-Awesome e baixe a fonte disponibilizada ali, e hospede ela no seu servidor favorito. Para quem não tiver ou não souber como fazer de graça é possível usar a CDN deles.
Ao baixar o arquivo CSS basta adicionar ele ao seu documento com o código abaixo:
- Código:
<link href="LINK ONDE VOCÊ HOSPEDOU" rel="stylesheet">
Caso vá usar a CDN fica mais fácil ainda, é só colar isso no head do seu documento
- Código:
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
Pronto, já está instalada e pronta para uso!
Métodos de uso
Você pode usar as fontes dentro de elementos HTML ou manipulando o CSS, veja exemplos:
Primeiro escolha um ícone aqui
http://fortawesome.github.io/Font-Awesome/icons
Agora vamos adicionar um ícone dentro de um botão, veja:
- Código:
<button>
<i class="fa fa-apple"></i> Apple
</button>
Isso cria um botão com um ícone da Apple a esquerda do nome "Apple", para criar do lado direito basta inverter o "i"
Exemplo de como usar manipulando CSS
Digamos que você tenha esse elemento
- Código:
<span class="apple"></span>
E quer adicionar seu ícone antes do nome da Apple, você precisa usar os métodos before ou after do CSS, veja como:
- Código:
.apple:before{
content:"\f179";
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-decoration: inherit;
}
Aqui você encontra uma lista completa dos códigos usado no CSS (content)
http://astronautweb.co/snippet/font-awesome
No site deles você encontrar várias e várias formas de manipular e estilizar os ícones (é possível até fazer ele ficarem rotacionando apenas com CSS), são muitas possibilidades vale a pena conferir
http://fortawesome.github.io/Font-Awesome/examples/
Veja um live view de nossos exemplos:
http://jsfiddle.net/Wagner/9ksJ7/embedded/result/
A vantagem de usar é que você não necessita de imagens, é tudo feito com uma fonte
Espero que gostem! E até breve...