vue文件如何引入icon图标并使用

1、进入阿里矢量图标库https://www.iconfont.cn.并登录

2、选择自己需要的图标并加入购物车

3、选完后点击右上角的购物车图标

4、点击“添加至项目”（选择已创建的项目或者新建）

5、选择“Font class”后点击“下载至本地”

6、下载完后，解压，改文件名为“icon”

7、然后把icon文件复制到vue项目的assets目录

8、在main.js全局引入iconfont.css

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

9、使用，xxx是iconfont.css文件里的类名，每个icon图标都有对应的一个类名

<i class="iconfont xxx"></i>

附加：
如果报类似以下的错，那是因为引入的文件少了iconfont.svg或者iconfont.ttf等等
./src/assets/styles/iconfont.css (./node_modules/css-loader??ref–6-oneOf-3-1!./node_modules/postcss-loader/src??ref–6-oneOf-3-2!./src/assets/styles/iconfont.css)
Module not found: Error: Can’t resolve ‘./iconfont.eot?t=1581400625003’ in ‘G:\ypk_backend\src\assets\styles’

vue文件如何引入icon图标并使用相关推荐

vue如何引入icon图标并使用
1.进入阿里矢量图标库https://www.iconfont.cn.并登录 2.选择自己需要的图标并加入购物车 3.选完后点击右上角的购物车图标 4.点击"添加至项目"(选择已创 ...
Vue项目引入icon图标的两种方法
我用的是阿里巴巴矢量图标库 ****一,在文件中引入icon项目链接将图标加入项目后会出一个链接(每新添加图标,此链接都应更新) 在Vue项目中,public/index.html中将项目链接复制 ...
vue项目中自定义icon图标
vue项目中有时需要用到自定义图标,用法如下新建icon.css文件,定义图标及其名称 /*指针图标*/ .icon-pointer {background: url('../assets/imag ...
微信小程序开发引入icon图标出现小框的问题
在练习引入icon图标时无论怎么更改都会出现小框首先检查是否在iconfont.json中的font_family是否写了iconfont "font_family": &quo ...
vue 改变i标签icon图标的大小
vue i标签中icon图标的设置,之前搞错了方向,一直以为是按照图片格式弄,其实是按照编辑文字格式的逻辑来的 <i class='el-icon-picture-outline' style= ...
vue项目引入icon图标
项目图标的说明当前项目在开发过程中,使用到了iconfont的图标,对应的图标预览地址如下: iconfont Demo 对于开发者来说,一般可以不关心它的存在,因为他并不影响你使用其他的iconf ...
vue项目设置浏览器icon图标
1. 引入图标在vue项目中的index.html中引入图标,为防止项目打包时图片路径出错,需把icon图标放在static静态文件夹下 <link rel="shortcut ic ...
vue+element-ui项目引入第三方图标库：阿里巴巴矢量图标库（问题：小方框）
因为element-ui内置的小图标非常有限,所以有时候,我们需要自定义或引入第三方图标库. 先介绍下阿里巴巴矢量图标库iconfont: 这个截图只显示了第一行的图标库,还有很多. 也许,我们需要的 ...
vue的vantUI引入外部图标
前言在查找怎么引入外部图标的时候,发现对于一些细节他们的文章描述的并不清楚.因此打算自己对自己是如何用vantUI引入外部图标的方法进行一个整理:同时,虽然是引入vantUI的外部图标,但是方法都是 ...

vue文件如何引入icon图标并使用

vue文件如何引入icon图标并使用相关推荐

最新文章

热门文章