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日
    浏览(54)
  • [Vue]从数据库中动态加载阿里巴巴矢量图标的两种方式

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

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

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

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

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

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

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

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

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

    2024年02月03日
    浏览(91)
  • Java阿里巴巴代码规范

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

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

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

    2024年01月22日
    浏览(107)
  • 阿里巴巴今年计划招聘15000人

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

    2024年02月06日
    浏览(84)
  • OpenVPN服务器,面试阿里巴巴

    四、OpenVPN****实验案例 说明: 实验需要三台设备,由于OpenVPN的服务端程序和客户端程序需要到网上下载,因此在此实验中VPN服务器和远程客户端需要具有上网功能。将虚拟交换机vmnet8改为nat模式,并设置网关为172.16.0.2。 VPN服务器: ens33连接企业内网vmnet1上 ip地址:192.168.

    2024年04月25日
    浏览(73)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包