iconMoon:字体图标(iconfont)解决方案及使用教程

摘要:
由于字体字形只能有一种颜色,因此IcoMoon必

1、iconMoon 是什么?

字体图标(icon font)解决方案,iconMoon 可以把svg图片生成字体图标,开发者可以通过设置字体大小和字体颜色来改变图标的大小和颜色而不失真

2、官网地址:https://icomoon.io

iconMoon:字体图标(iconfont)解决方案及使用教程第1张

3、点击右上角的【iconMoon App】 进入图标上传、选择和生成页面

iconMoon:字体图标(iconfont)解决方案及使用教程第2张

4、图标上传、选择和生成页面

4.1 把准备好的svg文件,通过【import Icons】入口或直接将svg文件拖至该页面,上传成功后,如下图所示:

iconMoon:字体图标(iconfont)解决方案及使用教程第3张

4.2 选中要生成字体文件的图标

点击图标,选中要生成的图标;选中后图标会呈现高亮状态;如下图所示:

iconMoon:字体图标(iconfont)解决方案及使用教程第4张

4.3 点击右下角【Generate Font】生成字体图标文件和demo

iconMoon:字体图标(iconfont)解决方案及使用教程第5张

4.4 生成预览

iconMoon:字体图标(iconfont)解决方案及使用教程第6张

此时,可以选中className 进行修改

iconMoon:字体图标(iconfont)解决方案及使用教程第7张

修改后

iconMoon:字体图标(iconfont)解决方案及使用教程第8张

5、 点击右下角的【download】进行生成、下载

iconMoon:字体图标(iconfont)解决方案及使用教程第9张

解压并打开下载好的文件,看到如下目录结构:

iconMoon:字体图标(iconfont)解决方案及使用教程第10张

注:

fonts文件:需要放到项目静态资源目录

selection.json文件:

下次需要修改图标的时候,需要用到;把selection.json文件导入至iconMoon即可获取当前已有的图标;

类似历史记录,对字体图标的维护非常重要,需妥善保存;每次修改都要更新该文件

iconMoon:字体图标(iconfont)解决方案及使用教程第11张

在截图页面(https://icomoon.io/app/#/select),将selection.json文件拖进来即可看到已有图标集合

style.css文件:字体图标对应的css文件

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

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-comment:before {
  content: "e904";
}
.icon-like .path1:before {
  content: "e918";
  color: rgb(61, 133, 247);
}
.icon-like .path2:before {
  content: "e91b";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}
.icon-tip .path1:before {
  content: "e919";
  color: rgb(61, 133, 247);
}
.icon-tip .path2:before {
  content: "e91c";
  margin-left: -1em;
  color: rgb(61, 133, 247);
}
.icon-tip .path3:before {
  content: "e91d";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}
.icon-tip .path4:before {
  content: "e91e";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}
.icon-tip .path5:before {
  content: "e91f";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}
.icon-tip .path6:before {
  content: "e920";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}
.icon-tip .path7:before {
  content: "e921";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}
.icon-news .path1:before {
  content: "e91a";
  color: rgb(61, 133, 247);
}
.icon-news .path2:before {
  content: "e922";
  margin-left: -1em;
  color: rgb(61, 133, 247);
}
.icon-news .path3:before {
  content: "e923";
  margin-left: -1em;
  color: rgb(61, 133, 247);
}
.icon-news .path4:before {
  content: "e924";
  margin-left: -1em;
  color: rgb(61, 133, 247);
}
.icon-news .path5:before {
  content: "e925";
  margin-left: -1em;
  color: rgb(61, 133, 247);
}
.icon-news .path6:before {
  content: "e926";
  margin-left: -1em;
  color: rgb(61, 133, 247);
}
.icon-news .path7:before {
  content: "e927";
  margin-left: -1em;
  color: rgb(61, 133, 247);
}
.icon-news .path8:before {
  content: "e928";
  margin-left: -1em;
  color: rgb(61, 133, 247);
}
.icon-news .path9:before {
  content: "e929";
  margin-left: -1em;
  color: rgb(61, 133, 247);
}
.icon-news .path10:before {
  content: "e92a";
  margin-left: -1em;
  color: rgb(61, 133, 247);
}
.icon-news .path11:before {
  content: "e92b";
  margin-left: -1em;
  color: rgb(61, 133, 247);
}
.icon-news .path12:before {
  content: "e92c";
  margin-left: -1em;
  color: rgb(255, 255, 255);
}

需要注意的是,截图中所示的.path*对应的class

iconMoon:字体图标(iconfont)解决方案及使用教程第12张

这是因为:图标被iconMoon解析为“多色(彩色)”。由于字体字形只能有一种颜色,因此IcoMoon必须使用多个路径(path)来显示多色(彩色)图标。

这也是IcoMoon优于iconfont(阿里字体图标方案)的地方;iconfont不支持多色图标的展示。

这些path在html中引用的时候也有要求:path路径之间不允许换行和空格!

引用方式如下:

<i class="icomoon icon-tip"><span class="path1"></span><span class="path2"></span><span class="path3"></span><span class="path4"></span><span class="path5"></span><span class="path6"></span><span class="path7"></span></icon>

以上。

免责声明:文章转载自《iconMoon:字体图标(iconfont)解决方案及使用教程》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇VSCode插件MSSQL教程(昨天提了一下)CSS3 渐变(Gradients)下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

css多栏自适应布局

css多栏自适应布局还是需要总结一下的,都是基本功。 一般使用position属性布局,或者用float属性布局,也可以使用display属性。 看资料说position适合首页布局,因为首页内容往往可以完全控制。float适合模板布局,模板中填充的内容无法控制。 一、左侧尺寸固定右侧自适应 1、浮动实现 在css浮动一文已介绍过。 .left{...

浏览器默认样式

浏览器默认样式(user agent stylesheet)+cssreset 每种浏览器都有一套默认的样式表,即user agent stylesheet,在写网页时,没有指定的样式,按浏览器内置的样式表来渲染。这是合理的,像word中也有一些预留样式,可以让我们的排版更美观整齐。不同浏览器甚至同一浏览器不同版本的默认样式是不同的。这才带来了很多的坑,让...

制作B站直播简介

本文只用于个人总结备份,如果对你有帮助就更好了。 准备工作 准备好简介要用的的背景图、头像图,上传到图床生成图片链接。 简介的内容可分为主播简介、直播时间、直播内容、联系方式,内容根据实际需要修改,需要换行的用“<br>”隔开。 注:可在B站发一条有图片的动态,然后用图片的链接(原本是上传到博客园,但博客园有防盗链用不了)。 基础代码 准备...

asp.net 生成静态页 自动分页

template.html 代码 <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xh...

博客园样式美化(背景图片、公告栏头像、看板娘、鼠标特效、网易云音乐)

一、博客园样式美化 1、功能: 背景图片 公告栏头像 看板娘 鼠标特效 音乐插件 二、博客园设置步骤 1、准备工作 (1)、进博客园管理-设置页面使用如下皮肤。 (2)、申请公告栏JS权限,博客侧边栏公告(支持HTML代码)处点击申请, 理由可以写,制作个人风格博客等。审批很快的。 (3)、打开公告栏,进博客园管理-选项页面勾选公告。本人就放入了一个头像...

web打印,web打印控件的三种实现方法

做管理系统的时候,打印一直是个棘手的问题,做B/S的系统这个问题就更加突出了!下面举出三种常用的web打印处理方式1、利用word或者excel来实现web打印(如果不修改ie设置,可以在web服务器端生成xls文件,然后通过xlBook = xls.Workbooks.Open(remotePath) 获取对象打印)   实现过程:先将需要打印的数据导入...