最新版微信小程序如何引入iconfont阿里矢量图库解决方案

最新版微信小程序如何引入iconfont阿里矢量图库解决方案前言:问题引发的原因来自最近在写微信小程序教学项目,项目中的一个图片是我随手切的,因为之前在Vue项目中一直在使用阿里矢量图库,我就想把阿里矢量图库ico图标集成到自己项目中,百度看了一些博客跟着做都引入不成功,研究了二十分钟弄出来,特此记录一下,同时作为参考文档供教学使用。1、首先我们打开阿里矢量官网接着我们需要登录一下,如果没有账号这里可以使用微博注册登录一下,登录成功后,点击【资源管理–>>我的项目】接着我们点击【新建项目】填写【项目名称:这里随便…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

前言:

        问题引发的原因来自最近在写微信小程序教学项目,项目中的一个图片是我随手切的,因为之前在Vue项目中一直在使用阿里矢量图库,我就想把阿里矢量图库ico图标集成到自己项目中,百度看了一些博客跟着做都引入不成功,研究了二十分钟弄出来,特此记录一下,同时作为参考文档供教学使用。


        1、首先我们打开阿里矢量官网接着我们需要登录一下,如果没有账号这里可以使用微博注册登录一下,登录成功后,点击【资源管理–>>我的项目】接着我们点击【新建项目】填写【项目名称:这里随便填写】接着填写【项目描述:这里也随便填写】接着点击【新建即可完成项目创建】具体详细操作步骤可看下图.

最新版微信小程序如何引入iconfont阿里矢量图库解决方案
1、注册、登录、新建项目、操作图

        2、当我们把项目创建完毕后,我们可以在导航栏右上角【搜索】,搜索自己需要的ico图标,添加到购物车中,或者我们可以点击首页去【搜索】,或者选择【插画库】,或【图标库】,去添加自己需要的ico图标到【购物车】中即可。接着我们点开【购物车】图标,我们选中的图标就出现在这里,此时我们把这些图标添加到我们刚刚新创建的项目中即可,具体操作步骤看下图。

最新版微信小程序如何引入iconfont阿里矢量图库解决方案
2、选择ico图标、添加购物车、添加到项目

         3、完成上面一步后,我们接着进入我们创建的项目中我们点击【Font class】然后点击下面生成代码完成后,我们点下面的链接然后打开,打开后我们全选代码然后复制一下即可,具体操作步骤看下图。

最新版微信小程序如何引入iconfont阿里矢量图库解决方案
3、生成代码复制操作图

         4、打开我们微信小程序的项目,然后把我们刚刚复制的代码添加到【app.wxss】文件中,接着打开我们要使用icon图标的wxml文件我这里是【index.wxml】然后我们写一个【text组件】在text组件我们添加一个class属性然后在上面写上【class=”iconfont  图标名称”】然后编译以下当前项目即可在模拟器中出现,具体操作步骤请看下图。

最新版微信小程序如何引入iconfont阿里矢量图库解决方案
4、ico图标在小程序中的使用

         5、由于我们把所有ico样式都放在app.wxss文件中不是很合理,所以我们要把它们都提取出来,这里我们首先吧app.wxss文件中的样式代码复制一下,接着我们在项目根目录创建一个style文件夹,然后在style文件中创建一个 iconfont.wxss文件,然后把我们从app.wxss中复制的代码粘贴进来然后保存,接着我们打开 app.wxss文件我们通过@import引入一下我们刚刚创建的iconfont.wxss文件即可,具体操作步骤看下图。

 

最新版微信小程序如何引入iconfont阿里矢量图库解决方案
5、提成app.wxss中的样式封装操作步骤

后记

        到这里我们微信小程序引入 iconfont阿里矢量图库教程就完结了,这里值得注意一点【class=”iconfont  图标名称”】这里的图标名称来自我们项目库下方的名字,或我们样式文件中的.xxx名字直接复制即可,第5操作图最后有打开官网可看见图标名称。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/234165.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • kettle基础教程-kettle9教程「建议收藏」

    kettle基础教程-kettle9教程「建议收藏」一.安装部署1.JDK1.8安装及环境变量的配置https://blog.csdn.net/weixin_39549656/article/details/795406442.kettle9安装与启动kettle下载目录:https://sourceforge.net/projects/pentaho/files/kettle9.2下载地址:https://sourceforge.net/projects/pentaho/files/Pentaho-9.2/client-tool

  • Redis设置密码_mac初始密码是多少

    Redis设置密码_mac初始密码是多少redis默认情况下是没有开启密码访问功能,需要配置redis.config文件。1、找到配置文件并且打开~%vi/usr/local/redis-6.2.6/redis.conf当前文件搜索/requirepass,键盘上按n一个个查看,找到#requirepassfoobared,修改为requirepass123(密码),保存退出。2、重启redis服务器<127.0.0.1:6379>shutdown​~%redis-server这.

  • 检查网站有没有被挂马_网站在线挂马检测工具

    检查网站有没有被挂马_网站在线挂马检测工具首先,我们来看看网站被挂马的危害性。网站被挂马后,一方面是系统资源,流量带宽资源的巨大损失,另一方面也成为了传播网页木马的“傀儡帮凶”,严重影响到网站的公众信誉度。很多网页木马都是利益驱动,偷盗各类帐号密码,如电子银行帐户和密码、游戏帐号和密码、邮箱帐户和密码、qq/MSN帐号和密码等;另外,使得客户端被安装恶意插件,强迫浏览黑客指定的网站,或者被利用攻击某个站点等。  我们知道了网站被挂马

  • vscode前端插件安装「建议收藏」

    vscode前端插件安装「建议收藏」1.修改语言,如果英语六级的话,便就可以不用修改,按住ctrl+shift+x打开拓展,安装LanguagePacks插件,然后按住Ctrl+Shift+P打开命令调色板,搜索ConfigureDisplayLanguage命令然后按Enter键,将locale.json创建一个文件,其默认值设置为您的操作系统语言。修改为zh-cn语言即可。2.HTMLSnippets:超级实用且初级的H5代码片段以及提示;3.HTMLHint:html代码检测;4.HTMLCSSSupp

  • 万能网站_我还收集了

    万能网站_我还收集了1、http://www.zitanglj.com/index.htm2、http://www.nkhqlncdj.com/

    2022年10月18日
  • CAS单点登录原理解析

    CAS单点登录原理解析推荐阅读1.SpringBoot整合篇2.手写一套迷你版HTTP服务器3.记住:永远不要在MySQL中使用UTF-84.Springboot启动原理解析1、基于Cookie的单点登录的回顾基于Cookie的单点登录核心原理:将用户名密码加密之后存于Cookie中,之后访问网站时在过滤器(filter)中校验用户权限,如果没有权限则从Cookie中取出用户名…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号