Como usar fonte awesome
3 participantes
Página 1 de 1
Como usar fonte awesome
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...
Re: Como usar fonte awesome
Muito interessante isso, mas os ícones que aparecem dentro do "content" fazem parte desse arquivo?
JS
JS
Re: Como usar fonte awesome
muito massa não sabia dessa, e mais uma alternativa disponível.
joelson0007- Moderadores
- Time Online : 28d 21h 58m 5s
Mensagens : 373
Data de inscrição : 15/06/2013
Localização : Guarapuava-PR
Tópicos semelhantes
» Use url de um campo de perfil para usar como pano de fundo.
» Usar o campo de descrição para funcionar como imagem (PunBB & phpBB2)
» Qual usar - .click() ou .on()
» Usar o campo de descrição para funcionar como imagem (PunBB & phpBB2)
» Qual usar - .click() ou .on()
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos
|
|