html - 如何在 mjml 中使用 font-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>
...
但是,这不起作用。谁能告诉我如何最好地做到这一点?
解决方案
首先,您需要包含字体。
<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"></mj-text>
这适用于实体图标。fas
类图标之间的区别在于far
它fas
的重量为 900 和far
重量为 400。但是,在我的测试中更改font-weight
并没有产生任何不同的结果。我确实发现我可以far
使用 f006 获得星形图标的版本。我检查了其他图标,但将 unicode 数字加一的简单行为不起作用。我发现获得 Font Awesome 上未列出的图标的 unicode 等效项的最佳方法是使用类似的东西在普通网页中呈现它,<i class="far fa-star"></i>"
然后将图标复制并粘贴到http://unicode.scarfboy.com/
推荐阅读
- android - 虽然 Android Studio 更新到 v3.3,但获取 API 'variant.getAssemble()' 已过时,并已替换为 'variant.getAssembleProvider()'
- java - 如何使用“@Qualifier”动态指定参数?
- android - Android 对讲在 listview 结束时宣布“in list of X item”
- php - FASTCGI 进程最近经常失败。请稍后再试请求
- c# - 使用其他邮件服务器时发送电子邮件时出错,期望 gmail
- schema - Hortonworks 架构注册表集群模式
- mysql - 将 2 行合并为 1 行,有条件
- apache-kafka - Kafka Broker 在 VM 网络之外不可用,即使使用端口转发
- c++ - Windows 上的奇怪编译问题
- node.js - Aws cognito 通过管理员 nodejs 创建用户