Iconfont的使用方法

不吃香菜的蟹老板

2024-03-04 645 阅读1分钟

iconfont 的三种使用方法

unicode 不常用
Font class 像字体一样，默认黑色图标，莫得彩色
Symbol 支持多色图标

1、unicode 略

2、Font class

下载到本地： iconfont-我的项目-Font class -下载到本地 - class应用
在线引用：iconfont-我的项目-Font class - 查看在线链接 - 项目引用样式文件 - class应用

3、Symbol

3.1 下载到本地

iconfont-我的项目-symbol-下载到本地 - 解压提取出最低层文件夹（font_421XXXXX）-重命名文件夹为 iconfont（包含iconfont.js）放在vue项目中（我是放在/assets/ 下面的）
在assets 目录下建一个icon.css文件 /assets/css/icon.css

.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

在main.js中引入js和css

import './assets/iconfont/iconfont.js'
import './assets/css/icon.css'

最后vue文件中使用图标

<svg class="icon" aria-hidden="true">
     <use xlink:href="#icon-xuanzhong"></use>
</svg>

3.2 在线引用

iconfont-我的项目-symbol-查看在线链接-复制链接 //at.alicdn.com/t/c/font_4 ***** _famq0z6ltd.js
第二步跟上面一样，在assets 目录下建一个icon.css文件
在mian.js中引入 icon.css文件，在index.html引入在线js资源文件并且加上前缀 https:
!!! 记住在线的引入不是在main.js中引入js文件了，因为没得本地iconfont目录,而是在index.html中引入

// 在 main.js
import './assets/css/icon.css'
// 在public/index.html
<head>
    <script src="https://at.alicdn.com/t/c/font_4*****_famq0z6ltd.js"></script>
</head>

最后在页面中使用图标是一样的

修改图标颜色

在线方式：选中图标批量去色
下载到本地：把js文件用正则表达式找出fill属性，把fill属性全干掉
最后，设置外层颜色

.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor; // 图标颜色，currentColor取父元素的颜色
  overflow: hidden;
}