FontAwesome<svg>大小

Question

所以我想让这个圆圈里面有图标，对于图标，我想使用字体很棒。对于圆圈，我使用填充技巧，因此圆圈始终是圆圈而不是椭圆。

图标变得太大，删除时box-sizing: border-box太小。

我认为padding-top: 20%;是问题的原因，但我不知道如何解决这个问题。

svg{
    width: 20% !important;
    padding-top: 20%;
    margin-right: 20%;
    border-radius: 100%;
    background-color: #ec567c;
    float: left;
    box-sizing: border-box;
}
svg:last-of-type{
  margin-right: 0;
}

<script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<i class="fas fa-female"></i>
<i class="fas fa-music"></i>
<i class="fas fa-camera"></i>

如果你拿走box-sizing: border-box;图标会在圆圈里，但它们会很小。

Answer 1

Font Awesome - 顾名思义 - 一种字体。这意味着您可以使用 font-size .

如果您认为图标太大：减小字体大小。

如果您认为图标太小：调高字体大小。

Answer 2

您可以向图标添加一个属性，使其大于默认值。在撰写本文时，Fontawesome 文档已关闭，所以我现在无法得到它......在我看来，这是最好的方法。

编辑：

好的，所以它是data-fa-transform="shrink-6"来缩小。我相信你可以用data-fa-transform="shrink--6"来增加大小

Hello
<span class="fa-layers fa-fw">
    <i class="fas fa-circle" data-fa-transform="shrink--6"></i>
    <i class="far fa-calendar-alt fa-inverse" data-fa-transform="shrink-6"></i>
</span>
World

https://jsfiddle.net/vk3qw09f/395/

在加载 Fontawesome JS 之前添加以下 JS 会将 svg 包装在标签中。我建议你这样做并设置i标签而不是svg的样式。

FontAwesomeConfig = {
    autoReplaceSvg: 'nest'
};

Answer 3

根据有关权力转换的官方文档，您可以简单地将data-fa-transform="grow-6"添加到图标元素中。它的工作方式应该与使用data-fa-transform="shrink--6"的黑客完全相同。

编辑：不确定它是否也适用于SVG图标，看起来仅适用于图标字体。将 Angular 7.2.12 与 @fortawesome/angular-fontawesome (0.3.0(、@fortawesome/fontawesome-svg-core (1.2.17(、@fortawesome/free-brands-svg-icons (5.8.1( 和 data-fa-transform="ANYTHING" 一起使用对我不起作用。

使用 <fa-icon style="font-size: 2rem;" [icon]="['fab', 'facebook-f']"></fa-icon> 为我的项目解决了这个问题。