Фонд Icon
Фонд предоставляет 283 иконок, вы можете определить размер своего стиля с помощью CSS.
Иконки могут быть использованы для текста, кнопок, панелей инструментов, навигации, формы, и так далее.
Ниже приведены примеры фонда иконки:
Кнопка Обновить:
Значок обнаружения:
Главная иконка:
значок Синтаксис
Создание синтаксиса иконки выглядит следующим образом:
<i class="fi-name"></i>
Заменить имя иконки часть имени.
Чтобы использовать значок нам понадобится <голову> раздел, чтобы добавить файл значок стиля:
<link rel="stylesheet" href="http://static.w3big.com/assets/foundation-icons/foundation-icons.css">
Иконка Примеры
Следующие примеры демонстрируют использование пиктограмм:
примеров
<P> значок Облако в качестве ссылки :
<A HREF = "#"> <I класс = "фи-облако"> </ I> </ а>
</ P>
значок <P> стилизации Облако: < я класс = "фи-облако" стиль = "размер шрифта: 35px; цвет: красный;"> </ I> </ p>
<P> Главная значок: <I класс = "фи-дом"> </ I> </ p>
<P> значок Home на кнопку :
<Тип Button = "кнопка" класс "кнопка" =>
<Класс I = "фи-домашний "> </ I> Главная
</ Button>
</ P>
<P> значок Home на зеленой кнопке:
<Тип Button = "кнопка" класс = "Кнопка успеха">
<Класс I = "фи-домашний "> </ I> Главная
</ Button>
</ P>
<P> значок Home на большой , кнопки светло - голубой ссылка:
<A HREF = "#" класс = "button Информация о large">
<Класс I = "фи-домашний "> </ I> Главная
</ A>
</ P>
Попробуйте »
значки панели инструментов
Мы можем использовать .icon-bar класса , чтобы создать определенное количество значков на панели инструментов:
примеров
<A HREF = "#" класс = "item">
<I класс = "фи-домашний "> </ I>
</ A>
<A HREF = "#" класс = "item">
<I класс = "фи-закладка "> </ I>
</ A>
<A HREF = "#" класс = "item">
<I класс = "фи-инфо "> </ I>
</ A>
<A HREF = "#" класс = "item">
<I класс = "фи-почта "> </ I>
</ A>
<A HREF = "#" класс = "item">
<Класс I = "фи-подобный "> </ I>
</ A>
</ Div>
Попробуйте »
Значок Описание Используйте <label> элемент:
примеров
<A HREF = "#" класс = "item">
<I класс = "фи-домашний "> </ I>
<Label> Главная </ метка>
</ A>
<A HREF = "#" класс = "item">
<I класс = "Фи-шер "> </ I>
<Label> Поделиться </ метка>
</ A>
<A HREF = "#" класс = "item">
<I класс = "фи-инфо "> </ I>
<Label> Информация </ метка>
</ A>
<A HREF = "#" класс = "item">
<I класс = "фи-почта "> </ I>
<Label> Почта </ метка>
</ A>
<A HREF = "#" класс = "item">
<I класс = "фи-увеличительного -стекло"> </ I>
<Label> Поиск </ метка>
</ A>
</ Div>
.disabled класс позволяет стать не кликабельна статус значок:
примеров
<I класс = "Фи-шер "> </ I>
</ A>
<A HREF = "#" класс = "item disabled">
<I класс = "фи-почта "> </ I>
</ A>
Попробуйте »
.vertical класс используется для создания вертикальной панели инструментов:
Фонд Icon Справочное руководство
Подробнее о содержании иконы, вы можете обратиться в наш значок Foundation руководства.