Добавление пользовательских значков в шрифт awesome

Ответ 1

Дайте Icomoon. Вы можете загрузить свои собственные SVG, добавить их в библиотеку, а затем создать собственный шрифт, сочетающий FontAwesome со своими значками.

Ответ 2

Вы можете дать fontcustom a go, он создает свой собственный шрифт из svg файлов.

Ответ 3

Зависит от того, что у вас есть. Если ваш значок svg - это просто путь, то достаточно просто добавить этот глиф, просто скопировав атрибут 'd' на новый элемент glyph > . Однако путь нужно масштабировать до системы координат шрифта (EM-квадрат, который обычно является [0,0,2048,2048] - стандартом для шрифтов Truetype) и выравнивается с базовым уровнем, который вы хотите.

Не все браузеры поддерживают svg-шрифты, поэтому вам придется конвертировать его в другие форматы, если вы хотите, чтобы он работал везде.

Fontforge может импортировать файлы svg (выберите слот глифа, Файл > Импорт, а затем выберите изображение svg), и тогда вы можете конвертировать во все соответствующие форматы шрифтов (svg, truetype, woff и т.д.).

Ответ 4

Я предлагаю держать ваши иконки отдельно от FontAwesome и создавать и поддерживать свою собственную пользовательскую библиотеку. Лично я думаю, что гораздо проще поддерживать разделение FontAwesome отдельно, если вы собираетесь создавать свою собственную библиотеку иконок. Затем вы можете загрузить FontAwesome на свой сайт с CDN, и вам никогда не придется беспокоиться о его актуальности.

При создании собственных пользовательских значков создайте каждый значок с помощью Adobe Illustrator или аналогичного программного обеспечения. После того, как ваши иконки созданы, сохраните каждый в формате SVG на вашем компьютере.

Затем перейдите к IcoMoon: http://icomoon.io, который имеет лучшее (на мой взгляд) программное обеспечение для генерации шрифтов и бесплатное. IcoMoon позволит вам импортировать ваши отдельные сохраненные SVG шрифты в библиотеку шрифтов, а затем сгенерировать свою собственную библиотеку глифов значков в eot, ttf, woff и svg. Один формат , который IcoMoon не генерирует, это woff2.

После создания пакета значков в IcoMoon перейдите к FontSquirrel: http://fontsquirrel.com и используйте их генератор шрифтов. Используйте ваш файл ttf, сгенерированный в IcoMoon. В созданном недавно сгенерированном пакете значков у вас будет пакет значков в формате woff2.

Убедитесь, что файлы для eot, ttf, svg, woff и woff2 имеют одинаковые имена. Вы генерируете пакет значков из двух разных веб-сайтов/программного обеспечения, и они по-разному называют сгенерированный вывод.

У вас будет сгенерированный CSS для вашего пакета иконок в обоих местах. Но CSS, сгенерированный в IcoMoon, не будет включать формат woff2 в вашу декларацию @font-face {}. Убедитесь, что добавили это, когда добавляете свой CSS в свой проект:

@font-face {
    font-family: 'customiconpackname';
    src: url('../fonts/customiconpack.eot?lchn8y');
    src: url('../fonts/customiconpack.eot?lchn8y#iefix') format('embedded-opentype'),
         url('../fonts/customiconpack.ttf?lchn8y') format('truetype'),
         url('../fonts/customiconpack.woff2?lchn8y') format('woff'),
         url('../fonts/customiconpack.woff?lchn8y') format('woff'),
         url('../fonts/customiconpack.svg?lchn8y#customiconpack') format('svg');
    font-weight: normal;
    font-style: normal;
}

Имейте в виду, что вы можете получить значения символов Unicode для каждого значка в вашем пакете значков с помощью программного обеспечения IcoMoon. Эти значения могут быть полезны при назначении ваших значков с помощью CSS, например (если мы используем font-family, объявленный в примере @font-face {...} выше):

selector:after {
    font-family: 'customiconpackname';
    content: '\e953';
    }

Вы также можете получить значение Юникода глифа e953, если откроете файл svg, созданный font-pack в текстовом редакторе. E.g.:

<glyph unicode="&#xe953;" glyph-name="eye" ... />

Ответ 5

Аналогичный подход к @Samuel-bergström:

• Загрузить Fontawesome SVG https://github.com/FortAwesome/Font-Awesome/blob/master/src/assets/font-awesome/fonts/fontawesome-webfont.svg
• Загрузить FontForge http://fontforge.github.io/en-US/downloads/
• Загрузить Inkscape
• Откройте Inskscape и создайте форму одного слоя в качестве нового значка шрифта
• Сохранить SVG файл, закрыть Inkscape
• Откройте FontForge (если у вас несколько мониторов, используйте Windows-LeftArrow, чтобы переместить, поскольку у них есть странные SWOW-окна java, которые уходят с монитора, и имеют модальные проблемы со всплывающими окнами - мне нужно было проверить панель задач для некоторых)
• Файл | Открыть файл fontawesome-webfont.svg
• Файл | Импорт
• Прокрутите вниз, щелкните правой кнопкой мыши по значку | Информация о глифе.
• Обновить имя Glyph для uniFXXX (XXX - это что-то вроде 501, более высокое число, чем самый высокий Unicode, используемый в v4.5 FontAwesome)
• Unicode Vlaue U + fXXX
• Нажмите "ОК"
• Файл | Сохранить
• Файл | Создание шрифтов...
• Закрыть FontForge
• Откройте веб-проект
• Скопируйте файлы шрифтов в папку (в моем проекте) "\ Content\fonts \".
• Изменить "\ Content\styles\fa\path.less" как:

@font-face {
      font-family: 'FontAwesome';
      //src: url('@{fa-font-path}/[email protected]{fa-version}');
      src: 
    	//url('@{fa-font-path}/fontawesome-webfont.eot?#iefix&[email protected]{fa-version}') format('embedded-opentype'),
        //url('@{fa-font-path}/[email protected]{fa-version}') format('woff2'),
        url('@{fa-font-path}/[email protected]{fa-version}') format('woff'),
        url('@{fa-font-path}/[email protected]{fa-version}') format('truetype'),
        url('@{fa-font-path}/[email protected]{fa-version}#fontawesomeregular') format('svg');
    //  src: url('@{fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts
      font-weight: normal;
      font-style: normal;
    }

Ответ 6

В Font Awesome 5 вы можете создавать собственные значки с собственными данными SVG. Вот демо-репозиторий GitHub, с которым вы можете играть. И здесь CodePen, который показывает, как нечто подобное можно сделать в блоках <script>.

В любом случае это просто включает использование library.add() для добавления объекта, подобного этому:

export const faSomeObjectName = {
  // Use a prefix like 'fac' that does not conflict with a prefix in the standard Font Awesome styles
  // (So avoid fab, fal, fas, far, fa)
  prefix: string,
  iconName: string, // Any name you like
  icon: [
    number, // width
    number, // height
    string[], // ligatures
    string, // unicode (if relevant)
    string // svg path data
  ]
}

Обратите внимание, что элемент, помеченный комментарием "данные пути svg" в примере кода, - это то, что будет назначено в качестве значения атрибута d для элемента <path>, который является дочерним по отношению к <svg>. Вот так (опуская некоторые детали для ясности):

<svg>
  <path d=SVG_PATH_DATA></path>
</svg>

(адаптировано из моего аналогичного ответа здесь: fooobar.com/questions/15682072/...)

Ответ 7

Я немного исследовал веб-сайты SVG и создание шрифтов, на мой взгляд, если вы хотите "добавить" шрифты к шрифту, который уже существует, вам нужно сделать следующее:

перейдите в inkscape и создайте глиф, сохраните его как SVG, чтобы вы могли прочитать код, не забудьте присвоить ему символ Юникода, который в настоящее время не используется, чтобы он не противоречил ни одному из существующих глифов шрифта. это может быть трудно, поэтому я думаю, что более простой подход будет заменять существующий глиф своим собственным (просто выберите тот, который вы не используете, скопируйте первую часть:

Сохраните svg, затем преобразуйте его в веб-шрифт с помощью любого онлайн-конвертера, чтобы ваш веб-сайт работал во всех браузерах.

как только это будет сделано, у вас должен быть SVG с одним из глифов, замененных в этом случае. если вам не нужно создавать CSS для вашего нового глифа, в этом случае попробуйте повторно использовать существующие существующие CSS файлы и добавьте только

>##CSS##
>.FA.NEW-GLYPH:after {
>content:'WHATEVER AVAILABLE UNICODE CHARACTER YOU FOUND'
>(other conditions should be copied from other fonts)
>}

Ответ 8

Если вы хотите, чтобы некоторые значки (или все) от шрифтов были удивительными, включая пользовательские значки svg, вы можете:

1- Перейдите к http://fontawesome.io/ Загрузите zip и извлеките его, например, на рабочем столе.

2- Перейдите к http://fontastic.me/ используйте свой адрес электронной почты для создания учетной записи.

3. После того, как вы вошли в систему, нажмите на заголовок: Добавить дополнительные значки.

4- Выберите SVG шрифта-awesome, расположенный в извлеченных ZIP файлах внутри шрифтов.

5- Повторяйте, чтобы procces загружал ваши собственные файлы svg.

6- Inside Home (в заголовке страницы) Выберите значки, которые вы хотите загрузить, настройте их, чтобы указать свои собственные имена и выберите публикацию, чтобы иметь ссылку или загружать шрифты и css.

Извини за мой английский!: D

Ответ 9

Перейдите в fontawesome.com и выберите нужный пакет лицензий внизу.