2024年2月25日发(作者：)

.

引用阿里的iconfont的方法有很多种，本次整理一下Web端如何下载并且使用iconfont的图标。

一、如何下载iconfont图标。

在iconfont-阿里巴巴矢量图标库中有多种图标供你选择。比方我们选择其中的一个作为例如。

鼠标悬浮上后会出现三种选择：

1.添参加库：功能和淘宝中的购物车一样，可以添加多个图标进展操作。.

2.收藏：同样可以选择多个自己喜爱的图标放在〞我的收藏〞中，防止以后找不到。

3.下载图标：选择单个图标进展下载，可下载为SVG格式、PNG格式和AI格式。

不过，我经常会用添参加库的方式。可以对单个图标和多个图标进展下载，而且有其他功能选择。点击添参加库。

下载的根本上都是压缩包的形式。解压后即可引入。下面我们了解一下如何引入inconfont图标。

二、如何引入iconfont图标

引入iconfont可以在线上引入和本地引入。

主要的引入方式有：icon单个引入(本地引入)、unicode引入、font-class引入、symbol引入。

单个使用。

用户直接下载SVG、AI、PNG格式的图标。然后在源码中直接引用。如

SVG格式那么是，下载之后，推荐使用谷歌浏览器翻开，右击，选择查看网页源代码。

选择…的所有内容，进展复制。

将代码复制到要显示的前端页面中，利用css可进展高宽的修饰等。

此种方式适合用在图标引用特别少，以后也不需要特别维护的场景。

 比方设计师用来做demo原型。

 前端临时做个活动页。

 当然如果你只是为了下载图标做PPT,也是极好的。

不过如果是成体系的应用使用，建议用户把icon参加工程，然后使用下面三种推荐的方式。

e引用 (线上)

unicode是字体在网页端最原始的应用方式，特点是：

 兼容性最好，支持ie6+，及所有现代浏览器。

 支持按字体的方式去动态调整图标大小，颜色等等。

 但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算工程里有多色图标也会自动去色。

第一步：拷贝工程下面生成的font-face

点击添加至工程后自行创立一个工程，如demo。

复制代码粘贴至前端页面的中。//前一定要加上:

第二步：定义使用iconfont的样式

.iconfont{

font-family:"iconfont" !important;

font-size:16px;font-style:normal;

-webkit-font-smoothing: antialiased;

-webkit-text-stroke-width: 0.2px;

. v

.

-moz-osx-font-smoothing: grayscale;

}

也放在前端页面的中

第三步：挑选相应图标并获取字体编码，应用于页面

-class引入

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

与unicode使用方式相比，具有如下特点：

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

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

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

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

第一步：引入文件：

引入css文件可以用线上也可以用本地的，本地的需要下载文件，线上引入可直接在工程中复制地址。

1.引入本地的文件

下载压缩包文件，解压，找到文件夹中的 件

复制粘贴到本地工程的文件夹css中，

然后在源代码的上面，写link标签，引入外联样式表

2.引入线上

找到自己创立的工程，找到font-class，复制代码到源代码中，引入外联样式表

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

翻开下载的压缩包文件夹，找到demo_

使用浏览器翻开，复制所用图标的类名。粘贴至所用的页面代码中。

或者在工程中直接复制图标的类名

引用

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

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

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

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

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

Symbol引用也可以在本地或线上引用，参照font-class的引用方式即可。

第一步：引入文件：

引入本地文件

引入线上文件

第二步：参加通用css代码〔引入一次就行〕：

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

使用浏览器翻开文件，找到图标的类名，并按下例格式引用到页面代码中：

同font-class一样，也可以直接复制工程中的类名

获取类名代码如下：

这样iconfont就可以显示在页面上啦！没显示？那就在看一遍。这可能是最全的如何引入iconfont的方法了！！

引用时出现显示的是方框，或者没有显示。原因是iconfont更新了新的图标,此时需要同时更新iconfont的。如果没有更新,那么就会造成引用不到的原因,然后就变成小方框了

. v