Как можно использовать font-awesome с mjml? - PullRequest
Новая
       118

Как можно использовать font-awesome с mjml?

4 голосов
/ 07 октября 2019

Я пытаюсь реализовать шаблон электронной почты, который использует шрифт Awesome с mjml, я не уверен, как это сделать. Я попытался использовать CDN следующим образом: 

  <mj-head>
    <mj-title>Thank you!</mj-title>
    <mj-style>
      <mj-include path="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>

    </mj-style>
    <mj-attributes>
      ...
    </mj-attributes>
  </mj-head>

...
  <mj-text align="center">
        <h3>              
                 Share <i class="fab fa-facebook-f"></i> 
        </h3>
  </mj-text>
...

Однако это не работает. Кто-нибудь может посоветовать мне, как лучше всего это сделать?

1 Ответ

0 голосов
/ 31 октября 2019

Сначала вам нужно включить шрифт. 

<mjml>
  <mj-head>
    <mj-font name="FontAwesome" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
  </mj-head>
</mjml>

После этого вам нужно найти номер Unicode для шрифта, который вы хотите использовать. Если вы откроете страницу со значком звезды , вы увидите, что это f005.

Теперь вы можете использовать тег mj-text для включения шрифта. 

<mj-text font-family="FontAwesome">&#xf005;</mj-text>

Это работает для сплошных иконок. Разница между иконками класса fas и far заключается в том, что fas имеет вес 900 и far вес 400. Однако в моем тестировании изменение font-weight не дало никакого другого результата. Я обнаружил, что могу получить far версию значка звезды, используя f006. Я проверил другие значки, и простой акт увеличения номера Unicode на один не сработал. Лучший способ найти эквивалент Unicode значка, который не указан в Font Awesome, - это отобразить его на обычной веб-странице, используя что-то вроде <i class="far fa-star"></i>", а затем скопировать и вставить значок в http://unicode.scarfboy.com/

...