今天使用了一下字体小图标，先到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>

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

版权声明：本文为D-not原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/D-not/p/5897271.html