将FontAwesomeIcon置于按钮中心

问题描述

我在使用图标的react-bootstrap按钮和fortawesome / react-fontawesome。我使用此代码设置按钮的高度和宽度

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

然后我使用此代码将图标插入按钮内

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

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

解决方法

在此设置中，使用height上width和Button的视口尺寸来控制其尺寸将无法正常工作，尤其是在使用字体图标时（显然，在您正在使用的库将它们的输出生成为svg）。我建议您通过填充或像素测量来控制按钮的大小。

示例：

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

此外，如果您需要调整字体图标的大小，则可以使用size属性，也可以使用CSS font-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>
  );
}

react-bootstrap react-font-awesome