请选择 进入手机版 | 继续访问电脑版

iconfont+开始支持彩色图标

发表于 2016-11-11 09:50 显示全部楼层 24 1995

本帖最后由 欧水萍 于 2016-11-11 14:41 编辑

iconfont+开始支持彩色图标

        之前发表过一篇关于iconfont图标字体的相关教程,以文字的方式,实现网页中的图标和特殊字符。教程链接可参考:http://bbs.520it.com/forum.php?mod=viewthread&tid=1950


        iconfont官网:http://www.iconfont.cn/plus


        前段时间去iconfont官网逛逛,发现iconfont已经升级iconfont+了,对比起之前的iconfont,iconfont+最大的特点是什么呢?iconfont+开始支持彩色图标了,对于此项新的改进,官网是如此介绍的:


symbol引用:


这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个svg的集合,与另外两种相比具有如下特点:


支持多色图标了,不再受单色限制。

通过一些技巧,支持像字体那样,通过font-size,color来调整样式。

兼容性较差,支持 ie9+,及现代浏览器。

浏览器渲染svg的性能一般,还不如png。


        这种全新的使用方式,据官网介绍说是做了一个svg的集合,SVG(Scalable Vector Graphics)可缩放矢量图形,SVG具有什么特点呢?


SVG特点:


1.任意放缩。(用户可以任意缩放图像显示,而不会破坏图像的清晰度、细节等。)

2.文本独立。(SVG图像中的文字独立于图像,文字保留可编辑和可搜寻的状态。也不会再有字体的限制,用户系统即使没有安装某一字体,也会看到和他们制作时完全相同的画面。)

3.较小文件。(总体来讲,SVG文件比那些GIF和JPEG格式的文件要小很多,因而下载也很快。)

4.超强显示效果。(SVG图像在屏幕上总是边缘清晰,它的清晰度适合任何屏幕分辨率和打印分辨率。)

5.超级颜色控制。(SVG图像提供一个1 600万种颜色的调色板,支持ICC颜色描述文件标准、RGB、线X填充、渐变和蒙版。)


        由于svg的格式优点是基于xml可扩展标记语言,是一个XML文件,而且SVG是被设计用于互联网,所以通过Javascript和DOM访问它就是最重要的应用模式。通过Javascript和DOM可以动态地修改HTML,同样也可以在浏览器中动态地创建、修改和删除图片。


因此在网页中使用svg与其他图像格式相比(比如 JPEG 和 GIF)的优势在于:


SVG 图像可通过文本编辑器来创建和修改

SVG 图像可被搜索、索引、脚本化或压缩

SVG 是可伸缩的

SVG 图像可在任何的分辨率下被高质量地打印

SVG 可在图像质量不下降的情况下被放大


而浏览器的支持情况,iconfont官网也有说明:

Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持内联 SVG。Internet Explorer 8或更早版本,可通过安装Adobe SVG Viewer以支持SVG。


        iconfont官网描述浏览器渲染svg的性能一般,还不如png,实测了一下做了几个彩色小icon,现代浏览器对svg渲染其实也相当不错了。而且iconfont平台也是推荐这种全新的使用方式,现在互联网技术迅猛发展,相信不久的将来这种使用方式会是未来的主流。


        介绍了那么多,那么来做个小案例体验一下。


        首先还是到iconfont官网,这次找几个彩色的图标:


blob.png


        网页导航栏多色图标库,点进去会发现很多多色图标库的集合:


blob.png


        找到对应的图标保存到项目后,去图标管理—我的项目里面,找到新添加的项目并下载到本地,下载下来解压后我们可以看到这些文件:


blob.png


        iconfont+除了全新的使用方式,传统的使用方式也进行了一些优化,详细可以参考demo文件:


        首先第一个demo文件打开是font-class引用


        font-class是unicode使用方式的一种变种,主要是解决unicode书写不直观,语意不明确的问题。


与unicode使用方式相比,具有如下特点:


兼容性良好,支持ie8+,及所有现代浏览器。

相比于unicode语意明确,书写更直观。可以很容易分辨这个icon是什么。

因为使用class来定义图标,所以当要替换图标时,只需要修改class里面的unicode引用。

不过因为本质上还是使用的字体,所以多色图标还是不支持的。


使用步骤如下:

(注意:为了浏览器更好的渲染,如果只使用单色图标,建议不要选择下载多色图标替代)


blob.png



第一步:引入项目下面生成的fontclass代码:


<link rel="stylesheet" type="text/css" href="./iconfont.css">

(这种方式是需要引入iconfont.css文件,同时还需要注意字体文件的摆放路径)


第二步:挑选相应图标并获取类名,应用于页面:


<i class="iconfont icon-xxx"></i>

实际情况中"iconfont"(font-family)需要修改为你项目下的font-family。可以通过编辑项目查看,默认是"iconfont"。


        iconfont.css源码其实也是通过@font-face规则声明字体,并引用字体文件,而字体编码则是通过伪元素的方法添加进html标签里面的,所以对于浏览器支持情况需要ie8+(下图为添加字体编码css样式)


blob.png


        这种使用方式需要注意的地方也都提过了,有兴趣的可以去亲自体验一下。


        最原始的的unicode使用方式的使用方法可参考上一个教程,教程链接:http://bbs.520it.com/forum.php?mod=viewthread&tid=1950


        现在来看一下全新的使用方式,symbol引用,其实这种方式使用起来也非常简单。打开demo_symbol.html文件可以看到详细的使用方法:


iconfont图标分别对应不同的类名:


blob.png



symbol引用:


使用步骤如下:


第一步:引入项目下面生成的symbol代码:

<script src="./iconfont.js"></script>

(首先需要引入iconfont.js文件,此js文件相当于是svg图形集合文件的调用)


第二步:加入通用css代码(引入一次就行)

<style type="text/css">

.icon {

   width: 1em; height: 1em;

   vertical-align: -0.15em;

   fill: currentColor;

   overflow: hidden;

}

</style>



第三步:挑选相应图标并获取类名,应用于页面:


<svg class="icon" aria-hidden="true">

  <use xlink:href="#icon-xxx"></use>

</svg>

        

实际情况中"iconfont"(font-family)需要修改为你项目下的font-family。可以通过编辑项目查看,默认是"iconfont"。



使用多色图标引用效果:

blob.png



        可以看到浏览器渲染还是挺不错的,有兴趣的可以自行体验一下,最后案例文件附上,使用的时候注意文件的摆放路径。


案例下载链接: http://pan.baidu.com/s/1bppAhYZ


(回复本帖子获取密码)


游客,如果您要查看本帖隐藏内容请回复


        想了解更多关于网页设计,UI设计和前端相关的技术,可以点击链接:


http://www.520it.com/special/ui




回复 使用道具
举报
scj麦子

发表于 2017-07-20 14:38 显示全部楼层

不错

回复 支持 反对 使用道具
举报
带墨镜的啾啾啾

发表于 2017-05-12 15:49 显示全部楼层

移动端教程还是web呢
回复 支持 反对 使用道具
举报
收起回复 展开
欧水萍 带墨镜的啾啾啾   发表于 03-08 16:55
都能用呀
寻找海蓝

发表于 2017-05-05 06:56 显示全部楼层

阿萨德撒大所多撒旦暗示的
回复 支持 反对 使用道具
举报
冷枫

发表于 2017-04-12 11:30 显示全部楼层

必须给个赞!
回复 支持 反对 使用道具
举报
杨楷

发表于 2017-02-09 08:20 显示全部楼层

回复 支持 反对 使用道具
举报
周牧

发表于 2017-02-09 05:34 显示全部楼层

无需回复的,我们保持沉默,如需回复的,就回21个字!

回复 支持 反对 使用道具
举报
青果园

发表于 2017-02-09 01:22 显示全部楼层

必须给个赞!

回复 支持 反对 使用道具
举报
益达月饼

发表于 2017-02-09 00:32 显示全部楼层

回复 支持 反对 使用道具
举报
我不想静静

发表于 2017-02-08 19:37 显示全部楼层

作为新人,在吧里不敢大声说话,也不敢得罪人,只能默默地顶完贴转身就走,不求深藏功与名,只求前排混脸熟

回复 支持 反对 使用道具
举报
123下一页

发表新文章
欧水萍

小码哥名师团队

0

学分

1805

学币

1976

积分

小码哥名师团队

Rank: 5Rank: 5

积分
1976
Ta的主页 发消息
精华帖排行榜

精彩推荐

  • 关注小码哥教育