Font Awesome 图标溢出其容器答案

【问题标题】：FontAwesome icon overflows its contanierFont Awesome 图标溢出其容器
【发布时间】：2019-11-16 22:55:07
【问题描述】：

我正在使用他们的 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

这个 sn-p 使用 Svelte 语法，只是因为它方便 Glitch

【问题讨论】：

减小字体或增加容器的宽度和高度

标签： html css icons font-awesome

【解决方案1】：

虽然 FontAwesome 文档演示了使用 size 属性来调整图标，但这是不正确的方法。正确的做法是给图标加一个尺寸类：

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

【讨论】：