Stiftung Icon
Stiftung bietet 283 Icons, können Sie die Größe seines Stils mit CSS definieren.
Icons können Sie für Text, Schaltflächen, Symbolleisten, Navigation, Formulare und so weiter verwendet werden.
Im Folgenden sind Beispiele von Icons Foundation:
Aktualisieren-Taste:
Erkennungssymbol:
Home-Symbol:
Syntax-Symbol
Erstellen Sie Symbole Syntax lautet wie folgt:
<i class="fi-name"></i>
Ersetzen Symbol Name Teil des Namens.
Um ein Symbol verwenden wir den <head> benötigen Abschnitt das Symbol Stil-Datei hinzufügen:
<link rel="stylesheet" href="http://static.w3big.com/assets/foundation-icons/foundation-icons.css">
Icon-Beispiele
Die folgenden Beispiele demonstrieren die Verwendung der Symbole:
Beispiele
<P> Cloud - Symbol als Link :
<A Href = "#"> <i class = "fi-Wolke"> </ i> </ a>
</ P>
<P> Styled Wolkensymbol: < i class = "fi-Wolke" style = "font-size: 35px; color: red;"> </ i> </ p>
<P> Home - Symbol: <i class = "fi-home"> </ i> </ p>
<P> Home - Symbol auf einer Taste :
<Taste type = "button" class = "button">
<I class = "fi-home "> </ i> Startseite
</ Button>
</ P>
<P> Home - Symbol auf einem grünen Knopf:
<Taste type = "button" class = "button Erfolg">
<I class = "fi-home "> </ i> Startseite
</ Button>
</ P>
<P> Home - Symbol auf einem großen , hellblauen Link - Button:
<A Href = "#" class = "button info large">
<I class = "fi-home "> </ i> Startseite
</ A>
</ P>
Versuchen »
Toolbar-Icons
Wir können verwenden .icon-bar - Klasse eine bestimmte Anzahl von Toolbar - Icons zu erstellen:
Beispiele
<A Href = "#" class = "item">
<I class = "fi-home "> </ i>
</ A>
<A Href = "#" class = "item">
<I class = "fi-Lesezeichen "> </ 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">
<I class = "fi-like "> </ i>
</ A>
</ Div>
Versuchen »
Symbol Beschreibung Verwenden <label> Element:
Beispiele
<A Href = "#" class = "item">
<I class = "fi-home "> </ i>
<Label> Home </ label>
</ A>
<A Href = "#" class = "item">
<I class = "fi-share "> </ i>
<Label> Teilen </ label>
</ A>
<A Href = "#" class = "item">
<I class = "fi-Info "> </ i>
<Label> Info </ label>
</ A>
<A Href = "#" class = "item">
<I class = "fi-Mail "> </ i>
<Label> E - Mail </ label>
</ A>
<A Href = "#" class = "item">
<I class = "fi-Vergrößerungs -Glas"> </ i>
<Label> Suchen </ label>
</ A>
</ Div>
.disabled Klasse können nicht angeklickt werden Status - Symbol geworden:
Beispiele
<I class = "fi-share "> </ i>
</ A>
<A Href = "#" class = "item disabled">
<I class = "fi-Mail "> </ i>
</ A>
Versuchen »
.vertical Klasse wird verwendet , um eine vertikale Symbolleiste zu erstellen:
Stiftung Icon-Referenzhandbuch
Mehr über den Inhalt des Symbols können Sie auf unsere verweisen Foundation Symbol Handbuch.