如何解决将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>
);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。