Добавить пользовательские иконки для шрифта Awesome

138

Я люблю шрифт Font Awesome icon icon и хочу использовать его для большинства значков на моем сайте, но есть несколько пользовательских значков svg, которые мне понадобятся в дополнение к тому, что предлагается.

Я заметил, что .svg-версия Font Awesome состоит в основном из следующих <glyph />элементов:

...
<glyph unicode="&#xf0b2;" horiz-adv-x="1536" d="M0 80v477q0 51 24.5 61.5t59.5 -24.5l162 -162l340 338l-338 338l-164 -164q-35 -35 -59.5 -25.5t-24.5 60.5v477q0 31 23 57q27 23 57 23h477q51 0 61.5 -24.5t-24.5 -59.5l-160 -158l338 -338l332 334l-162 162q-35 35 -24.5 59.5t61.5 24.5h477q33 0 55 -23 q25 -25 25 -57v-477q0 -51 -24.5 -61.5t-59.5 24.5l-162 162l-334 -334l338 -336l158 160q35 35 59.5 24.5t24.5 -61.5v-477q0 -35 -25 -55q-23 -25 -55 -25h-477q-51 0 -61.5 24.5t24.5 59.5l166 166l-336 336l-340 -340l162 -162q35 -35 24.5 -59.5t-61.5 -24.5h-477 q-31 0 -55 25q-25 20 -25 55z" />
<glyph unicode="&#xf0c0;" horiz-adv-x="1880" d="M0 852v152q0 18 1 47.5t10 56.5t29.5 46.5t57.5 19.5q-45 29 -71.5 75.5t-26.5 104.5q0 43 16.5 82t46 68.5t68.5 46t82 16.5q45 0 84 -16.5t67.5 -46t46 -68.5t17.5 -82q0 -57 -27.5 -104t-72.5 -76q37 0 57.5 -19.5t29.5 -46.5t11 -56.5t2 -47.5v-152 q-14 -8 -23.5 -18.5t-27.5 -10.5h-328q-16 0 -26.5 10.5t-22.5 18.5zM158 57v387q0 78 45 138.5t98 109.5q10 10 25.5 21.5t33.5 15.5q18 6 41 7t45 5q61 10 130 19.5t135 19.5q-90 57 -144.5 151.5t-54.5 207.5q0 88 34 166.5t92 136t136 91.5t166 34t166 -34t136 -91.5 t92 -136t34 -166.5q0 -113 -54 -207t-145 -152q66 -10 134.5 -19t130.5 -20q23 -4 45 -5t41 -7q18 -4 33.5 -15.5t27.5 -21.5q66 -59 103.5 -116.5t37.5 -131.5v-387q-12 -6 -20 -13t-18.5 -14t-23.5 -14.5t-36 -15.5h-1368q-35 0 -54.5 22.5t-43.5 34.5zM1452 852v152 q0 18 2 47.5t11.5 56.5t30 46.5t56.5 19.5q-45 29 -72.5 75.5t-27.5 104.5q0 43 16.5 82t46 68.5t68.5 46t84 16.5q43 0 82 -16.5t68.5 -46t46 -68.5t16.5 -82q0 -57 -26.5 -104t-71.5 -76q37 0 56.5 -19.5t28.5 -46.5t11 -56.5t2 -47.5v-152q-12 -8 -22.5 -18.5 t-26.5 -10.5h-328q-18 0 -27.5 10.5t-23.5 18.5z" />
<glyph unicode="&#xf0c1;" horiz-adv-x="1597" d="M0 1137q0 88 34 166.5t92 137t136 92.5t168 34q86 0 166 -33t139 -92q8 -8 21.5 -20.5t26 -25t21.5 -25.5t9 -25q0 -18 -12 -31q-6 -8 -25 -12q-47 -10 -88 -22.5t-86 -31.5q-4 -4 -16 -4t-25.5 10.5t-31 21.5t-42 21.5t-57.5 10.5q-35 0 -66.5 -13.5t-54 -37t-36 -54 t-13.5 -67.5q0 -41 17.5 -75t43 -63.5t56.5 -56.5t57 -53l180 -178q23 -25 54.5 -37t66.5 -12q43 0 73 16t46 16q12 0 39 -21.5t55.5 -49t50 -55t21.5 -42.5q0 -29 -36 -51t-83 -38.5t-94 -26t-72 -9.5q-86 0 -164.5 33t-140.5 92l-303 305q-61 59 -94 139.5t-33 166.5z M578 1010q0 29 35.5 51t82.5 38.5t94 26t72 9.5q86 0 166 -33t139 -92l303 -305q61 -59 94 -139.5t33 -166.5q0 -90 -33.5 -167.5t-92 -136t-137.5 -92.5t-167 -34q-86 0 -165.5 34t-139.5 93q-8 8 -21.5 19.5t-25.5 25t-21.5 26.5t-9.5 26q0 18 13 28q6 8 24 12 q47 10 88 22.5t86 33.5q12 4 17 4q12 0 25.5 -10.5t30.5 -21.5t41 -21.5t58 -10.5q72 0 121 49.5t49 120.5q0 41 -17 76t-44 63.5t-56.5 55.5t-56.5 53l-178 180q-53 49 -123 50q-43 0 -72.5 -17.5t-46.5 -17.5q-12 0 -38.5 21.5t-55 49t-50 56t-21.5 41.5z" />
...

Было бы эффективно взять мой код значка svg, вставить его как новый элемент глифа и назначить неиспользуемый символ Юникода?

Кристиан Шленскер
источник
2
ты нашел решение? или вы просто выбрали другое подключение?
Мишель Айрес,
1
ссылка для '.svg версии Font Awesome' не найдена. Пожалуйста обновите.
Яннис Дран
2
Вот соответствующая документация: github.com/FortAwesome/Font-Awesome/wiki/Customize-Font-Awesome
Римиан,

Ответы:

125

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

davidtheclark
источник
Спасибо :) Это очень помогает!
Джонни Чжао
Отличный сервис. Спасибо за это. Сгенерировал пользовательский набор иконок из svgs в не время.
Nodoze
Хороший инструмент. Отлично. :)
Кристиан Марк
2
Привет, я создал иконки шрифтов с папкой, содержащей иконки SVG. Но позже я хочу добавить одну иконку к этому, возможно ли добавить? или снова я должен сгенерировать с папкой?
Varadha31590
21

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

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

export const faSomeObjectName = {
  // Use a prefix like 'fac' that doesn't 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 path data» в примере кода, - это то, что будет назначено в качестве значения dатрибута <path>элемента, который является дочерним элементом для <svg>. Вот так (опуская некоторые детали для ясности):

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

(Адаптировано из моего аналогичного ответа здесь: https://stackoverflow.com/a/50338775/4642871 )

mwilkerson
источник
Что если мы хотим использовать стандартные префиксы, чтобы новый svg мог вписаться в сайт?
Норберт Кардос
1
Вы можете использовать любой префикс, который вам нравится. Но если вы используете стандартный префикс ( fab, fas, far, fal) вы будете подвержены большим риском в наименовании конфликта , если не сейчас, то , возможно , в будущем , поскольку мы продолжаем добавлять иконки с этими стандартными префиксами. Использование собственного префикса не уменьшит вероятность того, что svg «вписывается в сайт», но я не уверен, что вы подразумеваете под этой фразой, так что, возможно, вы могли бы уточнить?
mwilkerson
Нам нужен конкретный значок социальной марки (с более чем 200M пользователями), который уже был запрошен. Мы хотели бы добавить эту иконку svg в профессиональную версию, чтобы использовать ее на веб-сайте, не создавая html / css исключения / случаи. У всех других брендов уже есть значки, поэтому классный элемент присутствует на элементах (и фактически выбранный бренд добавляется в CSS динамически)
Норберт Кардос
1
Да, это будет работать нормально, используя стандартный префикс, чтобы добавить свой собственный значок. Просто помните, что если имя иконки окажется таким же, как то, что мы добавим к этому префиксу позже, возникнет конфликт. Так что, может быть, выбрать имя значка, который вряд ли будет конфликтовать? Разветвленный CodePen для демонстрации: codepen.io/fontawesome/pen/pZWXYX
mwilkerson
Мой SVG был взят из Adobe AI-файла и имел несколько путей. Это помешало мне правильно установить параметр "d", указанный выше. Мне пришлось сначала преобразовать AI-файл в составной путь, а затем экспортировать его в SVG-файл. Я узнал, как это сделать, здесь: graphicdesign.stackexchange.com/questions/35054/…
Алекс Стэндифорд
19

Я предлагаю держать ваши иконки отдельно от 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, в текстовом редакторе. Например:

<glyph unicode="&#xe953;" glyph-name="eye" ... />
Pegues
источник
не работает ,.,. завершить весь процесс, просто значок не появляется, вместо номера появляются
Inzmam ul Hassan
1
Можете ли вы уточнить немного больше? Я рад помочь вам с вашей проблемой. Вы указали font-family: customiconpack;с вашим selector:after? Позвольте мне обновить мое решение прямо сейчас для selector:afterпримера кода.
Pegues
я загрузил мой значок SVG файл. я загрузил файл,., я положил их в проект, добавил новый CSS-файл в проект, скопировал ваш код в файл, изменил код с помощью моего кода значка,. не работал.
Инзмам уль Хасан
1
Пожалуйста, присоединяйтесь к этой комнате чата, которую я создал, чтобы мы могли легче обсудить проблему: chat.stackoverflow.com/rooms/132402/…
Pegues
2
Я комментирую здесь, просто чтобы другие знали, что проблема в том, что вы создали SVG в Illustrator из импортированного PNG. Вы должны воссоздать свою иконку как вектор. PNG является растровым форматом и не имеет векторных кривых.
Pegues
18

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

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

Fontforge может импортировать файлы SVG (выберите слот глифа, «Файл»> «Импорт», а затем выберите изображение SVG), а затем вы можете конвертировать во все соответствующие форматы шрифтов (SVG, TrueType, Woff и т. Д.).

Эрик Дальстрём
источник
13

Подобный подход к @ 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, чтобы изменить положение, поскольку они имеют странные Java-окна SWING, которые не отображаются на мониторе, и имеют модальные проблемы с всплывающими окнами - мне пришлось проверить панель задач для некоторых)
  • Файл | Откройте fontawesome-webfont.svg
  • Файл | Импортировать
  • Прокрутите вниз, щелкните правой кнопкой мыши по значку | Информация о глифе
  • Обновите имя глифа до 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}/fontawesome-webfont.eot?v=@{fa-version}');
      src: 
    	//url('@{fa-font-path}/fontawesome-webfont.eot?#iefix&v=@{fa-version}') format('embedded-opentype'),
        //url('@{fa-font-path}/fontawesome-webfont.woff2?v=@{fa-version}') format('woff2'),
        url('@{fa-font-path}/fontawesomeregular.woff?v=@{fa-version}') format('woff'),
        url('@{fa-font-path}/fontawesomeregular.ttf?v=@{fa-version}') format('truetype'),
        url('@{fa-font-path}/fontawesomeregular.svg?v=@{fa-version}#fontawesomeregular') format('svg');
    //  src: url('@{fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts
      font-weight: normal;
      font-style: normal;
    }

Я знаю, что это может быть «спорным» закомментировать другие типы файлов, но счастлив услышать, как генерировать .eot или .OTF файлы в комментариях.

  • и наконец, как упоминает Сэмюэль, обновите ваш CSS / LESS:

    .fa-XXX: before {content: "\ f501"; }

OzBob
источник
3

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

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

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

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

>##CSS##
>.FA.NEW-GLYPH:after {
>content:'WHATEVER AVAILABLE UNICODE CHARACTER YOU FOUND'
>(other conditions should be copied from other fonts)
>}
Сэмюэль Бергстрем
источник
2

Если вам нужны некоторые (или все) иконки от font-awesome, включая собственные иконки svg, вы можете:

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

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

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

4- Выберите SVG со шрифтом-удивительным, расположенный в вашем извлеченном почтовом индексе внутри шрифтов.

5- Повторите процедуру загрузки ваших собственных файлов SVG.

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

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

CarLoOSX
источник
Это будет работать, но я думаю, что лучше создать свою собственную библиотеку значков и использовать потрясающую сторону. Это позволит обновиться (с новыми иконками).
Гийом Харари