icoMoon官网 - Icon Font & SVG Icon Sets ❍ IcoMoon
图标下载
官网首页 - 顶部导航栏 - IcoMoon App
点击后进入图标选择界面
若从零开始选择图标
①点选自己需要的图标,选中的图标背景变白
②页面底部Selection后的括号内显示当前已选的图标数量
③icoMoon提供免费图标库与不同收费标准的图标库
④icoMoon支持从本地导入图标
⑤icoMoon支持导出svg与png格式图标
若需要更新已有图标
将本地icomoon文件夹中的selection .json文件拖入页面中淡紫色区域
页面提示:是否导入文件中的所有设置 可视实际情况进行选择 随后页面更新,显示
点选或反选相应图标以更新selection
完成图标选择,开始下载
点击Generate Font,等待界面跳转
①图标名称
②图标代码
③获取相应代码
点击后可看到相应的html和css代码
④删除图标
修改完成后,点击Download下载压缩包
下载后导入图标
将下载好的icoMoon安装包解压(这里偷懒用一下之前的图)
demo-files文件夹和demo.html用于演示,ReadMe.txt是说明文档,可以不加入项目
若从零开始引入图标
在前端项目下新建文件夹用于存放图标资源,将解压后文件夹里的.css文件加入css文件夹,将解压后文件夹里的fonts文件夹直接拖入assets里
此处示例为项目文件夹 -> src -> assets -> css和fonts。路径并不唯一,只要知道去哪里找就行。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等。
就很方便 就很好嗷