FontAwesome图标溢出其容器

Posted 2021-04-30

我正在使用它们的API显示FontAwesome图标，并且图标溢出了容器。它们在其他元素旁边的位置不正确。有没有一种方法可以使图标完全适合其容器，而无需使用任意填充或其他技巧？

在此示例中，您可以看到图标溢出了容器的边框，并且相邻的input与加号重叠。

<script>
import { library } from '@fortawesome/fontawesome-svg-core';
import { faPlus } from '@fortawesome/free-solid-svg-icons';
import { icon } from '@fortawesome/fontawesome-svg-core';

library.add(faPlus);

const plus = icon({ prefix: 'fas', iconName: 'plus'}, {transform: {size: 32} });

</script>

<div style="border: 1px solid black; display: flex;">
  {@html plus.html}
  <input />
</div>

https://glitch.com/edit/#!/shore-buffet

此代码段使用Svelte语法，只是因为它对毛刺很方便

答案

尽管FontAwesome文档演示了使用size属性来调整图标，但这是不正确的方法。正确的方法是向图标添加一个大小类：

const plus = icon({ prefix: 'fas', iconName: 'plus'}, {classes: 'fa-2x'});