Html 将包含svg的li与其他包含字体图标的li对齐

FontAwesome缺少一个图标，因此我不得不退回到使用svg

因为
li
是内联项，所以将它们垂直居中，并将
a
作为块元素，因为高度-宽度对内联元素不起作用

.icons {
    >li {
        display: inline-block;
        padding: 0;
        vertical-align:middle; /*** added this ***/

        >a, svg {
            height: 50px;
            width: 50px;
            line-height: 50px;
            font-size: 1.8em;
            text-align: center;
            border-radius: 50%;
            color: rgba(255, 255, 255, 0.8);
            box-shadow: 0 0px 2px rgba(255, 255, 255, 0.56);
            display:block;    /*** added this ***/
        }
        
        .fab {
            background-color: black;
        }
    }
}



编辑：在@TemaniAfif注释之后

虽然上述解决方案也有效，但我同意Temani afif的观点，即我们可以将
垂直对齐：top
赋予
svg
，因为它也是一个内联元素，可以从
中删除显示块

.icons {
    >li {
        display: inline-block;
        padding: 0;
        vertical-align:middle;

        >a, svg {
            height: 50px;
            width: 50px;
            line-height: 50px;
            font-size: 1.8em;
            text-align: center;
            border-radius: 50%;
            color: rgba(255, 255, 255, 0.8);
            box-shadow: 0 0px 2px rgba(255, 255, 255, 0.56);
         
            svg{
              vertical-align:top;
            }
        }
        
        
        
        .fab {
            background-color: black;
        }
    }
}

您只需使用
display:flex
到
ul.图标

ul.icons.other{display:flex；}
哇，我不知道垂直对齐是件好事！谢谢现在你知道了秘密；p不需要display:block，因为font awesome已经添加了内联块，但是里面的SVG可能也需要
垂直对齐：top
，以避免额外的空白below@TemaniAfif更新。
.icons {
    >li {
        display: inline-block;
        padding: 0;
        vertical-align:middle;

        >a, svg {
            height: 50px;
            width: 50px;
            line-height: 50px;
            font-size: 1.8em;
            text-align: center;
            border-radius: 50%;
            color: rgba(255, 255, 255, 0.8);
            box-shadow: 0 0px 2px rgba(255, 255, 255, 0.56);
         
            svg{
              vertical-align:top;
            }
        }
        
        
        
        .fab {
            background-color: black;
        }
    }
}