vue项目中如何使用iconfont

不吃香菜的蟹老板

已于 2024-05-23 16:30:50 修改

阅读量1k

点赞数 19

分类专栏： vue2 文章标签： vue.js 前端 javascript

于 2024-05-23 16:23:39 首次发布

本文链接：https://blog.csdn.net/qq_35227244/article/details/139149284

版权

14 篇文章 0 订阅

订阅专栏

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

在这里插入图片描述

在 index.html

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

 <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" />

在这里插入图片描述

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

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

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

// 在 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>

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

.outerColor{
	  color: red;
}

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

关注