Vue项目引入icon图标的两种方法

我用的是阿里巴巴矢量图标库
****一，在文件中引入icon项目链接

将图标加入项目后会出一个链接（每新添加图标，此链接都应更新）
在Vue项目中，public/index.html中

将项目链接复制在link中即可

二，icon项目下载使用
将下载的项目解压，复制到Vue项目中的assets文件中
如，assets/iconfont/font

然后在main.js文件中引入
//引入图标

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

最终引入的是iconfont.css文件

使用
两种方法的使用的一样的

 <i class="iconfont icon-gouwuche"></i>

不要忘记加：iconfont，否则无效

Vue项目引入icon图标的两种方法相关推荐

vue项目引入icon图标
项目图标的说明当前项目在开发过程中,使用到了iconfont的图标,对应的图标预览地址如下: iconfont Demo 对于开发者来说,一般可以不关心它的存在,因为他并不影响你使用其他的iconf ...
阿里巴巴引入字体图标的第二种方法：
阿里巴巴引入字体图标的第二种方法: 第一步:拷贝项目下面生成的fontclass代码: 首先将所选购的图标添加至项目(没有项目可新建项目),如图: 要点击查看在线链接才能生成代码点击复制代码在新建标 ...
Vue项目中刷新当前页面的四种方法
Vue项目中刷新当前页面的四种方法前记刷新当前页面的四种方法 this.$router.go(0) location.reload() 跳转空白页再跳回原页面使用provide / inject ...
eclipse中将项目打包成jar的两种方法，及其问题与解决方法
eclipse中将项目打包成jar的两种方法,及其问题与解决方法参考文章: (1)eclipse中将项目打包成jar的两种方法,及其问题与解决方法 (2)https://www.cnblogs.co ...
计算机为什么找不到摄像头,win7系统摄像头图标不见怎么办？找回win7摄像头图标的两种方法...
一般情况下,win7系统只要打开"我的电脑"就能看到系统默认的摄像头图标,双击摄像头图标,就可以运行视频摄像功能.但是有的用户打开自己的win7计算机图标后,发现win7系统摄像头 ...
vue中 element-ui引入阿里巴巴图标库两种办法
一:最初步骤,去阿里巴巴图标库. 过程:https://blog.csdn.net/mmd0308/article/details/78390783 二:配置: 1.在iconfont.css文件中将 ...
vue如何引入icon图标并使用
1.进入阿里矢量图标库https://www.iconfont.cn.并登录 2.选择自己需要的图标并加入购物车 3.选完后点击右上角的购物车图标 4.点击"添加至项目"(选择已创 ...
vue项目实现回到顶部的两种超简单方法
vue 中实现回到顶部的两种方式: (1)锚点方式通过点击锚点回到指定位置: <template><div id="topAnchor" ref="f ...
Android项目开发：指南针（两种方法实现）
Android项目开发:指南针应用的实现 1.基于方向传感器 activity_main.xml MainActivity.java 2.基于加速度传感器和地磁传感器在Android中可以使用内置传 ...

Vue项目引入icon图标的两种方法

Vue项目引入icon图标的两种方法相关推荐

最新文章

热门文章