Как добавить октиконы как шрифт, похожий на атом - PullRequest
Новая
       23

Как добавить октиконы как шрифт, похожий на атом

2 голосов
/ 20 апреля 2019

Как добавить октектоны в качестве шрифта, аналогично тому, как это сделал атом?

Во время проверки кодовой базы атома я обнаружил, что они используют иконку с символом octicon, установленную в качестве шрифта (font-family: 'Octicons Regular' & content: "\f0a4"). Как бы я реализовал набор таким образом, чтобы мой собственный проект? Есть публичный релиз?

Следующая картинка - скриншот атома src, показывающий стили. (Ctrl + Shift + I)

enter image description here

1 Ответ

1 голос
/ 16 июля 2019

Нет доступных CDN для Octicons Regular , поэтому вы должны получить свой собственный WebFontkit. Затем вы должны добавить шрифты, используя параметр @font-face.

Выполните следующие шаги для добавления пользовательских шрифтов в ваш HTML: -

1. Загрузите шрифт Octicons: - Стандартные шрифты Octicons доступны по этой ссылке . Загрузите формат файла шрифта TrueType (.ttf).

2. Создайте WebFont Kit: - Загрузите загруженный файл (.ttf) в WebFontkit Generator. . Тогда скачайте оптимальный WebFontkit.

3. Извлеките и загрузите файлы шрифтов на ваш размещенный сайт: - Отредактируйте файл stylesheet.css , чтобы обновить URL. Например, если у вас есть как URL, www.example.com. Таким образом, ваш файл .css после обновления будет выглядеть так: - 

@font-face {
font-family: "Octicons";
src: url("https://example.com/css/fonts/Octicons.woff") format("woff"),
url("https://example.com/css/fonts/Octicons.woff2") format("woff2")
}

4. Используйте шрифт Octicons в своих объявлениях CSS: - Поскольку вы добавили шрифты CSS на свой сайт, вы можете использовать это в своих объявлениях CSS. Например, 

p {
font-family: Opticons;
font-weight:normal;
font-style:normal;
}
...