1、什么是iconMoon？
字体图标(icon font )解决方案，iconMoon可以将svg图像转换为字体图标，开发者可以通过设置字体大小和字体颜色来改变图标的大小和颜色而不失真
2、官方网站地址： https://icomoon.io
3、点击右上角的【iconMoon App】，进入上传、选择图标、生成页面
4、上传、选择图标、生成页面
4.1将准备好的svg文件从【import Icons】的入口或直接拖到此页面，上传成功后，如下图所示。
4.2选中生成字体文件图标
图标选择要生成的图标； 选择后，图标将高亮显示。 如下图所示。
4.3点击右下角的【Generate Font】生成字体图标文件和demo
4.4生成预览
此时，可以选择className进行更改
修正后
5、点击右下角的【download】生成、下载
解压缩并打开下载的文件时，将显示以下目录结构：
注：
fonts文件:必须位于项目的静态资源目录中
selection.json文件：
下次需要修改图标的时候，需要使用； 可以通过将selection.json文件导入iconMoon来获取当前现有图标。
像历史记录一样，字体图标的维护非常重要，需要妥善保存； 每次修改时都更新文件
截图页面https://icomoon.io/app/#/select (在中，拖动selection.json文件可显示现有图标集
style.css文件：与字体图标相对应的css文件
@ font-face { font-family : ' ico moon '； SRC:URL(fonts/icomoon.EOT？ 9f7p7u '； SRC:URL(fonts/icomoon.EOT？ 9f7p7u#iefix ' ) format (嵌入式- opentype )、URL ) fonts/icomoon.TTF？ 9f7p7u ' ) format('truetype '，url('fonts/icomoon.woff？ 9f7p7u ' ) format(woff )、URL ) fonts/icomoon.SVG？ 9f7p7u#icomoon ' )格式(SVG )； 字体权重：正规； 字体样式： normal； }[class^='icon-']，[class*=' icon-'] { /* use！ importanttopreventissueswithbrowserextensionsthatchangefonts */font-family : ' ico moon '！ 导入； 速度： none； 字体样式： normal； 字体权重：正规； 字体变量： normal； text-transform: none； 行高： 1；/* betterfontrendering===========-WebKit-font-smoothing 3360 antialiased； - moz-OS x-font-smoothing : gray scale； }.icon-comment 3360 before { content : 'e904 '； }.icon-like.path 1: before { content : 'e918 '； color : RGB (61，133，247； }.icon-like.path 2: before { content : 'e91b '； 边距左：-1em； color:RGB65255、255和255； }.icon-tip.path 1: before { content : 'e919 '； color : RGB (61，133，247； }.icon-tip.path 2: before { content : 'e91c '； 边距左：-1em； color : RGB (61，133，247； }.icon-tip.path : before { content : 'e91d '； 边距左：-1em； color:RGB65255、255和255； }.icon-tip.path 4: before { content : 'e91e '； 边距左：-1em； color:RGB65255、255和255； }.icon-tip.path 5: before { content : 'e91f '； 边距左：-1em； color:RGB65255、255和255； }.icon-tip.path 63360 before { content : 'e920 '； 边距左：-1em； color:RGB65255、255和255； }.icon-tip.path 7: before { content : 'e921 '； 边距左：-1em； color:RGB65255、255和255； }.icon-news.path 1: before { content : 'e91a '； color : RGB (61，133，247； }.icon-news.path 2: before { content : 'e922 '； 边距左：-1em； color : RGB (61，133，247； }.icon-news.path : before { content : 'e923 '； 边距左：-1em； color : RGB (61，133，247； }.icon-news.path 4: before { content : 'e924 '； 边距左：-1em； color : RGB (61，133，247； }.icon-news.path 5: before { content : 'e925 '； 边距左：-1em； color : RGB (61，133，247； }.icon-news.path 63360 before { content : 'e926 '； 边距左：-1em； color : RGB (61，133，247； }.icon-news.path 7: before { content : 'e927 '； 边距左：-1em； color : RGB (61，133，247； }.icon-news.path 8: before { content : 'e928 '； 边距左：-1em； color : RGB (61，133，247； }.icon-news.path 9: before { content : 'e929 '； 边距左：-1em； color : RGB (61，133，247； }.icon-news.path 10: before { content : 'e92a '； 边距左：-1em； color : RGB (61，133，247； }.icon-news.path 11: before { content : 'e92b '； 边距左：-1em； color : RGB (61，133，247； }.icon-news.path 12: before { content : 'e92c '； 边距左：-1em； color:RGB65255、255和255； }
请注意屏幕快照中显示的与. path*相对应的类
这是因为iconMoon将图标解析为“多色(彩色)”。 由于字体字形只能使用一种颜色，因此IcoMoon必须使用多条路径显示多色(颜色)图标。
这也是IcoMoon优于iconfont (蚂蚁字体图标方案)的地方，iconfont不支持多色图标的展示。
在html中引用时也需要这些path。 不允许路径之间的换行符和空格。
引用方法如下。
iclass=' icomoonicon-tip ' span class=' path1'/span span class=' path2'/span span class=' path3'/span span class
到此为止。
转载于：https://www.cnblogs.com/舒适冬瓜/p/11324470.html