Html 添加图标按钮？请帮帮我

我的代码noob:(

我想在每个按钮中添加一个图标，如果你必须更改任何类，没问题。我正在学习HTML CSS，我在这里迷路了。谢谢

例如：

。社交共享{
显示：块；
位置：绝对位置；
宽度：100%；
左：0；
底部：0；
}
.社交分享ul.菜单-社交{
列表样式：无；
文本对齐：居中；
保证金：0；
填充：0；
显示：-网络工具包盒；
显示：-webkit flex；
显示：-ms flexbox；
显示器：flex；
-webkit柔性包装：nowrap；
-ms flex wrap:nowrapwrap；
柔性包装：nowrap；
}
.社交分享ul.菜单-社交li.电话{
flex:1自动；
背景色：#3d3D；
}
.社交分享ul.菜单-社交li.下一步{
flex:1自动；
背景色：#3d3d；
}
.社交分享ul.菜单-社交li a{
显示：块；
颜色：#fff；
文字装饰：无；
宽度：100%；
身高：100%；
线高：40px；
}

在链接中添加svg图像（好的解决方案）

或者添加伪元素并将图像放入其中

a {position: relative; padding-left: 80px; padding-right: 40px;}
a:before {position: absolute; left: 40px; top: 20px; width: 40px; height: 40px; background: url(......) 50% 50% no-repeat; background-size: contain;}

---

欢迎使用Stack Overflow！希望您至少尝试自己编写此代码。我建议您通过谷歌或通过搜索进行一些尝试。如果您仍然有问题，请返回代码并解释您所做的尝试。

a {padding-left: 80px; padding-right: 40px; background-image: url(....); background-position: 40px center; background-size: 40px 40px; background-size: contain; background-repeat: no-repeat}

a {position: relative; padding-left: 80px; padding-right: 40px;}
a:before {position: absolute; left: 40px; top: 20px; width: 40px; height: 40px; background: url(......) 50% 50% no-repeat; background-size: contain;}