在小程序中使用阿里巴巴矢量图标库

在百度小程序或者其他小程序中使用阿里巴巴矢量图标库是为了提高小程序渲染加载，因为小程序文档内都不建议把所有的图片和图标文件放在小程序端，在小程序中使用阿里巴巴矢量图标库的字体图标，首先要在这个网站挑选合适的图标加入项目。

然后进入矢量图标项目生成代码（代码中的路径为阿里云cdn加速路径，无需修改），如需要下载到本地，可存放在小程序项目内或云存储内，需修改代码内的路径，如下图：

将复制出来的代码添加到 app.css 内，如下：

@font-face {   font-family: 'iconfont';  /* project id 458248 */   src: url('//at.alicdn.com/t/font_458248_m3uvknr8kixdpldi.eot');   src: url('//at.alicdn.com/t/font_458248_m3uvknr8kixdpldi.eot?#iefix') format('embedded-opentype'),   url('//at.alicdn.com/t/font_458248_m3uvknr8kixdpldi.woff') format('woff'),   url('//at.alicdn.com/t/font_458248_m3uvknr8kixdpldi.ttf') format('truetype'),   url('//at.alicdn.com/t/font_458248_m3uvknr8kixdpldi.svg#iconfont') format('svg'); }

这样就可以在项目内直接调用了，使用方法如下：

<i class='iconfont icon-shezhi'></i>

调用的方法有很多种，根据自己项目的实际使用标签来调用，没必要非要使用 i 标签。

在小程序中使用阿里巴巴矢量图标库相关推荐

在小程序中使用阿里巴巴矢量图标库-代码版
阿里巴巴-iconfont 首先请自行注册-这个是必须要的 1.找到自己想要的图标,鼠标移动到图标上,点击添加到库 2.选择完之后,点击右上角的购物车图标 3然后在右侧点击添加至项目 4.在资源管理 ...
如何在vue中引入阿里巴巴矢量图标库里面的图标
阿里巴巴矢量图标库https://www.iconfont.cn/ 首先进行登录,然后才能下载里面的图标搜索里面的图标并添加到购物车点击右上角购物车将购物车里面的图标添加至项目书写项目名称可随 ...
微信小程序中怎么使用阿里图标库中的图标
我们知道,微信小程序的wxss文件中不论是背景还是图标都不能使用相对路径的,所以,以前我们可能会在css中使用阿里图标库,但是在微信小程序中使用阿里图标库,要做一些处理阿里图标库(不会使用的底下留言 ...
微信小程序中使用阿里巴巴字体图标
第一步:先收藏自己需要的图标到自己的项目中第二步:点击项目设置,并勾选base64位第三步:设置完成并保存后,下载至本地 ,并且将 iconfont.css 文件内的所有内容复制到小程序的wxss ...
vue项目引入阿里巴巴矢量图标库图标及其使用教程
添加喜欢的图标方式一:本地方式将图标引入到vue项目在main.js文件中引入阿里巴巴矢量图标库的css文件使用图标,注意加上iconfont前缀效果方式二:使用在线方式引入图标到vue项目 ...
小程序导入阿里巴巴矢量图标库图片
1.打开阿里巴巴矢量图标库:iconfont-阿里巴巴矢量图标库 2.将自己项目中需要的图片加入购物车 3.点击添加至项目 4.新建项目 5.生成在线链接 6.生成代码 7.小程序中新建wxss,将代 ...
微信小程序中使用阿里巴巴图标库
这里写自定义目录标题微信小程序中使用阿里巴巴图标库第一步第二步第三步微信小程序中使用阿里巴巴图标库第一步阿里巴巴图标正常加入自己的项目,并下载到本地: 注意:这里的选择 ![在这里插入图 ...
微信小程序开发-引入阿里巴巴矢量icon图标库
微信小程序开发-引入阿里巴巴矢量icon图标库 https://blog.csdn.net/tang1392/article/details/78927107
vue+element-ui项目引入第三方图标库：阿里巴巴矢量图标库（问题：小方框）
因为element-ui内置的小图标非常有限,所以有时候,我们需要自定义或引入第三方图标库. 先介绍下阿里巴巴矢量图标库iconfont: 这个截图只显示了第一行的图标库,还有很多. 也许,我们需要的 ...

在小程序中使用阿里巴巴矢量图标库

在小程序中使用阿里巴巴矢量图标库相关推荐

最新文章

热门文章