Le meilleur didacticiel Fondation Icône en 2024, dans ce didacticiel, vous pouvez apprendre
Syntaxe icon,Icône Exemples,icônes barre d'outils,Manuel Fondation Icône de référence,
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.w3write.com/assets/foundation-icons/foundation-icons.css">
Icône Exemples
Les exemples suivants illustrent l'utilisation d'icônes:
Exemples
<P> icône Cloud: <i class = "fi-cloud"> </ i> </ p>
<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
<Div class = "icon-bar cinq-up">
<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
<Div class = "icon-bar cinq-up">
<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>
Essayez » .disabled
classe laisse devient pas cliquable statut d'icône:
Exemples
<A Href = "#" class = "item disabled">
<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:
Exemples
<Class = "icon-bar Div vertical cinq-up">
frfr
</ Div>
Essayez »
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.