时间戳

首页 > 解决方案 > 如何在图标之间添加间距但它们与简约代码保持在同一行而不添加styles.js或类似的东西

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

问题描述

如何在图标之间添加填充，但它们与简约代码保持在同一行而不添加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>

目前他们看起来像这样 当前状态

标签： htmlcssreactjsreact-bootstrap

解决方案

嘿，不知道你想要边距或填充，我的意思是想要在图标和边框之间或直接在图标之间留出空间，但我会告诉你两个。

如果你想用一些空间分隔图标，你可以在你的 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;
}

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

推荐阅读