Я люблю шрифт Font Awesome icon icon и хочу использовать его для большинства значков на моем сайте, но есть несколько пользовательских значков svg, которые мне понадобятся в дополнение к тому, что предлагается.
Я заметил, что .svg-версия Font Awesome состоит в основном из следующих <glyph />
элементов:
...
<glyph unicode="" 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="" 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="" 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, вставить его как новый элемент глифа и назначить неиспользуемый символ Юникода?
svg
webfonts
font-awesome
Кристиан Шленскер
источник
источник
Ответы:
Дайте Icomoon попробовать. Вы можете загрузить свои собственные SVG, добавить их в библиотеку, а затем создать собственный шрифт, комбинирующий FontAwesome с вашими собственными значками.
источник
Вы можете попробовать fontcustom , он создает свой собственный шрифт из файлов SVG.
источник
В Font Awesome 5 вы можете создавать собственные значки с вашими собственными данными SVG. Вот демо-репозиторий GitHub, с которым вы можете играть. А вот CodePen, который показывает, как нечто подобное можно сделать в
<script>
блоках.В любом случае, это просто включает использование
library.add()
для добавления объекта следующим образом:Обратите внимание, что элемент, помеченный комментарием «svg path data» в примере кода, - это то, что будет назначено в качестве значения
d
атрибута<path>
элемента, который является дочерним элементом для<svg>
. Вот так (опуская некоторые детали для ясности):(Адаптировано из моего аналогичного ответа здесь: https://stackoverflow.com/a/50338775/4642871 )
источник
fab
,fas
,far
,fal
) вы будете подвержены большим риском в наименовании конфликта , если не сейчас, то , возможно , в будущем , поскольку мы продолжаем добавлять иконки с этими стандартными префиксами. Использование собственного префикса не уменьшит вероятность того, что svg «вписывается в сайт», но я не уверен, что вы подразумеваете под этой фразой, так что, возможно, вы могли бы уточнить?Я предлагаю держать ваши иконки отдельно от 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 в свой проект:Помните, что вы можете получить значения символов Unicode для каждого значка в вашем пакете значков с помощью программного обеспечения IcoMoon . Эти значения могут быть полезны при назначении значков с помощью CSS, например (если мы используем
font-family
объявленный в примере@font-face {...}
выше):Вы также можете получить значение Юникода глифа,
e953
если откроетеsvg
файл, созданный с помощью font-pack, в текстовом редакторе. Например:источник
font-family: customiconpack;
с вашимselector:after
? Позвольте мне обновить мое решение прямо сейчас дляselector:after
примера кода.Зависит от того, что у тебя есть. Если ваша иконка svg - просто путь, то добавить этот глиф достаточно просто, просто скопировав атрибут 'd' в новый элемент <glyph>. Однако путь должен быть масштабирован до системы координат шрифта (квадрат EM, который обычно равен [0,0,2048,2048] - стандарт для шрифтов Truetype) и выровнен по желаемой базовой линии.
Однако не все браузеры поддерживают шрифты svg, поэтому вам придется конвертировать его и в другие форматы, если вы хотите, чтобы он работал везде.
Fontforge может импортировать файлы SVG (выберите слот глифа, «Файл»> «Импорт», а затем выберите изображение SVG), а затем вы можете конвертировать во все соответствующие форматы шрифтов (SVG, TrueType, Woff и т. Д.).
источник
Подобный подход к @ Samuel-bergström:
Я знаю, что это может быть «спорным» закомментировать другие типы файлов, но счастлив услышать, как генерировать .eot или .OTF файлы в комментариях.
и наконец, как упоминает Сэмюэль, обновите ваш CSS / LESS:
.fa-XXX: before {content: "\ f501"; }
источник
Я немного исследовал SVG-веб-шрифты и создание шрифтов, на мой взгляд, если вы хотите «добавить» шрифты в уже существующий шрифт, вам нужно сделать следующее:
перейдите в inkscape и создайте глиф, сохраните его как SVG, чтобы вы могли прочитать код, убедитесь, что вы присвоили ему символ юникода, который в настоящее время не используется, чтобы он не конфликтовал ни с одним из существующих глифов в шрифте. это может быть сложно, поэтому я думаю, что лучше было бы заменить существующий глиф своим собственным (просто выберите тот, который вы не используете, скопируйте первую часть:
Сохраните SVG, затем преобразуйте его в веб-шрифт с помощью любого онлайн-конвертера, чтобы ваш веб-шрифт работал во всех браузерах.
как только это будет сделано, вы должны иметь SVG с одним из замененных символов, и в этом случае все готово. если нет, вам нужно создать CSS для вашего нового глифа, в этом случае попробуйте повторно использовать существующие CSS CSS и добавьте только
источник
Если вам нужны некоторые (или все) иконки от font-awesome, включая собственные иконки svg, вы можете:
1- Перейдите на http://fontawesome.io/ Загрузите zip-архив и распакуйте его, например, на рабочем столе.
2- Зайдите на http://fontastic.me/, чтобы создать учетную запись, используя свой адрес электронной почты.
3- После того, как вы вошли в систему, нажмите на опцию заголовка: Добавить дополнительные значки.
4- Выберите SVG со шрифтом-удивительным, расположенный в вашем извлеченном почтовом индексе внутри шрифтов.
5- Повторите процедуру загрузки ваших собственных файлов SVG.
6- Внутри дома (в заголовке страницы) Выберите значки, которые вы хотите загрузить, настройте их, чтобы дать свои собственные имена и выберите опубликовать, чтобы иметь ссылку или скачать шрифты и CSS.
Извините за мой английский! : D
источник