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 =＆＃34; shrink-6＆＃34;制作更小的。我相信你可以通过data-fa-transform =＆＃34; shrink-6＆＃34;

来增加大小

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

根据有关power transforms的官方文档，您可以简单地将Command="npm run build --configuration=production"添加到图标元素中。它的工作原理应与使用data-fa-transform="grow-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="shrink--6"对我不起作用。

使用data-fa-transform="ANYTHING"为我的项目解决了这个问题。

字体很棒<svg> size

3 个答案: