HL🌱数字花园

引入阿里 iconfont 图标方法以及注意事项

7分钟阅读

背景

在我们做日常项目时，通常会用到 icon 图标或者是一些图标字体，阿里 iconfont 是我们选择的较多的一种，下面我将会介绍使用方法和几种常用的引用方式

iconfont 新建项目

官网：https://www.iconfont.cn/ 在首页选择【图标管理】-【我的项目】

点击 【我的项目】

填写项目信息，即可完成新建一个项目。【FontClass/Symbol 前缀】和【Font Family】参数是自定义的，以后会与我们生成的代码相关联，默认即可。

添加图标

新建好项目后，找到自己想要的图标，加入购物车。

点击页面右上角的购物车图标，打开自己的购物车，选择添加至项目，我们就可以在自己的项目下看到添加的图标了。

在我们的项目下，可以对图标进行编辑，如：大小、颜色、填充色，旋转等操作。

Vue 工程中引入 iconfont

官方文档：********https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.15&helptype=code

根据官方文档，有 unicode 引用、font-class 引用、symbol 引用三种引入方式，这三种方式又分有两种情况：下载到本地引入，在线链接引入。在 Iconfont 网页我们自己的项目下可以看到这些方式选择。

unicode 引用 不推荐

  • 本地引入

unicode 方式代码量少，并不需要下载本地文件。

  • 链接引入

unicode 模式下的在线链接指的是 font-face 代码。

在 vue 中，将项目生成的 font-face 代码和自定义的 iconfont 样式写在 App.vue 的 style 中，就可以在项目中引用图标了。此时样式是全局作用的，如果想要实现图标不同的样式，可以增加一层自定义样式。

<i></i>

在”myIconStyle” 样式中修改 color 等属性可以覆盖全局的样式，实现单个的样式修改。

这里注意理解下，官方文档说的 “不支持多色”，是指我们 iconfont 网页项目中，就算有多色图标，引用的时候会自动去色，统一变成默认的颜色，不管你给图标一编辑了红色图标二编辑了黄色，在项目中用 unicode 方式引用的时候都会变成默认颜色，但是我们仍然可以通过修改 css 样式实现图标颜色自定义，只是这个颜色编辑放在代码层面来了。

font-class 引用 推荐使用

如官方文档所说，font-class 是为了让程序更加直观可读，直接用 unicode 会造成阅读困难。font-class 模式关键在于生成的 css 文件。

  • 本地引入

按照下图选择文件放入自己的项目中，vue 中建议在 assets 文件夹下新建一个 iconfont 文件夹，放相关文件。

常用的就是：iconfont.css、iconfont.ttf、iconfont.woff、iconfont.woff2

@font-face {
  font-family: "iconfont"; /* Project id 2974228 */
  src: url('iconfont.woff2?t=1640340931514') format('woff2'),
      url('iconfont.woff?t=1640340931514') format('woff'),
      url('iconfont.ttf?t=1640340931514') format('truetype');
}

再就是引入时，需要注意的是字体文件路径引用是否准确，否则打包可能不识别

然后在 main.js 中引入 iconfont.css 文件，就可以正常使用了。

import './assets/iconfont/iconfont.css'

  • 链接引入

方式一：

在 index.html 头部中，引入 css 文件即可

<link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_1160473_t1iruikumm.css">

方式二：

点开 css 代码链接

复制 css 代码，在项目中粘贴到 iconfont.css 文件中 ，在 App.vue 或 main.js 中引入

import './assets/iconfont/iconfont.css'

注意：iconfont.css 中 url 官方默认是 cdn 链接, 打包时请改成 http 否则不识别

@font-face {
  font-family: "iconfont"; /* Project id 2974228 */
  src: url('//at.alicdn.com/t/font_2974228_90efgxrmkr8.woff2?t=1639986814919') format('woff2'),
       url('//at.alicdn.com/t/font_2974228_90efgxrmkr8.woff?t=1639986814919') format('woff'),
       url('//at.alicdn.com/t/font_2974228_90efgxrmkr8.ttf?t=1639986814919') format('truetype');
}

打包后

@font-face {
    font-family: "iconfont"; /* Project id 2400747 */
    src: url('http://at.alicdn.com/t/font_2400747_k5sq86ts4b.woff2?t=1634895844844') format('woff2'),
    url('http://at.alicdn.com/t/font_2400747_k5sq86ts4b.woff?t=1634895844844') format('woff'),
    url('http://at.alicdn.com/t/font_2400747_k5sq86ts4b.ttf?t=1634895844844') format('truetype');
}

symbol 引用 不推荐

  • 本地引入

将下载好的 iconfont.js 文件放入自己的工程目录，在 main.js 中引入，在 App.vue 中写好通用 css 代码，即可使用。

import './assets/iconfont/iconfont.js'

这里注意一点，下载下来的 js 文件是压缩过的，如果项目使用了 eslint 语法校验会疯狂报错，可以在 js 文件开头加入 /* eslint-disable */ 来指定该文件不应用 eslint 校验。

  • 链接引入

在 index.html 头部中，引入 js 文件即可

<script src="//at.alicdn.com/t/font_1160473_t1iruikumm.js"></script>

uni-app 引入 iconfont 图标

基本上引入方式跟上 Vue 相同，但是会遇到打包时图标引入不显示的问题，解决方式如下：

  1. 在 iconfont.css 中，需要使 ~@ 将路径添加完整
@font-face {
  font-family: "iconfont"; /* Project id 2642111 */
  src: url('~@/static/fonts/iconfont.woff2?t=1625021641165') format('woff2'),
       url('~@/static/fonts/iconfont.woff?t=1625021641165') format('woff'),
       url('~@/static/fonts/iconfont.ttf?t=1625021641165') format('truetype');
}
  1. 在 App.vue 全局引入 iconfont.css
<style>
/* 每个页面公共css */
@import url("~@/static/fonts/iconfont.css");
/* #ifdef MP-TOUTIAO */
/* #endif */
</style>


<view></view>

或通过官方 uni-icons 引入自定义图标

<uni-icons slot="icon" customPrefix="iconfont" color="#f8bd12" size="20"/>

总结

symbol 引用最受官方推荐，也是最优的方式，但是浏览器兼容不好，目前来看，前端需要兼容一些低版本的浏览器，所以如果考虑到用户使用，不建议采用 symbol 引用。

unicode 引用浏览器兼容最好，但是可读性差，font-class 引用虽然兼容性比 unicode 引用差一点，但是提高可读性，综合来看，目前项目中还是采用 font-class 引用比较好。

因为引用网络资源的不稳定，所以建议采用本地引入的方式。

如果在图标库中新增加了图标，则需要更新在线链接并把该链接重新引入到实际项目中，或者重新下载代码到本地，然后在实际项目中引入最新的 iconfont 文件。

再就是引入时文件路径的问题，打包都需要注意。

关系图谱