#大哥云-国内移动联通质量优秀# #Jtti 9月促销:云服务器2.5折最低$ 2.4/月起,CN2三网大陆直连/免费换IP/解锁流媒体#
#大哥云-国内移动联通质量优秀#

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

0 2109
在百度小程序或者其他小程序中使用阿里巴巴矢量图标库是为了提高小程序渲染加载,因为小程序文档内都不建议把所有的图片和图标文件放在小程序端,在小程序中使用阿里巴巴矢...

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

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

然后进入矢量图标项目生成代码(代码中的路径为 阿里云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 标签。

最后修改时间:
彧繎叔叔
上一篇 2021年10月06日 22:02
下一篇 2021年10月10日 04:47

相关文章

发表评论

  • 验证码

评论列表

暂无评论