Как настроить значки 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>

Ответы

Ответ 1

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

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

Кроме того, их CSS файл не включает размеры. Поэтому, когда вы используете свои примеры для изменения размера (например, ), ничего не изменится. При просмотре файла 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

Правильный способ  вместо 