Как использовать Font Awesome 5 в Raphael.js? - PullRequest
Новая
       29

Как использовать Font Awesome 5 в Raphael.js?

0 голосов
/ 10 июня 2019

Существует сообщение от 5+ лет назад, в котором показано, как использовать Font Awesome с Raphael.js, включая рабочую скрипку:

Шрифт с Raphael JS

Но это для FA версии 4, и похоже, что в FA 5 многое изменилось. Я пытаюсь отобразить иконку FA 5 Free solid - скажем так, это «лягушка», solid style, class = "fas fa-лягушка ", Unicode = f52e, в Raphael.js.

(Чтобы добавить сложность, это на самом деле слой Рафаэля на карте Mapbox. Так как я не испытывал, однако испытал другое" функция Рафаэля X не«работа в слое Mapbox», я делаю обнадеживающее предположение, что если я смогу заставить FA5 работать на старом, старом Рафаэле, это решит мою проблему.)

Я попытался изменить SO-код для FA 5;Я проверил min css, который входит в комплект скрипта FA5 (он говорит, что семейство шрифтов - «Font Awesome 5 Pro» даже при использовании бесплатных иконок ...);Я прочитал некоторые старые проблемы с github, в которых говорится, что вы должны установить font-weight: 900 в Chrome для жирных шрифтов.Я пробовал несколько комбинаций этих вещей. 

<html>
<head>
  <script src="https://kit.fontawesome.com/{kit-id-goes-here}.js"></script>
</head>
<body>
  <div id="map"</div>
  <script src='https://api.mapbox.com/mapbox.js/v3.1.1/mapbox.js'></script>
  <script src="code/raphael.min.js"></script> <!-- (v2.2.0) -->
  <script src="code/rlayer.min.js"></script><!-- map -->
</body>
</html>

L.mapbox.accessToken = '...';
let map = L.map('map', { ... };
L.tileLayer(...).addTo(map);

let raphaelLayer = new R.Layer();
map.addLayer(raphaelLayer);

let paper = raphaelLayer._paper;

let t = this.iconText = paper.text(100, 100, '\uf52e');
t.attr('font-size', 18);
t.attr('fill', '#fff');
t.attr('font-family', 'Font Awesome 5 Pro');
t.attr('font-weight', 900);

Я ожидаю увидеть, как лягушка FA5 будет каким-то образом визуализирована, но фактический результат - квадратный блок, который появляется, когда вы указаликакой-то недопустимый символ Unicode.

Font Awesome направляет своих пользователей отправлять сообщения в SO с такими вопросами, поэтому я так и сделал.Как я упоминал выше, я был бы счастлив с примером, не относящимся к Mapbox Raphael, который работает с FA5, и возьму его оттуда.

...