uni-app引用外部图标库(阿里矢量图)

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

uni-app引用外部图标库(阿里矢量图)

作为前端程序员,nui-app是必备的,但是有时候内置的图标,组件又不完全满足,这里就可以引进外部图标,这里引用的是阿里矢量图标

第一步,在项目目录中新建文件夹,如图

uni-app引用外部图标库(阿里矢量图),uni-app

第二步,登上阿里矢量图官网,将自己需要的图片先加入购物车,再点击右上角购物车 

uni-app引用外部图标库(阿里矢量图),uni-app

 uni-app引用外部图标库(阿里矢量图),uni-app

uni-app引用外部图标库(阿里矢量图),uni-app

第三部,将下载好的压缩包解压,打开文件,将 iconfont.css 和 iconfont.ttf 两个文件复制到新建的icon文件夹下uni-app引用外部图标库(阿里矢量图),uni-app 

第四步,回到阿里官网,进入购物车,将刚刚加的图标添加项目,没有可新建,这个无所谓 

uni-app引用外部图标库(阿里矢量图),uni-app

 第五步,打开 iconfont.css ,将@font-face内容替换掉,并在//前加 https: ,替换好后如下图

uni-app引用外部图标库(阿里矢量图),uni-app

 uni-app引用外部图标库(阿里矢量图),uni-app

第六部,页面应用

uni-app引用外部图标库(阿里矢量图),uni-app

 效果图:

uni-app引用外部图标库(阿里矢量图),uni-app文章来源地址https://www.toymoban.com/news/detail-623566.html

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

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

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

相关文章

  • uni-app打开外部链接方式汇总(h5&app)

    问题描述 在应用中打开一个外部的html页面,即完整http链接的页面。h5通过window.open或是内嵌iframe基本都没有问题,本文主要针对app端的方法进行汇总,不涉及到小程序端。 方案1 使用uni-app的扩展组件 uni-link ,使用参考文档uni-app官网 该组件的行为是在app内打开外部浏览器,

    2024年02月01日
    浏览(47)
  • uni-app中使用iconfont彩色图标

    大家好,今天我们来学习一下uni-app中使用iconfont彩色图标,好好看,好好学,超详细的 首先,从iconfont官网(iconfont-阿里巴巴矢量图标库)选择自己需要的图标加入项目中,点击下载至本地,如图 在本地找到下载的压缩包,并解压,进入解压缩之后的文件,在地址栏中输入

    2024年02月11日
    浏览(40)
  • 在uni-app项目中简单使用iconfont字体图标

    1.1 减小打包体积,一些平台如微信小程序等在发布时有体积限制,大量使用静态资源会使得打包体积容易超出限制 1.2 字体图标是矢量的,缩放不失真、模糊 1.3 对比引用多个网络图标,字体图标只需一个css文件即可,因此减少了网络请求次数,同时比下载图片节约流量 2.1

    2024年02月05日
    浏览(61)
  • 关于uni-app 外部系统联登遇到的坑

    由于鄙人用了uni-app的即时通讯,所以用户体系必须同步uni-app那边的。这些操作也必须由自己的服务器来完成,所以需要把uni-app那边的接口进行url化。 uni-app的文档地址:云对象(uni-id-co) | uniCloud 所用的接口为 POST /your-uni-id-co-path/externalRegister POST /your-uni-id-co-path/externalLogi

    2024年03月28日
    浏览(50)
  • 【uni-app】只支持在微信小程序运行的 导入外部3d模型

    uniapp 导入3d模型,在微信小程序端运行。只支持在微信小程序端使用,若要支持 h5 和 APP端,可以查看这篇,点击这里 只导入了3d模型,未设置让模型动。 glb 格式 (1)首先文件 下载适配微信小程序的 three.js 地址:https://github.com/wechat-miniprogram/threejs-miniprogram (2)导入文件

    2023年04月08日
    浏览(55)
  • 三种方式在HTML使用阿里字体图标--iconfont阿里巴巴矢量图标库

    好久没用到阿里巴巴的图标,突然要用到就发现不会用了,只会导出png格式的图标png了= = 目录 1、字体图标 方法一、本地使用通过类名使用阿里矢量图标 1、把图标添加入库 2、把图标添加到项目  3、下载字体图标 4、使用文件 5、在对应的HTML页面上引入css 6、使用字体图标

    2024年02月16日
    浏览(87)
  • uniapp引入阿里巴巴矢量图标库

    首先:打开阿里巴巴矢量图标库 iconfont-阿里巴巴矢量图标库   2.注册账号并进行登录操作,如果已经有账号了直接进行登录操作 3.选择需要的图标,点击添加入库 4.点击购物车图标,查看添加入库的图标    输入项目名称,然后点击确认即可 5.点击生成代码  6.点击下载到本

    2024年01月17日
    浏览(72)
  • 在WPF应用中,结合阿里矢量图标库使用Geometry图标

    在我们的SqlSugar开发框架的WPF应端中,有时候我们需要在按钮或者其他界面元素上使用一些图标,框架中我们可以使用 lepoco/wpfui 项目的图标库,也可以使用Font-Awesome-WPF 图标库,另外我们如果喜欢阿里矢量图标库的,也可以通过使用Geometry图标来实现图标的展示,本篇随笔介

    2024年01月25日
    浏览(63)
  • vue 项目中使用阿里巴巴矢量图标库

    1.网址:https://www.iconfont.cn/ 2.手动创建自己的项目图标库 选中图标 → 添加入库(点击购物车)→ 完成后点击上方菜单栏的购物车 → 添加至项目(没有则新建项目)→ 自动打开项目图标库 → 点击下载至本地 → 点击demo包的demo_index.html,上面有三种使用方式,分别是Unicode、

    2024年02月15日
    浏览(64)
  • AI绘图实战(十):制作线稿矢量图之包头巾的女人,画矢量图/生成矢量图/导出矢量图/直出svg/vector studio插件使用 | Stable Diffusion成为设计师生产力工具

    S:AI能取代设计师么? I :至少在设计行业,目前AI扮演的主要角色还是超级工具,要顶替?除非甲方对设计效果无所畏惧~~ 预先学习 : 安装及其问题解决参考:《Windows安装Stable Diffusion WebUI及问题解决记录》; 运行使用时问题《Windows使用Stable Diffusion时遇到的各种问题整理

    2024年02月09日
    浏览(44)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包