Foundation icon: Foundation Icon Fonts | Playground from ZURB

css — Как настроить иконки Zurb Foundation?

спросил 8 лет, 9 месяцев назад

Изменено 6 лет, 7 месяцев назад

Просмотрено 26 тысяч раз

Я загрузил файлы шрифтов значков Zurb Foundation http://zurb.com/playground/foundation-icon-fonts-3

Я разархивировал их и поместил папку /foundation-icons в свою папку /css. Это правильно? Я пытаюсь следовать разделу документации «Как их использовать» и не могу понять, как начать использовать классы.

Я делаю это в своем .html для вызова классов.

 Фейсбук
 

, поэтому я предполагаю, что должен неправильно настроить/настроить свой файловый шрифт.

Обновление : так выглядит мой каталог… я ссылаюсь на него
, и вот как я вызываю класс.

  Фейсбук
<я>
 

• css
• иконки
• zurb-foundation
• css-фреймворки

2

Иконки Foundation используют теги . Таким образом, у вас будет что-то вроде Facebook .

В архиве, который вы скачали, есть файл preview.html. Откройте его в редакторе и просмотрите. Это будет иметь немного больше смысла.

Кроме того, их файл CSS не включает размеры. Поэтому, когда вы используете их примеры для изменения размера (например, ), ничего не изменится. При просмотре их файла preview.html эти размеры были указаны в заголовке. Поэтому я скопировал их, поместил в свой CSS и решил проблему. Вот они, если вы хотите их использовать:

 .size-12 { font-size: 12px; }
.size-14 {размер шрифта: 14px; }
.size-16 {размер шрифта: 16px; }
. size-18 {размер шрифта: 18px; }
.size-21 {размер шрифта: 21px; }
.size-24 {размер шрифта: 24px; }
.size-36 {размер шрифта: 36px; }
.size-48 {размер шрифта: 48px; }
.size-60 {размер шрифта: 60px; }
.size-72 {размер шрифта: 72px; }
 

0

После того, как вы загрузили пакет, вы должны добавить в свой