使FontAwesomeIcon位于按钮的中心

Question

我使用的是react引导按钮和fortawsome/areact字体作为图标。我正在使用这个代码设置按钮的高度和宽度

#button-size{
height: 1vh;
width: 1vw;
}

然后我用这个代码把图标插入按钮

<Button id="button-size">
<FontAwesomeIcon icon={faFacebookF}  />
</Button>

但我的问题是图标超出了按钮。如何将图标居中放置在按钮内

Answer 1

在Button上使用height和width的视口测量来控制其大小在这种设置中效果不佳，尤其是当您使用字体图标时(显然，在您使用的库中，它们会将输出生成为svg(。我建议您通过填充或像素测量来控制按钮的大小。

示例：

#button-size {
padding: 6px 20px;
}

此外，如果您需要调整字体图标的大小，您可以使用size道具或使用CSSfont-size

<Button id="button-size">
<FontAwesomeIcon icon={faFacebookF} size={"5x"}/>
</Button>

CodeSandBox：https://codesandbox.io/s/angry-drake-5pexo?file=/src/App.js

---

如果您绝对必须在项目中使用视口测量，我强烈反对，您可以选择将position-relative分配给按钮，并根据需要设置字体图标组件的样式以居中。

示例：

export default function App() {
const customFontIconStyle = {
position: "absolute",
top: "50%",
left: "50%",
transform: "translate(-50%, -50%)"
};
return (
<Container>
<Button id="button-size" className="position-relative">
<FontAwesomeIcon icon={faFacebookF} style={customFontIconStyle} />
</Button>
</Container>
);
}