vue中使用iconfont图标的过程

更新时间：2022年08月04日 10:18:01 作者：风如也

这篇文章主要介绍了vue中使用iconfont图标的过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

vue引入iconfont图标

引入在线链接文件

如果开发过程中需要不断更新图标，为了避免多次下载文件到本地，可以先选择使用在线链接的图标文件

前面的步骤就不赘述了，直接讲如何在vue中引入

查看项目在线链接

我选的是 Unicode 的形式

在项目中的 assets/css 文件夹下新建 global.css 文件，复制刚才生成的 font-face 代码，如何定义iconfont 类

@font-face {
  ...
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

在 main.js 中引入 css 文件

...
import './assets/css/global.css'
...

使用

<i class="iconfont">&#xe63b;</i> // Unicode格式

vue使用iconfont多色图标

1.新建一个项目，用于存放该项目应用的所有图标，项目名称自定义。

2.挑选自己心仪的图标，并点击添加入库

3.点击导航栏上的“购物车”图标，查看自己添加入库的图标，并添加至项目

4.进入自己的项目库，选择symbol 引用，点击查看在线链接

5.在vue项目中新建一个js文件，文件名自定义，将点击的在线链接里面的内容全部复制到js文件中

6.在main.js中全局引用该js文件

7.将icon图标放至相应的位置，用css样式width、height可调整icon大小

<svg class="icon" aria-hidden="true" style="width:15px;height:15px;">
        <use xlink:href="#icon-wancheng" rel="external nofollow" ></use>
</svg>

8.后续若添加新的icon图标至该项目，点击此处红字更新代码，进入在线链接全部复制后，将刚才的创建的js文件内容全部替换，无需再进行全局引入，将心仪的icon图标放至相应位置即可，代码格式详见第七条

9.呈现效果如下图

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

ElementUI 复杂顶部和左侧导航栏实现示例
本文主要介绍了ElementUI 复杂顶部和左侧导航栏实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-04-04
Vue拦截器原理以及详细使用方法
这篇文章主要给大家介绍了关于Vue拦截器原理以及详细使用的相关资料,Vue拦截器通常用于在发送请求或响应数据时对其进行一些处理或修改,文中通过代码示例介绍的非常详细,需要的朋友可以参考下
2023-08-08
vant框架van-cell插槽无法换行问题及解决
这篇文章主要介绍了vant框架van-cell插槽无法换行问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01
vue项目打包自动更新版本号且自动刷新缓存的方法示例
这篇文章主要给大家介绍了关于vue项目打包自动更新版本号且自动刷新缓存的相关资料,文中通过代码及图文介绍的非常详细,对大家学习或者使用vue具有一定的参考借鉴价值,需要的朋友可以参考下
2024-11-11
编写 Vue v-for 循环的 7 种方式
这篇文章主要分享可编写 Vue v-for 循环的 7 种方式，在Vue中，基本上每个项目都会用到v-for循环。它们允许你在模板代码中编写for循环，接下来一起看看下面文章的详细介绍吧
2021-12-12
vue实现组件通信的八种方法实例
ue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,下面这篇文章主要给大家介绍了关于vue实现组件通信的八种方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
2021-09-09
vue filters的使用详解
使用 filters 实现英文字母转大写，实现代码超简单，本文重点给大家介绍vue filters的使用，感兴趣的朋友一起看看吧
2018-06-06
使用vite搭建ssr活动页架构的实现
本文主要介绍了使用vite搭建ssr活动页架构，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-07-07
Vue.js实现日历功能
这篇文章主要为大家详细介绍了Vue.js实现日历功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-08-08
vue实现将自己网站(h5链接)分享到微信中形成小卡片的超详细教程
在微信小程序中,可以很简单的分享一个页面,比微信H5简单多了,下面这篇文章主要给大家介绍了关于vue实现将自己网站(h5链接)分享到微信中形成小卡片的超详细教程,需要的朋友可以参考下
2023-02-02