如何在图标之间添加间距，但它们使用简约代码保持在同一行中，而不添加 styles.js 或类似的东西

Question

如何在图标之间添加 Padding 但它们仍保持在同一行中，使用简约代码而不添加 styles.js 或类似的东西

<Card.Body>
       <a href={item.facebookPage}><Button  > <i class="fab fa-facebook-square fa-3x "></i></Button></a>
       <a href={item.instagram}><Button variant='warning'> <i  class="fab fa-instagram fa-3x" ></i></Button></a>
       <a href={item.twitter}><Button variant='primary' > <i  class="fab fa-twitter fa-3x" ></i></Button></a>
       <a href={item.youtube}><Button variant='danger' > <i  class="fab fa-youtube fa-3x" ></i></Button></a>
        <a href={item.linkedIn}><Button variant='light' > <i  class="fab fa-linkedin-in fa-3x" ></i></Button></a>
  </Card.Body>

目前他们看起来像那样

Answer 1

嘿，我不知道你想要边距还是填充，我的意思是想在图标和边框之间或直接在图标之间获得 space，但我会告诉你两者。

如果你想用一些 space 分隔图标，你可以在你的 css 文件中使用它，或者在你的 html

中使用样式标签

Card.Body a{
   display:inline-block;
   margin-right:1em;
}

如果你想给你的图标添加填充，你可以使用

Card.Body a{
   display:inline-block;
   padding:0.5em;
}

或

Card.Body a{
   display:inline-block;
   padding-left:0.5em;
   padding-right:0.5em;
}

但要注意填充。在某些情况下，它可能会导致图标变小。希望有用。

Answer 2

要获得项目之间的间距但不影响之前或之后的间距，您可以使用 CSS first and last-child pseudo 类 .

此代码段通过给中间元素左右各留出 1em 的边距，使第一个元素只有右边距，最后一个元素只有左边距，从而在元素之间放置 2em 的间距：

cardbody a {
  margin-left: 1em;
  margin-right: 1em;
}
cardbody a:first-of-type {
  margin-right: 1em;
}
cardbody a:last-of-type {
  margin-left: 1em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<cardbody>
       <a href={item.facebookPage}><Button  > <i class="fab fa-facebook-square fa-3x "></i></Button></a>
       <a href={item.instagram}><Button variant='warning'> <i  class="fab fa-instagram fa-3x" ></i></Button></a>
       <a href={item.twitter}><Button variant='primary' > <i  class="fab fa-twitter fa-3x" ></i></Button></a>
       <a href={item.youtube}><Button variant='danger' > <i  class="fab fa-youtube fa-3x" ></i></Button></a>
        <a href={item.linkedIn}><Button variant='light' > <i  class="fab fa-linkedin-in fa-3x" ></i></Button></a>
</cardbody>

注意：我无法让 Card.Body 格式作为带有或不带有反应的标签工作，因此出于本演示的目的将其简化为卡体。

Answer 3

上面的答案很好，但我想用简约的代码来实现因此，通过在按钮内添加 className='mx-2'，就完成了工作。

  <Card.Body>
     <a href={item.facebookPage}><Button className='mx-2' > <i class="fab fa-facebook-square fa-3x "></i></Button></a>
     <a href={item.instagram}><Button variant='warning' className='mx-2'> <i  class="fab fa-instagram fa-3x" ></i></Button></a>
     <a href={item.twitter}><Button variant='primary' className='mx-2'> <i  class="fab fa-twitter fa-3x" ></i></Button></a>
     <a href={item.youtube}><Button variant='danger' className='mx-2'> <i  class="fab fa-youtube fa-3x" ></i></Button></a>
     <a href={item.linkedIn}><Button variant='light' className='mx-2'> <i  class="fab fa-linkedin-in fa-3x" ></i></Button></a>
       </Card.Body  >

现在他们看起来像

如何在图标之间添加间距，但它们使用简约代码保持在同一行中，而不添加 styles.js 或类似的东西

How to add Spacing in between icons but they remain in the same row with minimalistic code with out adding styles.js or anything like that

html

css

reactjs

react-bootstrap