Zurb Foundation 4 Icon Fonts Setup

Question

надеюсь, что все идет хорошо.

Я в настоящее время строю прототип html/css для веб-сайта с использованием Zurb Foundation 4. В настоящее время я использую Sublime Text 3 и интернет-браузеры для его создания. Я очень заинтересован в использовании наборов значков Zurb Foundation, но в настоящее время я не могу их отобразить. Хотя у меня есть Scout для sass, я надеюсь, что просто продолжу использовать текстовый редактор и браузер для создания этого прототипа. Хотя мне удалось загрузить пакет значков с веб-сайта Zurb Foundation, я не понимаю, как структурировать эти файлы в моем текущем проекте. Мой проект в виде следующей структуры папок/файлов:

• CSS (содержит foundation.css, foundation.min.css, normalize.css)
• IMG (содержит .gitkeep)
• JS (содержит основание и Поставщик файлы) расслоения плотной
• index.html

икона Zurb Foundation поставляется с различными типами файлов, включая .css, .eot, .svg, .woff и других, в том числе папки под названием "SVGs", где они иконки шрифтов, похоже, размещены. Я попытался сделать следующее:

1. Плейс содержимое папки значок шрифта zurb фундаментной в CSS моего проекта
2. Linked фонд значок таблицы стилей на HTML странице
3. В HTML я напечатал " "для проверки значка

В то время как значок корпуса панели немного увеличился, значок не отображается. Можно ли использовать значки с запуском и компиляцией sass? Могу ли я просто сделать это html/css или мне нужен жемчуг и компас? Мне комфортно использовать значки шрифтов и реализации, но я просто не уверен, как его настроить.

Может ли кто-нибудь предложить структуру папок и простые инструкции, как правильно добавить файлы, включенные в пакет значков, в базовый проект zurb (такой базовый проект, который вы получаете при загрузке базы zurb со своего сайта)?

Заранее благодарю вас за помощь.

Answer 1

Мне удалось заставить значки работать. Я помещаю содержимое пакета значков в отдельную папку. На самом деле я не правильно настраивал значки. В то время как пример Zurb Foundation ссылался на значок примера в качестве общих параметров foundicon, значки svg имеют такие имена, как записи в виде буфера обмена или fi-календарь. Я добавил классы CSS в свою собственную таблицу стилей, чтобы я мог быстро настроить размер значка, используя элемент CSS-элемента font-size.

Спасибо!