概要阿里巴巴iconfont字体图标是什么？
iconfont字体图标使用字体而不是图标或图像文件，字体图标可以控制图标的大小和颜色等。
以前为了引用各种各样的图标使用图标图像，但是使用图像需要向服务器请求图像资源，请求次数非常多，用户数量多的话会带来麻烦和很多问题，但是使用icon字体图标的话，会带来很多问题。
国内的阿里巴巴iconfont字体图标网站上有很多可以免费使用的字体图标。 下载代码就可以使用了。
下载需要先注册账户。 在阿里巴巴矢量图形库，还可以通过微博、GitHub账号登录。
登录成功后，可以在首页搜索要查找的字体图标的名称。 在这里搜索的是“首页”
搜索成功后，将鼠标悬停在要使用的图标上
添加到库中
单击购物车以显示添加的图标
然后下载代码
下载成功后用压缩包进行解压缩
打开其中的demo_index.html文件将显示使用字体图标的教程。
参照方式的特征使用步骤参照Unicode
兼容性最好，支持IE6和所有摩登浏览器。
可以根据字体动态调整图标的大小和颜色等。
但是因为是字体，所以不支持多种颜色。 只能使用平台的单色图标。 即使项目中有多种颜色的图标，颜色也会自动消失。
第一步：复制项目下生成的@font-face；
步骤定义使用iconfont的样式；
第三步：选择相应的图标，获取字体代码并应用于页面。
参照font-class
兼容性强，支持IE8和所有摩登浏览器。
比Unicode意思明确，写起来更直观。 很容易就能分辨出这个icon是什么。
由于使用class定义图标，因此替换图标时只需修改class中的Unicode引用。
但是，由于本质上是使用的字体，所以还不支持多色图标。
第一步：引入项目下生成的字体类代码；
第2步：选择相应的图标，获取类名并将其应用于页面。
参照Symbol
支持多色图标，不再受单色限制。
有几种技术支持通过字体大小和颜色调整样式，就像字体一样。
兼容性差，支持IE9和现代浏览器。
浏览器的渲染SVG的性能很普通，不及png。
步骤1 :引入项目下生成的symbol代码；
第二步：放入通用CSS码(导入一次即可)；
步骤3 :选择相应的图标，获取类名并将其应用于页面。
具体请参照下载的demo的例子。
使用Unicode参考第一步。 之间下载的所有文件都将复制到要使用的文件夹下。 (可以不使用demo文件)
步骤2 :您可以将图像请求的代码复制到style标签下，然后浏览到iconfont.css。
在步骤HTML的body标记中用于图标的位置浏览图标。
效果如下。
完整的代码如下所示。
！ doctypehtmlhtmlheadmetacharset=' utf-8 ' title/titlestyletype=' text/CSS ' @ font-face { font-family 3360 ' icon SRC:URL(Iconfont.EOT？ #iefix ' )格式(embedded-opentype )、URL ) iconfont.wofF2 )、format )、URL ) iconfont.woff ) )。 }.icon font { font-family : ' icon font '！ 导入； 字体大小： 16px； 字体样式： normal； WebKit-font-smoothing :安定力； - moz-OS x-font-smoothing : gray scale； }/style/headbodyspan class=' icon font ' # xe63b； /span/body/html也可以使用引用iconfont.css的方法，代码少且方便。
！ doctypehtmlhtmlheadmetacharset=' utf-8 ' title/titlelinkrel=' style sheet ' type=' text/CSS ' href=' icon font ' cont。
在第二步中，选择相应图标的类名并将其应用于页面。
代码如下所示。
！ doctypehtmlhtmlheadmetacharset=' utf-8 ' link rel=' style sheet ' href=' icon font.CSS '/headbodyspanclass=' icon
步骤引入iconfont.js文件
步骤2 :添加公共CSS代码
步骤3 :选择适当的图标名称并将其应用于页面。
代码如下所示。
！ doctypehtmlhtmlheadmetacharset=' utf-8 '！ - icon font.js-- -引入script src=' icon font.js '/script！ 导入CSS代码，导入一次即可--style.icon {width: 1em； height: 1em； vertical-align: -0.15em； 文件：当前颜色； overflow :隐藏； (}/style/headbody！ -首页图标--SVG class=' icon ' aria-hidden=' true ' use xlink : href=' # icon-shouye '/use/SVG/body/htmmy