Html 左对齐文本图标的CSS不起作用

我正在尝试制作一个简单的网站编辑器，我想制作一个左对齐图标，例如：

因为我找不到我喜欢的SVG，也不能使用PNG（请使用矢量），所以我想用HTML制作自己的SVG

我试过：

div#格式控件div#文本对齐控件div.text-align-control
{
宽度：24px；
高度：24px；
底部：0px；
最大宽度：10%；
最大高度：100%；
显示：内联块；
}
div#格式控件div#文本对齐控件div.text-align-control span
{
宽度：100%；
高度：计算（100%/8）；
填充：0px；
显示：内联块；
颜色：黑色；
背景：黑色；
}

---

根据评论，您可以使用建议站点的图标。 但如果您仍然想使用CSS创建左对齐图标，请按如下所示修改CSS

div#格式控件div#文本对齐控件div.text-align-control
{
宽度：24px；
高度：24px；
底部：0px；
最大宽度：10%；
最大高度：100%；
显示：内联块；
}
div#格式控件div#文本对齐控件div.text-align-control span
{
宽度：100%；
高度：计算（100%/8）；
填充：0px；
显示：块；
利润底部：3倍；
颜色：黑色；
背景：黑色；
}
div#格式控件div#文本对齐控件div.text-align-control span:类型的最后一个{
保证金：0；
}
div#格式控件div#文本对齐控件div.text-align-control范围：第n个子项（2n）{
宽度：80%；
}
div#格式控件div#文本对齐控件div.text-align-control.selected{
背景：E8F0FE；
填充：10px；
边界半径：3px；
}
div#格式控件div#文本对齐控件div.text-align-control.selected span{
背景：#1A73E8；
}

对于选定状态，请检查图标下面的html和额外css

对于一个简单的图标，您使用了大量的代码。它可以用一个元素和几行CSS来完成

。图标{
宽度：24px；
高度：24px；
显示：内联块；
边框：10px实心透明；
背景：
线性渐变（currentColor 0）0，
线性梯度（currentColor 0 0）var（-p，0）calc（100%/3），
线性渐变（currentColor 0）0计算（2*100%/3），
线性梯度（currentColor 0 0）var（-p，0）100%；
背景尺寸：100%3px，75%3px；
背景重复：无重复；
}
.对{--p:100%；}
.center{--p:50%；}
.full{背景大小：100%3px；}
.active{color:#1A73E8；背景色：#E8F0FE}

它们是SVG吗？（可以调整很多大小，并且不会失去质量）建议使用svg图标，图标是使用css创建的。需要添加字体可怕的css库，然后你可以使用图标。谢谢。这正是我要找的。你怎么能把选定图标的边缘弄圆？@LuisAFK，通过添加一个边框半径？