Fondation Icône
Fondation offre 283 icônes, vous pouvez définir la taille de son style en utilisant css.
Les icônes peuvent être utilisés pour le texte, les boutons, les barres d'outils, la navigation, les formes, et ainsi de suite.
Les exemples de la Fondation des icônes sont les suivantes:
Bouton Actualiser:
icône de détection:
Accueil icon:
Syntaxe icon
Créer syntaxe d'icônes est la suivante:
<i class="fi-name"></i>
Remplacer le nom de l' icône dans le nom.
Pour utiliser une icône nous avons besoin de la section <head> pour ajouter le fichier icône de style:
<link rel="stylesheet" href="http://static.w3big.com/assets/foundation-icons/foundation-icons.css">
Icône Exemples
Les exemples suivants illustrent l'utilisation d'icônes:
Exemples
<P> icône Cloud comme un lien :
<A Href = "#"> <i class = "fi-cloud"> </ i> </ a>
</ P>
icône <P> Styled Cloud: < i class = "fi-cloud" style = "font-size: 35px; color: red;"> </ i> </ p>
<P> Accueil icon: <i class = "fi-home"> </ i> </ p>
<P> Accueil icône sur un bouton :
<Type Bouton = "button" classe "bouton" =>
<Classe I = "fi-home "> </ i> Accueil
</ Button>
</ P>
<P> Accueil icon sur un green bouton:
<Type Bouton = "button" class = "succès bouton">
<Classe I = "fi-home "> </ i> Accueil
</ Button>
</ P>
<P> Accueil icône sur un grand bouton de lien, bleu clair:
<A Href = "#" class = information "button large">
<Classe I = "fi-home "> </ i> Accueil
</ A>
</ P>
Essayez »
icônes barre d'outils
Nous pouvons utiliser .icon-bar classe pour créer un certain nombre d'icônes de la barre d' outils:
Exemples
<A Href = "#" class = "item">
<Classe I = "fi-home "> </ i>
</ A>
<A Href = "#" class = "item">
<I class = "fi-bookmark "> </ i>
</ A>
<A Href = "#" class = "item">
<I class = "fi-info "> </ i>
</ A>
<A Href = "#" class = "item">
<I class = "fi-mail "> </ i>
</ A>
<A Href = "#" class = "item">
<Classe I = "fi-like "> </ i>
</ A>
</ Div>
Essayez »
Icône Description Utilisation <label> élément:
Exemples
<A Href = "#" class = "item">
<Classe I = "fi-home "> </ i>
<Label> Accueil </ label>
</ A>
<A Href = "#" class = "item">
<I class = "fi-share "> </ i>
<Label> Partager </ label>
</ A>
<A Href = "#" class = "item">
<I class = "fi-info "> </ i>
<Label> Infos </ label>
</ A>
<A Href = "#" class = "item">
<I class = "fi-mail "> </ i>
<Label> Courrier </ label>
</ A>
<A Href = "#" class = "item">
<I class = "fi-grossissante -GLASS"> </ i>
<Label> Rechercher </ label>
</ A>
</ Div>
.disabled classe laisse devient pas cliquable statut d'icône:
Exemples
<I class = "fi-share "> </ i>
</ A>
<A Href = "#" class = "item disabled">
<I class = "fi-mail "> </ i>
</ A>
Essayez »
.vertical classe est utilisée pour créer une barre d' outils verticale:
Manuel Fondation Icône de référence
En savoir plus sur le contenu de l'icône, vous pouvez vous référer à notre manuel Fondation icône.