使用Font Awesome的社交媒体链接修改font-size不生效如何解决？

问题原因 #

• 你给.fa类设置了固定width: 30px，当你把font-size调整为60px时，图标实际渲染尺寸已经超出了30px的容器宽度，显示范围被限制，所以看起来修改没有生效。
• 若你的自定义CSS代码放在font-awesome样式文件的引入之前，font-awesome自带的.fa默认样式会覆盖你的自定义配置，也会导致font-size修改不生效。

解决方法 #

1. 调整.fa的width属性，和你修改后的font-size数值匹配，也可以直接删除width配置，仅通过padding控制图标容器的整体大小即可，示例修改如下：

.fa {
  padding: 20px;
  font-size: 60px;
  width: 60px; /* 或者直接删除此行 */
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
  border-radius: 50%;
}

2. 调整样式引入顺序，先引入font-awesome的CSS文件，再加载你的自定义CSS代码，保证你的自定义样式优先级更高，不会被第三方样式覆盖。
   如果担心优先级问题，也可以给图标元素新增自定义类，用自定义类名来修改样式，优先级更高：

<a href="#" class="fa fa-facebook social-icon"></a>

.social-icon {
  font-size: 60px;
}

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