Додайте спеціальні значки для приготування шрифту

Я люблю шрифт значка Font Awesome і хочу використовувати його для більшості піктограм на моєму сайті, але є кілька спеціальних іконок 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, вставити його як новий елемент глифа та призначити невикористаний знак unicode?

Спробуйте Icomoon спробувати. Ви можете завантажувати власні SVG-файли, додавати їх у бібліотеку, а потім створювати спеціальний шрифт, що поєднує FontAwesome з власними іконками.

Ви можете надати fontcustom іти, він створює свій власний шрифт з файлів svg.

У шрифті 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 шлях даних" у зразку коду, є тим, що буде присвоєно як значення dатрибута <path>елементу, який є дочірньою частиною <svg>. Ось так (залишаючи деякі деталі для наочності):

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

(Адаптовано з моєї аналогічної відповіді тут: https://stackoverflow.com/a/50338775/4642871 )

Я пропоную тримати ваші іконки окремо від 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;
}

Майте на увазі, що ви можете отримати значення унікоду гліфів кожної піктограми в пакеті іконок за допомогою програмного забезпечення IcoMoon . Ці значення можуть бути корисними при призначенні ваших іконок за допомогою CSS, як у (якщо ми використовуємо font-familyзадекларований у прикладі @font-face {...}вище):

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

Ви також можете отримати значення unicode гліфа, e953якщо відкриєте svgфайл, створений пакетом шрифтів, у текстовому редакторі. Наприклад:

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

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

Однак не всі браузери підтримують SVG-шрифти, тому вам доведеться також конвертувати його в інші формати, якщо ви хочете, щоб він працював скрізь.

Fontforge може імпортувати SVG-файли (виберіть слот для гліфів, Файл> Імпорт, а потім виберіть своє SVG-зображення), а потім зможете конвертувати у всі відповідні формати шрифту (svg, truetype, woff тощо).

Подібний підхід до @ 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
• Файл | Імпорт
• Прокрутіть донизу, клацніть правою кнопкою миші на значку | Інформація про гліфи
• Оновіть ім'я Glyph до uniFXXX (XXX - це щось на зразок 501, більший номер, ніж найвищий Unicode, який використовується у версії 4.5 FontAwesome)
• Unicode Vlaue U + fXXX
• Натисніть кнопку ОК
• Файл | Зберегти
• Файл | Створити шрифти ...
• Закрийте FontForge
• Відкрийте веб-проект
• Скопіюйте файли шрифтів у папку "\ Вміст \ шрифти \" в моєму проекті.
• Відредагуйте "\ вміст \ стилі \ 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 / МЕНШЕ за допомогою:

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

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

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

Збережіть svg, потім перетворіть його у веб-шрифт за допомогою будь-якого веб-перетворювача, щоб ваш веб-шрифт працював у всіх браузерах.

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

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

Якщо ви хочете, щоб деякі піктограми (або всі) з шрифтового дивовижного, включаючи ваші власні SVG піктограми, ви можете:

1- Перейдіть на сторінку http://fontawesome.io/ Завантажте поштовий індекс та витягніть його, наприклад, на робочий стіл.

2- Перейдіть на сторінку http://fontastic.me/, використовуйте електронний лист для створення облікового запису.

3- Після входу в систему натисніть на опцію заголовка: Додати ще іконки.

4- Виберіть SVG-шрифт, який знаходиться у витягнутому поштовому форматі всередині шрифтів

5- Повторіть процес завантаження власних файлів svg.

6- Всередині будинку (в заголовку сторінки) Виберіть піктограми, які ви хочете завантажити, налаштуйте їх, щоб вказати власні імена та виберіть опублікувати, щоб мати посилання або завантажити шрифти та css.

Вибачте за мою англійську! : D