CSS border-radius:50%在部分图标上不生效，如何统一设置padding？

嘿，咱们来捋捋为啥你的 border-radius:50% 在图标上没生效，同时怎么实现「统一配置+每个图标不同padding」的需求～

首先，border-radius:50% 要变成正圆，有几个前提你可能没注意到：

• 元素得是正方形：你现在给 .social a 设了 width:20px，但 padding:20px 是四个方向都加，再加上 line-height:0，实际元素的高度是由padding和图标本身的高度决定的，大概率宽高不相等，这样圆角出来就是椭圆甚至看不出效果。
• 得有背景/边框载体：如果元素本身没背景色或边框，就算加了 border-radius，你也看不到圆角——因为没东西来呈现这个圆角效果啊。
• FontAwesome图标的特性：你用的是文字式图标，要是没给容器加背景，border-radius 是作用在文字容器上，但图标本身是矩形的，看起来就像圆角没生效。

接下来给你具体的解决步骤，既能统一配置基础样式，又能给每个图标单独设padding：

第一步：先把容器改成能出正圆的基础结构 #

修改 .social a 的基础样式，把宽高固定，确保是正方形，同时保留统一的配置项：

.social a {
  font-family: "FontAwesome";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  /* 固定宽高，确保正方形，这是正圆的基础 */
  width: 20px;
  height: 20px;
  position: relative;
  text-align: center;
  color: white;
  top: 62px;
  left: 25%;
  font-size: 22px;
  cursor: pointer;
  /* 统一加圆角 */
  border-radius: 50%;
  /* 加个背景让圆角可见，你可以换成自己需要的颜色 */
  background-color: #2c3e50;
  /* 让图标完美居中 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 去掉a标签默认的下划线 */
  text-decoration: none;
  /* 可选：如果不想padding改变容器大小，就加这个 */
  /* box-sizing: border-box; */
}

第二步：给每个图标单独设置padding #

给每个图标对应的a标签加专属类名，然后单独写padding样式就行：

/* 每个图标自定义padding */
.social-icon-facebook {
  padding: 15px;
}
.social-icon-twitter {
  padding: 20px;
}
.social-icon-instagram {
  padding: 25px;
}

对应的HTML结构大概是这样：

<div class="social">
  <a href="#" class="social-icon-facebook">&#xf09a;</a> <!-- Facebook图标 -->
  <a href="#" class="social-icon-twitter">&#xf099;</a> <!-- Twitter图标 -->
  <a href="#" class="social-icon-instagram">&#xf16d;</a> <!-- Instagram图标 -->
</div>

为啥这样能行？ #

• 固定宽高+border-radius:50% 确保了容器是正圆，不管padding多少，容器都会保持圆形（因为padding是加在容器外面的，默认box-sizing:content-box，所以不同padding会让圆形大小不同；如果加了box-sizing:border-box，容器大小不变，只是图标到边框的距离不同，看你需求选）。
• 基础样式统一写在 .social a 里，不用重复写FontAwesome的配置、颜色、定位这些，只需要给每个图标单独加padding即可。

额外提醒 #

• 检查下FontAwesome字体有没有加载成功，要是图标显示成方块，也会误以为是圆角的问题。
• 要是还是看不到圆角，打开浏览器开发者工具看看是不是有其他CSS规则覆盖了border-radius，调整优先级就行。

内容的提问来源于stack exchange，提问作者Daniel