Как можно использовать собственный SVG в Font Awesome? - PullRequest
Новая
       6

Как можно использовать собственный SVG в Font Awesome?

0 голосов
/ 16 февраля 2020

У меня есть специальный файл .svg, который называется "carport.svg". Я хотел бы использовать его так, как если бы он уже был включен в FontAwesome и, следовательно, использовать инфраструктуру FontAwesome. Я поместил свой файл в папку \ svgs \ solid.

Что еще нужно сделать, чтобы полностью импортировать его? Я хотел бы тогда написать в моем HTML: 

<i class="fas fa-carport"></i>

Ответы [ 2 ]

0 голосов
/ 20 февраля 2020

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

var CustomIcon = {
  prefix: 'fac', /* your own prefix OR use any of the exiting ones (fab, far, fas)*/
  iconName: 'custom-icon', /* The name of your icon*/
  icon: [150, 150, [], 'e105', 'M ...'] /* The viewbox, the unicode, the path*/
}

FontAwesome.library.add(
  CustomIcon
)

Простой пример добавления значка треугольника: 

var faTriangle = {
  prefix: 'fas',
  iconName: 'tri',
  icon: [64, 64, [], 'e521', 'M8 48 L56 48 L32 12 Z']
}

FontAwesome.library.add(
  faTriangle
)
i,svg {
  color: red;
}
<script src="https://use.fontawesome.com/releases/v5.12.0/js/all.js"></script>

<i class="fas fa-tri fa-5x"></i>
<i class="fas fa-tri fa-8x"></i>
<i class="fas fa-tri fa-10x"></i>
0 голосов
/ 16 февраля 2020

Чтобы использовать иконки Font Awesome, добавьте следующую строку в раздел страницы HTML: 

<link href="/your-path-to-fontawesome/css/fontawesome.css" rel="stylesheet">

См. https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use

...