How to make an icon fit into a row element in react-bootstrap-CodePudding

I am having a small issue fitting an icon into a Row element.

right now the icon takes up the whole row ::

<LinkedInIcon />

I was able to make it not take up the whole row ::

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

now I have to add some text on the right side of the icon, but its not working out. I added my code to the sandbox::

<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

CodePudding user response：

Maybe like this? It's a lot of style inline, but seem to get the job done...

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