vue引用iconfont图标

1.把图标下载到本地解压，把里边的文件拷贝到static下（建议新建一个asstes文件夹专门存放，文件目录如下）

2.打开iconfcont.css修改url，把data开头的删除了，不然会报错

3.文件目录前插入./![在这里插入图片描述](https://img-blog.csdnimg.cn/4438b034f4584333943d96170bf442fd.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAQk1ha2Vy,size_20,color_FFFFFF,t_70,g_se,x_16
4.将文件iconfcont引入到main.js中
5.运行npm install css-loader -s
6.在页面中试使用xxx为你的icon名

这个就是正确的，如果不正确，请检查每一步
。

vue引用iconfont图标相关推荐

iconfont怎么引入html,Web页面中引用iconfont图标
阿里妈妈出品的 iconfont 是一个矢量图标管理.交流平台,支持矢量图.位图等格式下载,并提供便捷的前端项目植入引用方法,是当前Web开发中主流的icon解决方案. 想要在前端页面中引入图标,一个 ...
uniapp引用iconfont图标
不得不说uniapp引入iconfont确实比较坑.下面方法可行: 引入方法: 1.在confont官网找好图标,然后点击复制代码, 2.点击红圈的复制代码后在网页打开,出现如下: 3.然后再unia ...
uniapp项目中引用iconfont图标，实现信号强度图标展示（离线使用）
效果选择图标加入项目在项目设置中勾选base64和彩色,取消其它项查看生成的代码可以复制这一段代码,然后在项目中以这种方式使用 <text class="iconfont&qu ...
微信小程序如何引用iconfont图标
最近在研究微信小程序,自己写demo的时候想要引用巴里巴巴图标库的图标,于是: @font-face {font-family:'iconfont';src:url('iconfont.eot');s ...
HTML中引用iconfont图标
目录一.unicode引用二.font-class引用 1.打开iconfont官网找到所需图标 2. 3. 4. 5.生成代码一.unicode引用 1.拷贝项目下面生成的font-face ...
VUE如何引入iconfont图标来使用
对做前端界面的开发者来说,做各类界面的时候需要用到图标,这里说下如何在VUE中引用iconfont图标来使用,以引入阿里的iconfont图标为例. 一.首先访问https://www.iconfon ...
ios label 高度紫石英_iOS中iconfont(图标字体)的基本使用
前言近日在做项目时,项目组有提出iconfont的技术,便开始查询相关资料.iconfont技术的主要目的是为减少应用体积而生.首先icon代表图标 font代表字体.此技术便是将图标转化为字体,从 ...
v-for如何循环iconfont图标
v-for如何循环iconfont图标先上个效果图关于iconfont如何添加至项目大家可以自行搜索下,很简单,通常我们引用iconfont图标的方式是复制代码然后直接引用,但是在v-for循环 ...
ant-design-vue自定义使用阿里iconfont图标
ant-design-vue自定义使用阿里iconfont图标 ant-design-vue与vue-admin-element引用iconfont图标还是有点区别的,具体步骤如下: 第一步:从ico ...

vue引用iconfont图标

vue引用iconfont图标相关推荐

最新文章

热门文章