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

1、iconMoon 是什么?

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

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

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

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

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

  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: ‘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解析为“多色(彩色)”。由于字体字形只能有一种颜色,因此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>

  

以上。

原文地址:https://www.cnblogs.com/kevinCoder/p/11324470.html

时间: 2024-10-18 02:36:55

iconMoon:字体图标(iconfont)解决方案及使用教程的相关文章

WPF自定义控件与样式(1)-矢量字体图标(iconfont)

一.图标字体 图标字体在网页开发上运用非常广泛,具体可以网络搜索了解,网页上的运用有很多例子,如Bootstrap.但在C/S程序中使用还不多,字体图标其实就是把矢量图形打包到字体文件里,就像使用一般外置字体一样的使用,因此Winform.WPF中都是可以用的. 在我们多个WPF项目中广泛使用了图标字体,包括自定义控件.自定义样式.模板等.总结下: 网上开源字体图标很多,很容易获取,项目开发中需要的绝大部分图标都可以找到,非常方便,推荐 阿里巴巴开源字体: 字体文件非常小,比使用png等图片文件

字体图标--iconfont

在写页面的时候,不可避免需要用到好多小图标,可以让UI切图,但是这些切好的小图片在小屏手机上显示比较清晰,可能放到大屏上会有清晰度稍微下降的问题,这个问题可以用阿里巴巴矢量图标--iconfont 来完美解决(https://www.iconfont.cn/),因为iconfont的图标是矢量的,不会出现变形和清晰度下降问题,而且后期操作性灵活,可以改图标的大小,颜色就像操作字体的属性一样方便,下面就开始介绍 iconfont如何使用 一.根据上面的网址进入阿里巴巴矢量图标库.注册一个账号,登录

UWP 矢量字体图标(iconfont)使用

本文使用 阿里巴巴开源字体: 选择矢量字体图标: 查看或编辑 Unicode编码 或字体名称 下载到本地,添加到uwp项目 代码中写法 Text:Unicode编码 FontFamily:文件路径#字体名称 效果图: 参考资料 http://www.alessiosimoni.com/custom-fonts-in-windows-10-uwp/ http://www.cnblogs.com/anding/p/4961215.html

react-native中使用自定义的字体图标iconfont

iconfont图标库下载 可在 http://www.iconfont.cn 下载 下载完成后的目录中有字体文件: iconfont.ttf 拷贝字体文件 Android: 在 Android/app/src/main 目录下新建文件夹 assets/fonts/然后将iconfont.ttf文件拷贝到assets/fonts/目录下 使用 在下载的字体文件夹中有demo_unicode.html文件打开文件,在界面有显示图标以及对应的unicode码值,如 在Text标签中使用  并设置s

字体图标 iconfont cssfont

  https://icomoon.io/ 图标下载网址  也可以在ai  ps 中制作 font css @font-face { font-family: 'icomoon'; src:url('fonts/icomoon.eot?o31kxg'); src:url('fonts/icomoon.eot?o31kxg#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?o31kxg') format('truetype'),

字体图标的用法

第一次听说字体图标--iconfont,感觉是:哇,好高大上的样子,会不会很难啊.然而当真正去用的时候,才发现,网上的字体图标库为我们做了太多工作,我们只需要傻瓜式的挑选自己需要的图标,傻瓜式的复制粘贴就可以将各种的小图标以字体的方式加入到我们的页面中了. 本文为大家讲述的是如何使用阿里巴巴字体图标库: 第一步:在百度或其他搜索引擎中搜索"iconfont",如果是百度的话,应该第一条搜索结果就是"Iconfont-阿里巴巴矢量图标库". 第二步:点击进入"

如何使用iconfont字体图标代替网页图片?

一.IconFont的优点 1.轻量性 可以减少http请求,可以配合html5离线存储做性能优化,有利于后期维护. 2.灵活性 可以自由变换IconFont大小(不失真),可以修改IconFont颜色,可以添加阴影,旋转,透明度等视觉效果. 3.兼容性 图标字体IconFont支持所有现代浏览器,包括IE低版本. 二.IconFont的缺点 1.图标字体只能被渲染成单色或者css3的渐变色: 2.设计自已的IconFont需要花费大量时间,也会增加前端重构的成本: 3.Firefox和IE9不

iconfont字体图标的使用方法--超简单!

我之前因为项目用bootstrap比较多,所以使用font awesome字体图标比较多,后来接触到了iconfont,发现想要的什么图标都有,还可以自定义图标,非常强大!之前看了一波教程,觉得繁琐,自己弄明白后感觉如此简单,做了这么个简单教程,直接上图,简单粗暴,避免新手走弯路,这里讲解的默认是元素使用类名; step 1:百度iconfont,找到阿里巴巴矢量图标库官网,然后注册登录,或者用github登录也行,此步骤跳过; step 2:找到图标管理->我的项目->然后新建项目: 右边点

小程序入坑(一)---如何引入iconfont 字体图标

最近一直忙于日常任务,其实是懒癌又犯了..........不过因为自己的"懒癌","不思进取"给自己挖了不少坑. 一,小程序工具的安装 打开简易小程序的官网https://mp.weixin.qq.com/debug/wxadoc/dev/,,点击 导航栏里的"工具"->点击"微信开发者工具",如图: 进入下载开发工具页面,然后根据自己的电脑配置选择相应的压缩包. 二.创建一个自己的项目 1.安装好"微信开发工