如何在react-bootstrap中使图标适合行元素

Question

我有一个小问题，适合一个图标到行元素。

现在图标占据了整行::

<LinkedInIcon />

我可以使它不占整行::

<div style={{ background: "white", display: "inline-block" }}>
<LinkedInIcon />
</div>

现在我必须在图标的右侧添加一些文本，但它不工作。我将代码添加到沙箱中::

<Row>
<p className="text-center text-white">Bosky</p>
{/* this icon does not behave properly, it does not allow the text'Bosky' to show in the same row */}
<div style={{ background: "white", display: "inline-block" }}>
<LinkedInIcon />
</div>
</Row>

https://codesandbox.io/s/bosky-active-ow4qs7?file=/src/Components/Footer.js: 447 - 559

Answer 1

也许像这样?这是很多内联样式，但似乎完成了工作…

https://codesandbox.io/s/bosky-active-forked-bcbd35?file=/src/Components/Footer.js