uni-app引用外部图标库（阿里矢量图）

9月前作者：大可- 分类：Toy博客阅读(50) 违法举报

这篇具有很好参考价值的文章主要介绍了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日
浏览(44)
uni-app中使用iconfont彩色图标

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

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

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

2024年02月05日
浏览(57)
关于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日
浏览(46)
【uni-app】只支持在微信小程序运行的导入外部3d模型

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

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

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

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

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

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

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

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

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

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

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

2024年02月09日
浏览(42)