iconfont阿里矢量图标库的引入与使用

首先，打开iconfont阿里矢量图标库官网，没有账号的要注册一个账号。
接着选择图标库 > 官方图标库，选择你喜欢的图标库，点击进入。

选择你喜欢的图标，添加入库。

选择完自己喜欢的图标后，点击右上角的购物车，选择添加至项目（没项目的可以自己新建）。

接着选择下载至本地，将下载的zip压缩包打开。复制里面的iconfont.css与iconfont.ttf文件到你本地项目，项目里新建一个iconfont文件夹，并将2个文件复制进来。并修改iconfont.css文件中的iconfont.ttf的路径。

我这里的~@是vue的写法。
接着在main.js中引入iconfont.css文件

接着，在阿里图标库的项目中，复制相应图标的unicode码，再应用到相应页面中。

记得一点要加icon iconfont类名。
注意，有些库里面的图标在某些项目中会无法显示，例如：uniapp中用iPhone6模拟机下，用到以下图标时，显示异常。

暂时未发现具体原因，知道原因的大神可以指点迷津。以上就是如何使用阿里巴巴矢量图标库的教程。谢谢各位看官，如果对你有帮助，请献上你的小赞赞，谢谢！

iconfont阿里矢量图标库的引入与使用相关推荐

uniapp 引入阿里矢量图标库的详细步骤及踩坑经历
uniapp 引入阿里矢量图标库的详细步骤及踩坑经历首先在阿里矢量图标库选择自己喜欢的图标加购物车如下图点击右上角的购物车添加到项目这里有坑首先你不选中在线链接你是看不到 @font-f ...
在uni-app里面怎么引入阿里矢量图标库？
最近在学习uni-app,每次在需要用到icon的时候都得下载下来,感觉好麻烦,所以就找到了直接引入阿里矢量图标库的方法,妈妈再也不用担心我为下载icon的样式不规范而发愁了,以下方法供大家参考在图 ...
Vue项目中，引入阿里矢量图标库
Vue项目中,引入阿里矢量图标库 (1)阿里矢量图标库地址(需要登录): https://www.iconfont.cn (2)找到自己心仪的图标: (3)添加入库: (4)点击购物车图标(免费的哦) ...
vue框架项目中使用阿里矢量图标库
vue框架项目中使用阿里矢量图标库一.打开阿里矢量图标,将需要图标加入购物车,选择下载代码二.解压缩包,将解压缩后的文件夹放入项目文件夹下的src/assets 1.在main.js中引入css ...
使用iconfont阿里巴巴矢量图标库（最方便的使用方法）
使用iconfont阿里巴巴矢量图标库(最方便的使用方法) https://www.iconfont.cn/阿里巴巴矢量图标库看着挺多的,仔细看内容并不多.图文并茂哦! 第一步:登陆后.喜欢哪个放到 ...
【sciter】：sciter 使用阿里矢量图标库
sciter 使用阿里矢量图标库步骤一:选择要使用的图标,并添加到项目中(阿里矢量官网中的项目) 步骤二(关键):选中项目设置,在字体格式中选择TTF,其他不选,保存步骤三:点击 Font cla ...
码神之路博客系统更换个人卡片图标（iconfont 阿里巴巴矢量图标库的使用）
目录个人卡片图标更换步骤 1.前往iconfont 阿里巴巴矢量图标库官网,并且注册账号: 2.点击资源管理下的我的项目: 3.点击新建项目: 4.新建项目之后,在搜索框搜索想要的图标素材(例如Q ...
三种方式在HTML使用阿里字体图标--iconfont阿里巴巴矢量图标库
好久没用到阿里巴巴的图标,突然要用到就发现不会用了,只会导出png格式的图标png了= = 目录 1.字体图标方法一.本地使用通过类名使用阿里矢量图标 1.把图标添加入库 2.把图标添加到项目 3. ...
如何把Iconfont阿里巴巴矢量图标库引入web项目和微信小程序中，拿走不谢
登录Iconfont-阿里巴巴矢量图标库官文地址:https://www.iconfont.cn/ ①必须登录才行,我这边是用新浪微博登录的 ②然后可以搜索自己需要的图标,比如搜索homt,然后鼠标 ...
矢量图标库如何引入html,阿里巴巴矢量图标库 iconfont 的使用方法
做设计的应该会知道"阿里巴巴矢量图标库"这个网站,你可以上传自己设计的图标,也可以下载别人分享的图标. 作为前端,我们也可以更好的利用它,实现网站图标的美化. 首先找到你需要的图标 ...

iconfont阿里矢量图标库的引入与使用

iconfont阿里矢量图标库的引入与使用相关推荐

最新文章

热门文章