css字体图标使用方法

一、方法一

1. 准备好要生成字体图标的svg图片

2. 通过 https://icomoon.io/app/#/select 这个网站在线生成

3. 页面引用字体文件woff和style.css文件

二、方法二

1. 准备好要生成字体图标的svg图片

2. 将 svg 文件使用 svgo 压缩，去掉无用信息

npm i svgo -g
svgo -f ./svgs -o ./output  # svgs 是目标目录, output 是导出目录

3. 压缩后的 svg 文件检查最外层是否存在 fill=“#191919” 删除此处（不删除会导致设置颜色不生效的问题）

4. 使用 svg2iconfont 和之前所有的 svg 打包成编译成 iconfont 相关的文件

npm i svg2iconfont -g
svg2iconfont --name iconfont --input ./output --output ./font --format svg,ttf,woff2,woff,eot --prefix icon-

ps:

1. 目前大概率会安装失败，需要自己去网站下载；下载后在对应文件的根目录 npm link进行安装
2. 如果安装有类似报错File exists: C:\Users\xxxx\AppData\Roaming\npm\svg2iconfont.ps1需去自己的文件夹中删除对应文件重新安装
3. 安装完可 svg2iconfont --version 命令查看对应版本是否安装成功