vue项目中如何使用iconfont

导读：vue项目中引入iconfont的方式

iconfont 的三种使用方法

unicode 不常用
Font class 像字体一样使用，默认黑色图标，无法修改颜色
Symbol 支持多色图标，更灵活，推荐

一、unicode 略

二、Font class

方式一：下载到本地

第一步：iconfont-资源管理-我的项目-Font class -下载到本地

在这里插入图片描述

第二步引入至项目中

在 index.html

<link rel="stylesheet" href="/src/assets/iconfont/iconfont.css" />

第三步 vue页面中使用

 <span class="iconfont icon-off-line"></span>

方式二：在线引用

iconfont-资源管理-我的项目-Font class - 查看在线链接 - 项目引用样式文件 - 页面中使用；
使用方式跟上面的方式一大体相同，只是在index.html中引入href 不一样

 <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4*******_kylxvxppycg.css" />

三、Symbol

3.1 下载到本地的方式

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

在这里插入图片描述

3.1.2 在assets 目录下建一个icon.css文件 /assets/css/icon.css

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

3.1.3 在main.js中引入js和css

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

3.1.4 最后vue文件中使用图标

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

3.2 在线引用的方式

3.2.1 、 iconfont-我的项目-symbol-查看在线链接-复制链接 //at.alicdn.com/t/c/font_4 ***** _famq0z6ltd.js

3.2.2 、第二步跟上面一样，在assets 目录下建一个icon.css文件

3.2.3、在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>

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

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

3.3 修改图标颜色

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

.outerColor{
	  color: red;
}

个人认为：在线引入的方式比较适合项目开发测试阶段，因为图标可能会有新增修改，使用在线引入的方式就不用每次UI小姐姐编辑了图标都要开发人员去下载；本地下载引入的方式适合在运行上线阶段，避免线上引入不稳定访问不了图标。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/637195.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！