icoMoon官网 - Icon Font & SVG Icon Sets ❍ IcoMoon
图标下载
官网首页导航栏
官网首页 - 顶部导航栏 - IcoMoon App
点击后进入图标选择界面
若从零开始选择图标
图标选择页面
①点选自己需要的图标，选中的图标背景变白
②页面底部Selection后的括号内显示当前已选的图标数量
③icoMoon提供免费图标库与不同收费标准的图标库
④icoMoon支持从本地导入图标
⑤icoMoon支持导出svg与png格式图标
若需要更新已有图标
已有的icomoon文件夹
将本地icomoon文件夹中的selection .json文件拖入页面中淡紫色区域
页面提示
页面提示：是否导入文件中的所有设置 可视实际情况进行选择 随后页面更新，显示
点选或反选相应图标以更新selection
完成图标选择，开始下载
点击Generate Font开始下载
点击Generate Font，等待界面跳转
跳转后页面（以选择apache图标为例）
①图标名称
②图标代码
③获取相应代码
点击后可看到相应的html和css代码
点击Get Code后弹出相应代码
④删除图标
修改完成后，点击Download下载压缩包
点击页面底部Download开始下载
下载后导入图标
将下载好的icoMoon安装包解压（这里偷懒用一下之前的图）
解压后的icomoon文件夹内容
demo-files文件夹和demo.html用于演示，ReadMe.txt是说明文档，可以不加入项目
若从零开始引入图标
在前端项目下新建文件夹用于存放图标资源，将解压后文件夹里的.css文件加入css文件夹，将解压后文件夹里的fonts文件夹直接拖入assets里
项目文件夹部署
此处示例为项目文件夹 -> src -> assets -> css和fonts。路径并不唯一，只要知道去哪里找就行。css文件也重命名过，只要知道怎么引用就行。
.css文件
.css文件内容
重点：
- font-family: 这里可以自己修改名称，不过在后续引入时要注意保持font-family名称一致
- url：根据文件位置更改url
若需要更新或引入新图标
用解压后文件夹里的各文件替换项目中已有文件，注意.css文件名称、font-family和url推荐和原有内容保持一致。
引入图标（以apache图标为例）
引入所需代码
将相应代码粘贴到相应位置
注意：css部分必须要加上:before或:after以保证图标正常显示
font与svg、png区别（个人理解）
通过Generate Font下载的图标本质上是字体而非图片，反映在css部分就是对字体可以做的操作都可以对图标做，比如设置height、width、color等。
就很方便 就很好嗷
网友评论