Fundacja Ikona

Poprzedni: Fundacja Group Button

Dalej: Fundacja Tagi

Fundacja zapewnia 283 ikon, można określić rozmiar jej styl za pomocą CSS.

Ikony mogą być stosowane do tekstu, przycisków, pasków narzędzi, nawigacji, form, i tak dalej.

Poniżej przedstawiono przykłady ikon założenia:

przycisk Odśwież:

ikona detekcji:

Ikona domu:

ikona Składnia

Tworzenie ikony składnia jest następująca:

<i class="fi-name"></i>

Wymień nazwy ikony część nazwy.

Aby skorzystać z ikony musimy sekcji <head>, aby dodać plik ikona stylu:

<link rel="stylesheet" href="http://static.w3big.com/assets/foundation-icons/foundation-icons.css">

Ikona Przykłady

Poniższe przykłady ilustrują użycie ikony:

Przykłady

<P> ikona h: <i class = "fi-cloud"> </ i> </ p>
<P> ikonę Chmura jako link :
<A Href = "#"> <i class = "fi-cloud"> </ i> </ a>
</ P>
ikona <P> tytułowałem h: < i class = "fi-cloud" style = "font-size: 35px; color: red;"> </ i> </ p>
<P> ikonę Start: <i class = "fi-home"> </ i> </ p>
<P> ikonę Start na przycisk :
<Button type = "button" klasy "Przycisk" =>
<Class I = "fi-home "> </ i> Strona główna
</ Button>
</ P>
<P> Ikona domu na zielonym przyciskiem:
<Button type = "button" class = "sukces przycisk">
<Class I = "fi-home "> </ i> Strona główna
</ Button>
</ P>
<P> Ikona domu na dużym , jasnym niebieskim przyciskiem link:
<A Href = "#" class = "button informacji large">
<Class I = "fi-home "> </ i> Strona główna
</ A>
</ P>

Spróbuj »

ikony paska narzędzi

Możemy użyć .icon-bar klasę aby utworzyć określoną liczbę ikonek:

Przykłady

Spróbuj »

Ikona Opis Zastosowanie <label> elementów:

Przykłady

<Div class = "icon bar pięć-up">
<A Href = "#" class = "item">
<I class = "fi-home "> </ i>
<Label> Start </ label>
</ A>
<A Href = "#" class = "item">
<I class = "fi-akcja "> </ i>
<Label> Podziel się </ label>
</ A>
<A Href = "#" class = "item">
<Class I = "fi-info "> </ i>
<Label> Informacje </ label>
</ A>
<A Href = "#" class = "item">
<I class = "fi-mail "> </ i>
<Label> Poczta </ label>
</ A>
<A Href = "#" class = "item">
<Class I = "fi-powiększające -glass"> </ i>
<Label> Szukaj </ label>
</ A>
</ Div>

Spróbuj »

.disabled klasy pozwala stać się nie klikać ikony stanu: