在CSS中更改样式列表中的项目符号

问题描述

我正在尝试通过<ul>实现这种风格：

我在CSS中使用了list-style-image，但是，我能够在图像后对齐文本。我怎样才能做到这一点？这是当前输出的图片：

这是我的代码：

#engineering-features {
  li {
    list-style-image: url(../img/engineering/li.png);
    font-size: 1.2rem;
  }
}

Stack Overflow中有a similar question，该问题中最受欢迎的解决方案无法解决我的问题。

解决方法

使用一些填充和行高： 更改我的值以适合您的布局。

li {
    list-style-image: url(../img/engineering/li.png);
    font-size: 1.2rem;
    padding-left: 30px;
    line-height: 31px;
  }