css中小标题前加图标

对于网页设计来说，小标题和列表项是非常重要的元素。通过使用CSS，我们可以很容易地在小标题前添加图标，以便更好的突出显示重要信息。下面是具体的实现方法：
首先，我们可以使用:before伪类选择器来添加图标。我们可以在CSS中定义一个类，比如"icon"，并为它设置样式。例如，如果我们想在小标题前添加一个放大镜图标，我们可以使用以下代码：

css
.icon:before {
  content: "f00e";
  font-family: FontAwesome;
  margin-right: 10px;
} 

这里的"f00e"表示使用FontAwesome字体的放大镜图标，通过设置字体的content属性，我们可以在小标题前插入这个图标。同时，为了使图标与小标题之间有一定距离，我们可以使用margin-right属性来设置右边距离。
接下来，我们可以在HTML标记中使用这个类来添加图标。例如，如果我们想在下面的小标题前添加图标，我们可以这样写：

html
<p class="icon">这是一个带图标的小标题</p> 

如此一来，就可以看到一个放大镜图标出现在小标题前面了。
除了使用FontAwesome字体，还可以使用其他的图片或者SVG图标来作为我们要插入的图标。例如，下面的代码可以插入一个名为"icon.svg"的SVG图标：

css
.icon:before {
  content: url(icon.svg);
  margin-right: 10px;
} 

需要注意的是，为了正确显示SVG图标，我们需要在SVG文件中inline图标，并且在CSS中设置正确的width和height属性。
最后，我们需要考虑兼容性问题。在使用CSS添加图标时，需要确保浏览器支持:before伪类选择器和content属性。而对于老版本的IE浏览器，不支持使用:before伪类选择器来添加图标。在这种情况下，我们可以考虑添加一个额外的元素来放置图标，然后通过CSS样式来控制它的位置。
以上就是使用CSS在小标题前添加图标的方法，希望对你有所帮助。