Fundação Ícone
Fundação oferece 283 ícones, você pode definir o tamanho de seu estilo usando css.
Os ícones podem ser usados para texto, botões, barras de ferramentas de navegação, formulários, e assim por diante.
Os seguintes são exemplos de ícones Fundação:
botão Atualizar:
ícone Detecção:
ícone Home:
ícone sintaxe
Criar sintaxe ícones é o seguinte:
<i class="fi-name"></i>
Substituir ícone do nome da parte do nome.
Para usar um ícone precisamos da seção <head> para adicionar o arquivo de ícone de estilo:
<link rel="stylesheet" href="http://static.w3big.com/assets/foundation-icons/foundation-icons.css">
ícone Exemplos
Os seguintes exemplos demonstram o uso de ícones:
Exemplos
<P> ícone da nuvem como um link :
<A Href = "#"> <i class = "fi-cloud"> </ i> </ a>
</ P>
ícone <P> Styled Cloud: < i class = "fi-cloud" style = "font-size: 35px; color: red;"> </ i> </ p>
<P> ícone Home: <i class = "fi-home"> </ i> </ p>
<P> ícone Home em um botão :
<Tipo botão = "button" class = "button">
<Classe I = "fi-home "> </ i> Home
</ Button>
</ P>
<P> ícone Home em um verde botão:
<Tipo botão = "button" class = "button sucesso">
<Classe I = "fi-home "> </ i> Home
</ Button>
</ P>
<P> ícone de Início em uma grande luz do botão link, azul:
<A Href = "#" class = Informação "button large">
<Classe I = "fi-home "> </ i> Home
</ A>
</ P>
tente »
ícones da barra de ferramentas
Podemos usar .icon-bar classe para criar um determinado número de ícones da barra de ferramentas:
Exemplos
<A Href = "#" class = "item">
<I class = "fi-home "> </ i>
</ A>
<A Href = "#" class = "item">
<I class = "fi-indicador "> </ i>
</ A>
<A Href = "#" class = "item">
<I class = "fi-info "> </ i>
</ A>
<A Href = "#" class = "item">
<Classe I = "fi-mail "> </ i>
</ A>
<A Href = "#" class = "item">
<Classe I = "fi-like "> </ i>
</ A>
</ Div>
tente »
Ícone Descrição Use <label> elemento:
Exemplos
<A Href = "#" class = "item">
<I class = "fi-home "> </ i>
<Label> Home </ label>
</ A>
<A Href = "#" class = "item">
<Classe I = "fi-share "> </ i>
<Label> Share </ label>
</ A>
<A Href = "#" class = "item">
<I class = "fi-info "> </ i>
<Label> Informações </ label>
</ A>
<A Href = "#" class = "item">
<Classe I = "fi-mail "> </ i>
<Label> E-mail </ label>
</ A>
<A Href = "#" class = "item">
<I class = "fi-ampliação -vidro"> </ i>
<Label> Pesquisa </ label>
</ A>
</ Div>
.disabled classe permite tornar-se não clicável status de ícone:
Exemplos
<Classe I = "fi-share "> </ i>
</ A>
<A Href = "#" class = "item disabled">
<Classe I = "fi-mail "> </ i>
</ A>
tente »
.vertical classe é usada para criar uma barra de ferramentas vertical:
Manual de Referência Fundação Ícone
Mais informações sobre o conteúdo do ícone, você pode consultar o nosso manual de ícone Foundation.