CSS 字体图标下载与引用

一、字体图标下载地址

icomoon字库

Icon Font & SVG Icon Sets ❍ IcoMoonIcoMoon provides a package of vector icons, along with a free HTML5 app for making custom icon fonts or SVG sprites. Browse among thousands of pixel perfect icons or import your own vectors.https://icomoon.io/

 阿里iconfont字库iconfont-阿里巴巴矢量图标库iconfont-国内功能很强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造，设计和前端开发的便捷工具https://www.iconfont.cn/

二、下载与引用详细步骤

1、打开icomoon字库官网，点击右上角IcoMoon APP 按钮

2、选择需要生成的字体图标，点击右下角的Generate Font按钮 

3、点击右下角的Download按钮下载

4、解压下载好的.zip文件，将目录下的font文件放入项目文件夹下 

 5、在style标签中引入以下代码

@font-face {
    font-family: 'icomoon';
    src: url('fonts/icomoon.eot?kjtos1');
    src: url('fonts/icomoon.eot?kjtos1#iefix') format('embedded-opentype'),
        url('fonts/icomoon.ttf?kjtos1') format('truetype'),
        url('fonts/icomoon.woff?kjtos1') format('woff'),
        url('fonts/icomoon.svg?kjtos1#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

6、点击解压文件夹下demo.html文件

7、复制下图字符到需要引用的html文件下

 8、为css添加 font-family: 'icomoon';

9、效果图 

三、字体图标的追加

进行下图操作后，点击需要添加的图标，重复 二 中的 2~9步