css控制文字前的小图标具体写法

CSS可以通过以下方式为文字前的小图标设置样式：

1. 使用伪元素before或after
   可以使用伪元素before或after在元素的内容前或后添加小图标，并通过CSS样式来控制该小图标的样式。为了将伪元素作为元素的内容添加到页面上，需要为伪元素设置content属性，并为伪元素设置display属性以使其显示出来。以下是一个基本的示例代码：

/* 在文字前添加一个字体图标 */
.icon:before {
  content: "\f013"; /* 字体图标Unicode编码 */
  font-family: FontAwesome; /* 字体名称 */
  font-size: 20px; /* 字体大小 */
  margin-right: 10px; /* 图标和文字间距 */
}

这里使用了FontAwesome字体图标库中的一个字体图标，并且将字体大小设置为20px，右侧和文字之间留出10px的空间。

1. 使用background-image
   另一种方式是使用CSS的background-image属性为文字前添加小图标。在这种情况下，需要设置元素的background-image属性，并调整background-position属性以使图标正确地对齐。以下是一个示例代码：

/* 在文字前添加一个图标 */
.icon {
  background-image: url('path/to/icon.png'); /* 图标的路径 */
  background-repeat: no-repeat; /* 禁止图标重复 */
  background-size: 16px; /* 图标大小 */
  background-position: left center; /* 图标定位 */
  padding-left: 20px; /* 图标和文字间距 */
}

这里使用了一个图标文件，并将其大小设置为16px。使用background-position属性将图标位置设置为左侧并居中对齐，然后在图标和文字之间留出20px的空间。

以上两种方法都可以实现在文字前添加小图标的效果，具体选用哪种方法取决于个人偏好和具体需求。