为何点击MDBootstrap页脚的Font-Awesome图标时尺寸变大且样式不符

问题1：按钮样式不是圆形、带蓝色边框的解决方法 #

• 删除按钮上的btn-primary类，该类会自带默认蓝色边框和背景样式，和你自定义的背景色冲突，只保留btn btn-lg btn-floating mx-2类即可。
• 给按钮添加border: none的内联样式，或者在App.css中添加以下规则清除按钮焦点、点击状态的默认边框：

.btn-floating:focus, .btn-floating:active {
  outline: none !important;
  box-shadow: none !important;
  border: none !important;
}

• 确认你已经完整引入了MDBootstrap的样式文件，btn-floating类依赖MDB的默认样式实现100%圆角的圆形效果，样式引入不全时会失效。
• 优化嵌套写法：不要把button嵌套在a标签内，直接给a标签加按钮类即可，避免多一层标签带来的样式冲突，示例写法：

<a href="https://facebook.com" className="btn btn-lg btn-floating mx-2" style={{backgroundColor: '#54456b'}}>
  <i className="fab fa-facebook-f" />
</a>

问题2：点击图标尺寸持续变大的解决方法 #

• 在App.css中添加固定图标尺寸的规则，禁止点击时的默认形变：

.fab, .fas {
  font-size: 1.2rem !important;
  transition: none !important;
  transform: scale(1) !important;
}

• 调整footer的CSS规则，移除多余的位移属性，避免点击重绘时的尺寸计算异常：

#footer {
  position:absolute;
  bottom:0;
  width:100%;
  height: auto;
  left: 0;
  right: 0;
}

• 检查项目中是否引入了多个版本的Font Awesome，版本冲突会导致图标渲染异常，统一使用同一个版本的资源即可。

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