[分享]css列表前面不同的图标

CSS列表中的图标可以为列表项添加视觉上的差异性，使得列表更易于阅读。下面我们介绍几种不同的方法来为列表项添加图标。/ 1. 使用列表项符号 / ul { liststyle: none; } li:...

CSS列表中的图标可以为列表项添加视觉上的差异性，使得列表更易于阅读。下面我们介绍几种不同的方法来为列表项添加图标。

/* 1. 使用列表项符号 */
ul {
  list-style: none;
}
li::before {
  content: '\2022';
  margin-right: 0.5em;
}

/* 2. 使用图片 */
ul {
  list-style: none;
}
li::before {
  content: url('bullet.png');
  margin-right: 0.5em;
}

/* 3. 使用字体图标 */
@font-face {
  font-family: 'MyIconFont';
  src: url('iconfont.woff2') format('woff2'),
       url('iconfont.woff') format('woff');
}
.icon::before {
  font-family: 'MyIconFont';
  content: '\EA01';
  margin-right: 0.5em;
}

/* 4. 使用SVG图标 */
ul {
  list-style: none;
}
li::before {
  content: '';
  display: block;
  width: 1em;
  height: 1em;
  background: url('arrow.svg') center no-repeat;
  margin-right: 0.5em;
} 

以上四种方法都可以实现列表项前面的图标，可根据具体需求选择适合的方式实现。