Как работают глификоны? Как я могу сделать свой собственный?

Question

У меня есть серия изображений AI/SVG, которые я подготовил, поэтому я могу использовать их в библиотеке шрифтов значков, таких как Glyphicons. Я просматривал разные должности и так, но не нашел много полезного.

Одна рекомендация использовала GlyphAPP, но это только Mac, и у меня нет доступа к Mac. Еще один был FontForge, который несколько раз падал на меня.

Так что в настоящее время мне не хватает хорошего инструмента для создания файла шрифта из моих SVG. Но даже оттуда, как Glyphicon позволяет своим значкам работать через простой тег <span> с классом?

Я использую его через Bootstrap3, и проверка ресурсов приводит меня к этому http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/fonts/glyphicons-halflings-regular.woff. Что выглядит как обычный файл шрифт, ABC .. а .. 123 ..

Каких шагов и инструменты мне нужно сделать для того, чтобы перейти от AI или SVG файлов, используя мои иконки как я бы Glyphicons?

Я не против платных инструментов, ведь если в Adobe Creative Cloud есть что-то прямое, что я как-то не хватает, я бы хотел, чтобы это было решением.

Answer 1

Идея заключается в том, что вы создаете webfont, который содержит различные векторизованные графики, используемые на сайте, для сокращения количества HTTP-запросов. Иногда они встраиваются в шрифт, который также содержит общие буквы ASCII.

Вы можете разместить глифы, используя простые старые шрифтовые директивы CSS, часто в сочетании с ::before и ::after атрибутами psuedo.

Dafont.com имеет довольно приличную запись available tools.