在一个 i 标签中有两个很棒的字体图标

Question

我一直在网上搜索，但找不到这个问题的答案。有没有办法在一个 i 标签中添加两个 Font Awesome 图标？

如果我把两个 i 标签并排放置，我就可以做到，就像这样：

Good for: <i class="fa fa-male fa-2x"></i><i class=" fa fa-female fa-2x"></i>

那么有没有办法做到这一点？

Answer 1

像这样的基于字形的字体通常通过将元素的 content 更改为特定值来发挥作用，字体会拾取该值并将其呈现为适当的字形。

所以你不太可能使用一个标签来显示它们，除非库提供了自己处理该行为的特定语法（类似于 Font Awesome 使用 stacking 的方式） .

Answer 2

当前的 FontAwesome 库不可能。但也有一些解决方法，正如 arkascha 在下面建议的那样。

附加信息：

不完全是你想要的但我认为这会对你有所帮助，还有未来的人群会陷入这个标题。

我已经回答过类似的问题...在这里

https://whosebug.com/a/36491858/2592042

您还可以使用 font-awesome 图标集中可用的图标集来构建自定义图标，方法是将它们相应地堆叠和对齐。 Stacked Icons

示例：

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<span class="fa-stack fa-lg">
   <i class="fa fa-male fa-stack-1x"></i>
   <i class="fa fa-female fa-stack"></i>
</span>

Answer 3

这在单个 <i> 标记中是不可能的，原因是如何应用字形标识类的方式。对于更长或动态的序列，您可以但是直接使用标记符号中的图标代码：

html: <span class="font-awesome">&#xf183&#xf182</span>
css: .font-awesome { font-family: FontAwesome; }

这显然需要您将字体加载为 FontAwesome。

我创建了一个 fiddler 作为简单的演示：https://jsfiddle.net/6ofmn36g/

我同意这种方法有点难以阅读，但是...

Answer 4

使用 Font Awesome 5，这是可能的！

Masking

Combine two icons create one single-color shape, thanks to the power of SVG in Font Awesome 5! Use it with our new Power Transforms for some really awesome effects.

浏览 this link 中的屏蔽部分。

下面的代码片段是从他们的网站上摘录的一个小示例

<!-- Important : Use the SVG & JS method and reference the Js file, not the CSS file -->
<script src="https://use.fontawesome.com/releases/v5.0.13/js/all.js"></script>

<div class="fa-4x">
  <i class="fas fa-pencil-alt" data-fa-transform="shrink-10 up-.5" data-fa-mask="fas fa-comment" style="background:MistyRose"></i>
  <i class="fab fa-facebook-f" data-fa-transform="shrink-3.5 down-1.6 right-1.25" data-fa-mask="fas fa-circle" style="background:MistyRose"></i>
  <i class="fas fa-headphones" data-fa-transform="shrink-6" data-fa-mask="fas fa-square" style="background:MistyRose"></i>
</div>

在一个 i 标签中有两个很棒的字体图标

Have Two Font Awesome Icons in One i Tag

font-awesome