最新版微信小程序如何引入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

相关推荐

  • Maven pom.xml

    Maven pom.xml

  • linux怎么编写shell脚本_简单的shell脚本代码

    linux怎么编写shell脚本_简单的shell脚本代码用springboot框架做的项目,将第三方包全部打在jar里面,通过shell脚本启动和停止服务,常用的shell脚本模板如下:#!/bin/bashJAVA_OPTIONS_INITIAL=-Xms128MJAVA_OPTIONS_MAX=-Xmx512M_JAR_KEYWORDS=monitor-alarm-task-1.0-SNAPSHOT.jarAPP_NAME=monitor-al…

  • java中hashmap的实现原理与底层数据结构

    java中hashmap的实现原理与底层数据结构Hashmap是java面试中经常遇到的面试题,大部分都会问其底层原理与实现,本人也是被这道题问惨了,为了能够温故而知新,特地写了这个博客,以便时时学习。Hash结构HashMap根据名称可知,其实现方法与Hash表有密切关系。在讨论哈希表之前,我们先大概了解下其他数据结构在新增,查找等基础操作执行性能。数组:采用一段连续的存储单元来存储数据。对于指定下标的查找,时间复杂度为O(1);通过给…

  • python遍历本地文件系统 按文件大小排序

    python遍历本地文件系统 按文件大小排序

    2021年11月21日
  • 小米9刷面具和模块[通俗易懂]

    小米9刷面具和模块[通俗易懂]准备工作:没解BL锁的需要先解锁1.按住音量键下和关机键进入Fastboot模式连接电脑2.这里使用奇兔刷机连接手机,中途会自动安装驱动,若安装驱动失败可使用驱动精灵或驱动人生手动安装驱动.安装完驱动后奇兔刷机会显示已经连接到手机开启root:1.下载twrphttps://twrp.me/xiaomi/xiaomimi9.html2.1.把Magisk-v20.4.zip和magisk-taichi

  • 猴子摘香蕉_猴子香蕉游戏下载

    猴子摘香蕉_猴子香蕉游戏下载注意:不是严格按照一阶谓词逻辑写法,仅供参考题目:房内有一个猴子,一个箱子,天花板挂了一串香蕉,其位置如图所示。猴子为了拿到香蕉,它必须把箱子搬到香蕉下面,然后再爬到箱子上。请定义必要的谓词,列出问题的初始化状态(即下图所示状态),目标状态(猴子拿到了香蕉,站在箱子上,箱子位于位置b)步骤:1、定义描述环境状态的谓词AT(x,y)x在y处x={monke…

发表回复

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

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