vue前端项目引入iconfont阿里图标的四种方式

r囧r小猫 2021-09-18 01:14 574阅读 0赞

一、首先登陆阿里云矢量图标库，把需要的字体图标加入到自己的项目中

[http://www.iconfont.cn/home/index][http_www.iconfont.cn_home_index]

二、阿里云图标的四种方式（推荐第二种方式Font class引入，如果不考虑网络问题可以用在线引入的方式）

进入项目以后会看到阿里云可以选择三种方式进行导入图标

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70][]

# （1）unicode #

![20190212175837345.png][]

`unicode`的主要的特点是

优势

①兼容性最好，支持ie6+

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

劣势

①不支持多色图标

②在不同的设备浏览器字体的渲染会略有差别，在不同的浏览器或系统中对文字的渲染不同，其显示的位置和大小可能会受到font-size、line-height、word-spacing等CSS属性的影响，而且这种影响调整起来较为困难

**使用方法：**  
第一步：在自定义的全局样式表中引入自定义字体 \`font-face，并定义使用iconfont的样式

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 1][]

@font-face {
        font-family: "iconfont";
        src: url('iconfont.eot'); /* IE9*/
        src: url('iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('iconfont.woff') format('woff'), /* chrome, firefox */
        url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
        url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
      }
      .iconfont {
        font-family:"iconfont" !important;
        font-size:16px;
        font-style:normal;
        -webkit-font-smoothing: antialiased;
        -webkit-text-stroke-width: 0.2px;
        -moz-osx-font-smoothing: grayscale;
      }

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

<i class="iconfont"></i>

# （2） Font class（推荐的方式） #

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

①兼容性良好，支持ie8+

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

![20190212180921288.png][]

第二，进入项目以后 选择 Font class 并下载到本地

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 2][]

下载到本地，解压以后的文件夹列表如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 3][]

第三，把红框中的部分 粘贴到 自己的项目中，记得放在 static（或assects目录）文件目录下，因为字体图标也属于静态资源的一部分。

![20190729181004825.png][]

第四，在main.js文件内全局引入 阿里云字体图标 css,记得使用 路径要正确，如果此时编译不正确，说明 引用路径存在问题

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 4][]

为避免出现图标方框的情况，请对font进行初始化

![20190729181136367.png][]

在reset.css 或者全局index.css中加入如下代码

![20190729181206196.png][]

// 阿里字体图标设置
    .icon, .iconfont {
      font-family:"iconfont" !important;
      font-size:16px;
      font-style:normal;
      -webkit-font-smoothing: antialiased;
      -webkit-text-stroke-width: 0.2px;
      -moz-osx-font-smoothing: grayscale;
    }

第五，项目中使用字体图标，就可以使用了

![20181208110633542.png][]

![20181208110704457.png][]

# (3)Symbol  SVG图片格式 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 5][]

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

②支持像字体那样通过font-size,color来调整样式。

③支持 ie9+

④可利用CSS实现动画。

⑤减少HTTP请求。

⑥矢量，缩放不失真

⑦可以很精细的控制SVG图标的每一部分

**使用方法：**  
第一步：拷贝下载项目，复制inconfont.js到资源文件目录下，并引入inonfont.js文件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 3][]

引入 ./iconfont.js

第二步：加入通用css代码（引入一次就行）：

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

# (4)在线引入iconfont #

在线引入iconfont 图标可参考：

[https://www.jianshu.com/p/8379597e3f97][https_www.jianshu.com_p_8379597e3f97]

[http_www.iconfont.cn_home_index]: http://www.iconfont.cn/home/index
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70]: /images/20210812/bb8f888acafd4961aea2b60c64ecea08.png
[20190212175837345.png]: /images/20210812/065cb693d89944fda98f65cfa52a7987.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 1]: /images/20210812/a35ea85ee8d940dca8db2488e226f89d.png
[20190212180921288.png]: /images/20210812/0a984a31dd33457bb756165a9cbf647c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 2]: /images/20210812/413009d7e3de47c180f7666b596521dc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 3]: /images/20210812/527f94ba52b44510ba306c6b820e3e2e.png
[20190729181004825.png]: /images/20210812/cf53b06f8bc64adfa3a745ea7e937146.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 4]: /images/20210812/63d451d8111043518644a973b0ee323b.png
[20190729181136367.png]: /images/20210812/e96ed872b22448ffa71d9e595a52f6d4.png
[20190729181206196.png]: /images/20210812/f2d1404bb1904215aef8b7c8c747450b.png
[20181208110633542.png]: /images/20210812/28df756dded34a7f981d602480efea45.png
[20181208110704457.png]: /images/20210812/5b08308157ed4a2dacba6cef30b869ca.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NDMwMDAw_size_16_color_FFFFFF_t_70 5]: /images/20210812/9bae5fd2134a4e05be4d5c7ab2ee51ff.png
[https_www.jianshu.com_p_8379597e3f97]: https://www.jianshu.com/p/8379597e3f97