vue中使用阿里字体图标库

本文基于pink老师和哈默老师的总结

下文的div换成span（或者其他行内标签如i）标签，我就不改了

1.首先进入阿里图标库，并且搜索对应的字体图标加入到购物车，之后添加到项目里（项目需要提前创建或者添加时创建）

2.删除demo文件并且将文件引入到main.js中

3.使用字体图标库的两种方式

3.1引入类名（推荐）

3.2使用content

如果你直接从css文件复制content会缺少几个符号

4.优化代码（只使用第一种引入）

第二个是为了防止出现class="test icon-dianzan"的情况

但是我感觉一下代码一样可以（可能容错不是很好）

5.字体图标小技巧(扩大字体图标点击范围)

其实直接加入padding更方便一点

vue中使用阿里字体图标库相关推荐

在Uni-App中使用阿里字体图标库
在使用Uni-App框架开发微信小程序时,需要用到阿里字体图标库,本来是在public/index.html中通过link引入了图标的在线地址,通过npm run serve运行到浏览器上可以正常显示 ...
梳理详细 vue中引入第三方字体图标库iconfont
最近在项目中需要使用第三方图标库,我选择了阿里的iconfont.记录下学习过程.在网上查阅资料的时候,发现很多教程写的比较模糊,一些博主只是提供一种可实现的方式,但是并没有完全区分iconfont的 ...
vue中引入第三方字体图标库iconfont，及iconfont引入彩色图标
iconfont字体图标使用就不多说了,大致是几部: 1.在iconfont官网选图标,加入购物车,加入项目,下载到本地,解压 2.在项目assets目录新建目录iconfont,用于存放刚才下载解压 ...
vue引入iconfont阿里字体图标库报错和解决
报错:引入阿里字体库后报错说找不到文件解决:在引入的字体iconfont.css中加入绝对路径内容:如图 @font-face {font-family: "iconfont" ...
在 Quasar cli 搭建的 vue 项目中引用阿里字体图标 iconfont symbol方式
在 Quasar cli 搭建的 vue 项目中引用阿里字体图标 iconfont 1. symbol 方式 2. font class 方式(未实践) 1. symbol 方式首先说明一下,这 ...
vue框架项目中使用阿里矢量图标库
vue框架项目中使用阿里矢量图标库一.打开阿里矢量图标,将需要图标加入购物车,选择下载代码二.解压缩包,将解压缩后的文件夹放入项目文件夹下的src/assets 1.在main.js中引入css ...
VUE在线调用阿里Iconfont图标库
前言多年前我本是个服务端小白,随着行业内卷,硬是被熬成了前端小白...开个玩笑,只是个人比较喜欢学习技术罢了!本章将带领大家以另一个高端的方式打开阿里Iconfont图标库,过去,我们要么是自己在网 ...
在vue中如何使用字体图标(阿里巴巴)
在vue中如何使用字体图标(阿里巴巴) 1.选择需要的图标加入购物车. 2.打开购物车,添加至项目. 3.点击生成在线代码 4.点击下载至本地,放入需要文件夹下,可以放入assets下. 5.在sty ...
在Vue中使用icon 字体图标
1.使用线上的阿里iconfont图标库 1.打开 iconFont官网选择自己喜欢的图标,并且添加购物车 2.点击购物车,添加至项目 3 生成链接 4在我们的vue项目中,找到index.html ...
如何在uniapp中引入阿里字体图标
在阿里字体图标里面点击下载到本地然后将解压出来的文件放到static目录下,我的是static/font 然后在App.vue中引入 @import url("./static/font/ ...

vue中使用阿里字体图标库

1.首先进入阿里图标库，并且搜索对应的字体图标加入到购物车，之后添加到项目里（项目需要提前创建或者添加时创建）

2.删除demo文件并且将文件引入到main.js中

3.使用字体图标库的两种方式

3.1引入类名（推荐）

3.2使用content

4.优化代码（只使用第一种引入）

5.字体图标小技巧(扩大字体图标点击范围)

vue中使用阿里字体图标库相关推荐

最新文章

热门文章