使用网页中的字体小图标

今天使用了一下字体小图标，先到https://icomoon.io/app/#/select下载所需图标

1.

2.

解压后将的目录如

将fonts文件拷贝到项目中，style.css中的样式可直接使用，也可以自己写

/*首先使用 @font-face 设置字体*/
@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?1fb1g1');
  src:  url('fonts/icomoon.eot?1fb1g1#iefix') format('embedded-opentype'),
    url('fonts/icomoon.ttf?1fb1g1') format('truetype'),
    url('fonts/icomoon.woff?1fb1g1') format('woff'),
    url('fonts/icomoon.svg?1fb1g1#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

　

/*在css中使用伪类 来使用字体小图标*/
<i class="icon-key"></i>
.icon-key:before {
  content: "e900";
}
/*在html中使用字体小图标*/
<i class="icon-key">&#xe900</i>

　　对图标颜色字体样式的设置和字体设置方式一样