Font Awesome图标显示呈椭圆形、居中错位该如何修复

问题原因 #

1. FontAwesome默认的.fa元素为行内元素，你设置的width属性不会生效，同时行内元素的上下padding计算规则和块级元素不同，导致元素实际渲染的宽高不一致，配合border-radius:50%就会显示为蛋形。
2. 你同时设置了padding:20px和width:50px，在默认content-box盒模型下，元素总宽度为50px + 20px*2 = 90px，总高度为30px（字体大小） + 20px*2 =70px，宽高不一致进一步加剧了椭圆效果。
3. 行内元素的居中规则无法保证图标在你设定的区域内垂直、水平都完全居中。

修复方案 #

你只需要修改.fa相关的CSS属性即可，HTML代码无需调整，修改后的完整CSS如下：

footer{
    color: #fff;
    background-color: #313131;
    padding: 20px;
}
footer .fa {
    /* 新增：设置为行内弹性盒，让宽高属性生效，同时方便内部元素居中 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 移除原padding属性，避免和宽高设置冲突 */
    font-size: 30px;
    /* 宽高设置为相同值，配合border-radius生成正圆形 */
    width: 70px;
    height: 70px;
    text-decoration: none;
    background: #313131;
    color: #fff;
    transition: ease-in 0.3s;
    border-radius: 50%;
    /* 可选：添加右侧边距，避免多个图标紧挨在一起 */
    margin-right: 10px;
}

.fa:hover {
    background: #fff;
    color: #313131;
}
#copyright{
    float: right;
    /* 可选：调整行高让版权文本和左侧图标垂直对齐 */
    line-height: 70px;
    margin: 0;
}

修改后即可得到正圆形的图标，且图标本身在圆形区域内完全居中，悬停切换效果也可以正常触发。

内容的提问来源于stack exchange，提问作者Anđelo Motika