Подтвердить что ты не робот

Как настроить значки Zurb Foundation?

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

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

Я делаю это в своем .html, чтобы вызвать классы.

<a class=".fi-social-facebook">Facebook</a>

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

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

<i class="ft-social-facebook"></i><a href="#">Facebook</a>
<i class="ft-star"></i>

Snapshot

4b9b3361

ОТВЕТЫ

Ответ 1

Значки Foundation используют теги <i>. Таким образом, у вас будет что-то вроде <i class="fi-social-facebook"></i><a href="http://facebook.com">Facebook</a>.

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

Кроме того, их CSS файл не включает размеры. Поэтому, когда вы используете свои примеры для изменения размера (например, <i class="fi-calendar size-24"></i>), ничего не изменится. При просмотре файла preview.html у них были такие размеры, определенные в заголовке. Поэтому я скопировал их и поместил в мой CSS и решил проблему. Вот они, если вы хотите их использовать:

.size-12 { font-size: 12px; }
.size-14 { font-size: 14px; }
.size-16 { font-size: 16px; }
.size-18 { font-size: 18px; }
.size-21 { font-size: 21px; }
.size-24 { font-size: 24px; }
.size-36 { font-size: 36px; }
.size-48 { font-size: 48px; }
.size-60 { font-size: 60px; }
.size-72 { font-size: 72px; }

Ответ 2

Как только вы загрузили пакет, вы должны добавить его в <head>:

 <link rel="stylesheet" href="css/foundation-icons.css" />

И убедитесь, что папка svgs внутри вашей папки css и остальные файлы внутри вашей папки css тоже.

Когда вы закончите эту настройку, попробуйте это на своем html:

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

Он должен напечатать звезду.

Самое быстрое решение, не требуется установка:

<link rel="stylesheet" 
      href="//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css"/>

Другие версии доступны на https://cdnjs.com/libraries/foundicons

Ответ 3

Я установил через pip install django-zurb-foundation и работал с той же проблемой …/foundation/icons, но я не мог ссылаться на них в моем фактическом проекте. Что заработало для меня, добавляет следующее к моему проекту base.html

{% load foundation_tags %}

{% block css %}
{% foundation_css 'foundation-icons' %}
{% endblock css %}

Это фактически то же самое, что и ManelMusti, но обрабатывается в шаблоне, используя тот же метод, что и пример в …/site_packages/foundation/templates/foundation/icons.html

Ответ 4

Правильный способ <i class="fi-star"></i> вместо <i class="ft-star"></i>