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的方式）。 / p>

Answer 2

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

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

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

我创建了一个小提琴手：https://jsfiddle.net/6ofmn36g/

我确实同意，虽然这是一种有点难以阅读的方法，但是......

Answer 3

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

掩蔽

结合两个图标创建一个单色形状，这要归功于Font Awesome 5中SVG的强大功能！将它与我们的新Power Transforms一起用于一些非常棒的效果。

浏览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>

Answer 4

当前的FontAwesome库不可能。但是有一些解决方法正如 arkascha 在下面提出的那样。

其他信息：

不完全是你要求的但是我认为这对你有帮助，也是未来的人群，他们会以这个标题落入这个主题。

我回答过类似的事情......这里

https://stackoverflow.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>

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

4 个答案: