uniapp引入阿里巴巴矢量图标库

这篇具有很好参考价值的文章主要介绍了uniapp引入阿里巴巴矢量图标库。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

首先:打开阿里巴巴矢量图标库

iconfont-阿里巴巴矢量图标库

uniapp 引入图标库,前端,uni-app,vue.js,前端  2.注册账号并进行登录操作,如果已经有账号了直接进行登录操作

3.选择需要的图标,点击添加入库

uniapp 引入图标库,前端,uni-app,vue.js,前端

4.点击购物车图标,查看添加入库的图标 

uniapp 引入图标库,前端,uni-app,vue.js,前端uniapp 引入图标库,前端,uni-app,vue.js,前端

uniapp 引入图标库,前端,uni-app,vue.js,前端 

输入项目名称,然后点击确认即可

5.点击生成代码

uniapp 引入图标库,前端,uni-app,vue.js,前端 6.点击下载到本地

uniapp 引入图标库,前端,uni-app,vue.js,前端

 uniapp 引入图标库,前端,uni-app,vue.js,前端

左下角生成了一个压缩包,找到压缩包进行解压操作, 解压缩后复制解压后的全部文件到uniapp项目的common文件夹中(若没有该文件夹,可以新建一个)

uniapp 引入图标库,前端,uni-app,vue.js,前端

uniapp 引入图标库,前端,uni-app,vue.js,前端上面就是解压后的文件夹

 7,如果是新建的项目,我们就直接把解压后的文件夹复制到我们的common文件夹下,如果是在原有的项目中进行了进的添加,那么就需要进行一个替换的操作

uniapp 引入图标库,前端,uni-app,vue.js,前端

 去到项目中复制代码,然后打开iconfont.css文件,替换@font-face中的内容

uniapp 引入图标库,前端,uni-app,vue.js,前端

 8.项目中全局引入

uniapp 引入图标库,前端,uni-app,vue.js,前端

 9.页面中使用图标

uniapp 引入图标库,前端,uni-app,vue.js,前端

 文章来源地址https://www.toymoban.com/news/detail-799346.html

 

到了这里,关于uniapp引入阿里巴巴矢量图标库的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 阿里巴巴矢量图标库在uni-app中的使用方法

    开发工具为:HBuilderX 步骤1: 先将喜欢的字体图标加入购物车中  点击购物车然后点击添加至项目  有就选择没有就新建 步骤2: 1.将项目文件下载至本地  2.打开下载到本地的项目文件,将箭头所指的四个文件放入项目的static目录下(可以新建个文件夹放入,方便管理) 3.打开i

    2024年01月20日
    浏览(38)
  • [Vue]从数据库中动态加载阿里巴巴矢量图标的两种方式

    记录一次在Vue中动态使用阿里巴巴矢量图标库 这是本人第一次使用阿里巴巴的矢量图标库,简单的导入和使用的话网上的教程很多,这里不多赘述,本人的需求是从数据库中加载出来并且显示到页面上,接下来简述一下如何实现。 以下代码均是本人实际推敲、测试可用后写

    2024年01月20日
    浏览(41)
  • 钉钉小程序引用阿里巴巴图标

    2.打开的界面如图,先建一个iconfont.acss文件,全选浏览器打开的样式代码,复制粘贴进新建的iconfont.acss文件中 3.使用

    2024年02月11日
    浏览(45)
  • 前端项目,个人笔记(二)【Vue-cli - 引入阿里矢量库图标 + 吸顶交互 + setup语法糖】

    目录 1、项目中引入阿里矢量库图标 2、实现吸顶交互 3、语法糖--script setup 3.1、无需return  3.2、子组件接收父组件的值-props的使用 3.3、注册组件 步骤一 :进入阿里矢量库官网中:iconfont-阿里巴巴矢量图标库  ,挑选自己需要的图标:         我在查看其他博主的博客时

    2024年04月16日
    浏览(41)
  • 【饿了么UI】elementUI密码框图标实现睁眼和闭眼效果(阿里巴巴iconfront图标库vue项目本地引用)

    elementUI中输入框的密码框属性, 默认是一个始终睁眼的图标,测试今天提bug要有闭眼效果(无大语)… 因为elementUI中的icon没有闭眼的,所以还要去iconfront下载引入 效果图: 点击后 https://www.iconfont.cn 搜索闭眼,找到合适图表,加入购物车,然后点击右上购物车,下载代码

    2024年02月07日
    浏览(46)
  • 阿里巴巴集团

    阿里巴巴集团控股有限公司 (简称:阿里巴巴集团) 是马云带领下的18位创始人于1999年在浙江省杭州市创立的公司。 [272]  阿里巴巴集团经营多项业务,另外也从关联公司的业务和服务中取得经营商业生态系统上的支援。业务和关联公司的业务包括:淘宝网、天猫、聚划算

    2024年02月03日
    浏览(51)
  • 溯源阿里巴巴的中台架构

    明朝可以说是中国封建王朝中最后一个由汉人统治的王朝,就算是最后清王朝也是不断的学习汉人的治国方略,但是学习最多的当然是明朝。 其实阿里巴巴的中台战略其实和明朝的历史还是蛮像的,这里小编就和大家好好的探讨一下。 今天先来从明朝的治国方略中去解析架

    2024年01月22日
    浏览(55)
  • Java阿里巴巴代码规范

    想学习架构师构建流程请跳转:Java架构师系统架构设计 我们介绍了让代码规范的方案,下面我们就来说一下阿里的代码规范文档 1.1.1 反例 这种操作很容易产生难以排查的NPE异常 1.1.2 正例 入参以及出参,和参数传递类型是一致的 SimpleDateFormat 是线程不安全的类,一般不要定

    2024年02月10日
    浏览(54)
  • 阿里巴巴今年计划招聘15000人

    据媒体报道,阿里巴巴集团宣布将在2023年招聘15000名新员工,其中包括3000名校招人才。 这一消息的发布,也为最近关于淘宝天猫、阿里云、菜鸟、本地生活等业务裁员的谣言敲响了谣言的警钟。 阿里巴巴官微表示,“近日,关于淘宝天猫、阿里云、菜鸟、本地生活各个业务

    2024年02月06日
    浏览(47)
  • 华为OD机考--阿里巴巴黄金箱

    贫如洗的樵夫阿里巴巴在去砍柴的路上,无意中发现了强盗集团的藏宝地,藏宝地有编号从0~N的箱子每个箱子上面贴有一个数字箱子中可能有一个黄金宝箱。 黄金宝箱满足排在它之前的所有箱子数字和等于排在它之后的所有箱子数字之和; 一个箱子左边部分的数字和定义为

    2024年02月14日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包