If you understand the iconfont, then you must make an update on the iconfont interest. Yes, iconfont now been upgraded to iconfont +, and we are looking forward to support full-color icon.
Before, we all realized in a Web page icon in the form of text and special characters, and now, with the new full-color icons must better reflect the
symbol Quote:
This is a new use, it should be said that this is the future mainstream, but also the platform currently recommended usage. Related presentations can refer to this article This usage is actually a collection made svg has the following characteristics compared with the other two:
support for full-color icons, and no longer subject to restrictions monochrome.
By some techniques, like fonts that support by font-size, color adjust style.
Poor compatibility, support ie9 +, and modern browsers.
Svg browser rendering performance in general, not as good as png.
This new use, according to the official website, said the collection is made of a svg, SVG (Scalable Vector Graphics) scalable vector graphics, SVG has what features it?
SVG features:
1. Any scaling. (The user can arbitrarily scale the displayed image, without damaging the sharpness of the image, details, etc.)
2. Text independence. (SVG text in the image separately from the image, the text retains editable and searchable state will no longer have to limit the font, the user's system even if a font is not installed, will see exactly the same time and they produced pictures .)
3. Smaller file. (In general, SVG files to be much smaller than those files GIF and JPEG formats, so download quickly.)
4. Super display. (SVG image on the screen is always sharp edges, it's suitable for any screen resolution and clarity of print resolution.)
5. Super color control. (SVG image providing a palette of 1,600 million colors, the standard support ICC color profile, RGB, X line fill, gradients and masks.)
Because the format is based on the advantages svg xml Extensible Markup Language, is an XML file, and SVG is designed for the Internet, so access to it is the most important application mode Javascript and DOM. Can be dynamically modified by Javascript and DOM HTML, you can also dynamically create in the browser, modify, and delete pictures.
Therefore, the advantages of using svg page compared with other image formats (such as JPEG and GIF) that:
SVG images can be created and modified using a text editor,
SVG images can be searched, indexed, scripted or compressed
SVG is scalable
SVG images can be high-quality printing at any resolution
SVG can be amplified in the case where the image quality does not decline
while browsing support case's, iconfont official website also has instructions:
Internet Explorer 9, Firefox, Opera, Chrome and Safari support inline SVG. Internet Explorer 8 or earlier, you can support the SVG by installing Adobe SVG Viewer.
iconfont official website describes the browser rendering performance svg general, not as png, observed a moment to do a few small colored icon, modern browsers to render svg actually quite good. And iconfont platform is also recommended to use this new way, and now the rapid development of Internet technology, I believe that in the near future this will be the future use of the mainstream.
Introduced so many, so do a little case experience.
First is to iconfont official website, this time to find a few colored icons: 
page full-color navigation icon library, the collection will find a lot of points into full color icon library: 
find the corresponding icon to save the project, go to the icon management - my items inside, find the newly added items and downloaded to the local, unzip the downloaded we can see these files:
iconfont+除了全新的使用方式，传统的使用方式也进行了一些优化，详细可以参考demo文件：
首先第一个demo文件打开是font-class引用
font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。
与unicode使用方式相比，具有如下特点：
兼容性良好，支持ie8+，及所有现代浏览器。
相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。
因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。
不过因为本质上还是使用的字体，所以全彩图标还是不支持的。
使用步骤如下：
（注意:为了浏览器更好的渲染，如果只使用单彩图标，建议不要选择下载多彩图标替代）
第一步：引入项目下面生成的fontclass代码：
<link rel="stylesheet" type="text/css" href="./iconfont.css">
(这种方式是需要引入iconfont.css文件，同时还需要注意字体文件的摆放路径)
第二步：挑选相应图标并获取类名，应用于页面：
<i class="iconfont icon-xxx"></i>iconfont.css源码其实也是通过@font-face规则声明字体，并引用字体文件，而字体编码则是通过伪元素的方法添加进html标签里面的，所以对于浏览器支持情况需要ie8+（下图为添加字体编码css样式）
br/>实际情况中"iconfont"（font-family）需要修改为你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。
iconfont.css源码其实也是通过@font-face规则声明字体，并引用字体文件，而字体编码则是通过伪元素的方法添加进html标签里面的，所以对于浏览器支持情况需要ie8+（下图为添加字体编码css样式）
这种使用方式需要注意的地方也都提过了，有兴趣的可以去亲自体验一下。
最原始的的unicode使用方式的使用方法可参考上一个教程，教程链接：http://bbs.520it.com/forum.php?mod=viewthread&tid=1950
现在来看一下全新的使用方式，symbol引用，其实这种方式使用起来也非常简单。打开demo_symbol.html文件可以看到详细的使用方法：
iconfont图标分别对应不同的类名：
reference symbol:
Use the following steps:
first step: introduction of the code symbol to generate the following items:
<Script the src = "./ iconfont.js"> </ Script>
(iconfont.js necessary to introduce the document, this document js equivalent svg call graph collection of files)
Second step: General added css code (line once incorporated)
<style type = "text / css">
.icon {
width: 1em; height: 1em;
Vertical-align = left: -0.15em;
Fill: currentColor;
overflow: hidden;
}
</ style>
The third step: the selection of the icon to obtain the class name, applied to the page:
<SVG class = "icon" Aria-hidden = "to true">
<XLink use: the href = "# xxx-icon "> </ use>
</ SVG>
real situation" iconfont "(font-family) need to modify the font-family in your project. You can view by editing the project, the default is "iconfont".
Use colorful icons referenced effect:
It can be seen browser rendering is still very good, on the other More Actions iconfont, we also need to continue to explore, and the actual completion of the operation.