Html 如何使图标的边框大小相等_Html_Css

Html 如何使图标的边框大小相等

html css

Html 如何使图标的边框大小相等,html,css,Html,Css,我的页脚几乎没有图标，这些图标周围有边框。问题是，基于图标，边框大小正在改变。但我需要所有图标的边框大小相等。谁能帮我一下吗 <div class="site-footer"> <div class="row"> <div class="col-lg-6"> <p class="box-1"> You can visit us at <span class="link-w

我的页脚几乎没有图标，这些图标周围有边框。问题是，基于图标，边框大小正在改变。但我需要所有图标的边框大小相等。谁能帮我一下吗

<div class="site-footer">
    <div class="row">
       <div class="col-lg-6">
           <p class="box-1">
            You can visit us at <span class="link-webiste" style="size: 70px !important;">agoodtreeproduction.com</span></p>
       </div>
       <div class="col-lg-6">
           <h3 style="color: white;"> Around The Web</h3>
           <ul class="list-inline">
           <li class="footer-elements">
              <a href="#" class=""><i class="fa fa-facebook btn-outline icon" aria-hidden="true"></i></a>
           </li>
           <li class="footer-elements">
              <a href="#" class=""><i class="fa fa-twitter btn-outline icon" aria-hidden="true"></i></a>
           </li>
           <li class="footer-elements">
              <a href="#" class=""><i class="fa fa-google-plus btn-outline icon" aria-hidden="true"></i></a>
           </li>
           <li class="footer-elements">
              <a href="#" class=""><i class="fa fa-linkedin btn-outline icon" aria-hidden="true"></i></a>
           </li>
          </ul>
       </div>
    </div>
 </div>

此处演示：

https://jsfiddle.net/VijayVj7/zadx4rec/

将

边框宽度

添加到

.btn大纲

，使其成为：

.btn-outline{

  color:#fff;
  background:0;
  border-style:solid;
  border-radius:50%;
  border-width: 20px;
  transition: background-color 0.7s ease-in-out;
  margin-top: 5px;
  padding: 25px;
}

您可以将20px更改为所需的大小。

在

中添加一个边框宽度
。btn大纲

，使其成为：

.btn-outline{

  color:#fff;
  background:0;
  border-style:solid;
  border-radius:50%;
  border-width: 20px;
  transition: background-color 0.7s ease-in-out;
  margin-top: 5px;
  padding: 25px;
}

您可以将20px更改为所需的大小。

为同一行中的元素创建相等的宽度，同时仍然允许这些元素根据其内容灵活变化，这对于flexbox来说是一项很好的工作。如中所示，您可以将父元素设置为

display:flex

，并且每个

标记都具有

flex-basis:0

和

flex-grow:1

。这意味着每个列表项都将以无宽度开始，并且所有列表项之间的可用增长将平均分配

但是，此设置仍将使每个项目至少增长到足以适应其内容的程度。因此，您可能不得不使用媒体查询来缩小小屏幕上图标的字体大小（否则，您可能会在视口之外，或更长的文本迫使更宽的元素），和/或考虑设置<代码> Flex Frase:Prime在父（一旦不能再压缩下去，就会启动新的图标行）。最后，我在图标中添加了

box size:border box

，这样图标就可以用宽度填充。如果您对项目不太感兴趣，请考虑将声明添加到<代码> */COD>选择器（当前注释），因为它通常被视为元素的更为逻辑的框模型。

display:flex

，并且每个

标记都具有

flex-basis:0

和

flex-grow:1

。这意味着每个列表项都将以无宽度开始，并且所有列表项之间的可用增长将平均分配

box size:border box