1 Introduction
Iconfont- Alibaba vector icon library is a large supermarket, there are vast amounts of vector icons, but also in color. Support Chinese search. After the search icon which need to be added to the shopping cart. Now August 31, 2019, there would have been more than sixty-two million the icons. Web Links: https://www.iconfont.cn/
Employees must use non-Ali Sina Weibo Github account or log in, you need to store icon.
There is a drawback is that if you find a good after the desired icon, then click download, the icon disappeared in the shopping cart, just like you bought a net shopping cart thing, the product disappeared from the shopping cart as .
Then you can create a new item in the shopping cart interface, so the next point to open the icon library'll find some of the icons previously selected
These icons can not only download icon code - required front-end engineers
can also download the icons in PNG format --UI designer needs
Information can also edit icon: for example, color, displacement, size, rotation angle
After selecting the icon, click download, after downloading a compressed package, extract, add files to the project.
Instructions
There is a good-extracting file named demo_index.html of opening the file, there are three ways detailed characters used
1.Unicode quote
Unicode font on the page is the most primitive end application mode, characterized by:
- Best compatibility, support for IE6 +, and all modern browsers.
- Supported by font way to dynamically adjust the icon size, color, and so on.
- But because it is the font, so it does not support multi-color. Use only platform in monochrome icon, even if multiple items in the color icon will automatically go to color.
Note: The new iconfont support multi-color icons with these multi-colored icons will not be used in Unicode mode, if there is a demand recommended symbol of reference
Unicode using the following steps:
The first step: Copy the project generated the following @font-face
@font-face {
font-family: 'iconfont'; src: url('iconfont.eot'); src: url('iconfont.eot?#iefix') format('embedded-opentype'), url('iconfont.woff2') format('woff2'), url('iconfont.woff') format('woff'), url('iconfont.ttf') format('truetype'), url('iconfont.svg#iconfont') format('svg'); } Step Two: Use defined styles iconfont
.iconfont {
font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } The third step: Pick the icon to get the font encoding, applied to the page
<span class="iconfont">3</span> "iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。
2.font-class 引用
font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。
与 Unicode 使用方式相比，具有如下特点：
- 兼容性良好，支持 IE8+，及所有现代浏览器。
- 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
- 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
- 不过因为本质上还是使用的字体，所以多色图标还是不支持的。
使用步骤如下：
第一步：引入项目下面生成的 fontclass 代码：
<link rel="stylesheet" href="./iconfont.css"> 第二步：挑选相应图标并获取类名，应用于页面：
<span class="iconfont icon-xxx"></span>
" iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。
3.Symbol 引用
这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：
- 支持多色图标了，不再受单色限制。
- 通过一些技巧，支持像字体那样，通过
font-size,color来调整样式。 - 兼容性较差，支持 IE9+，及现代浏览器。
- 浏览器渲染 SVG 的性能一般，还不如 png。
使用步骤如下：
第一步：引入项目下面生成的 symbol 代码：
<script src="./iconfont.js"></script> 第二步：加入通用 CSS 代码（引入一次就行）：
<style> .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>