uni-app引入阿里图标

最新推荐文章于 2024-08-19 03:55:46 发布
最新推荐文章于 2024-08-19 03:55:46 发布
阅读量2.3k 收藏 2
点赞数 2
分类专栏： 前端 文章标签： uniapp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/monk96/article/details/102898355
版权

个人博客

今天刚好用uni-app在开发一个多端应用，在开始引用图标时不知道如何引入多端应用的图标，后来用阿里图标解决了，在此记录下解决的方法

  1. 去阿里图标官网下载阿里图标，选择unicode
    在这里插入图片描述

2.复制代码，在app.vue粘贴，注意：将链接都加上https
在这里插入图片描述
在这里插入图片描述
3.在main.js中引入下载的字体文件，一般放在static下
在这里插入图片描述
4.在页面中引用
在这里插入图片描述
大功告成
在这里插入图片描述

东哥爱编程
关注
专栏目录
uni-app使用阿里巴巴图标库icon详细步骤--避免踩坑
wwyxjjz的博客
07-26 1893
踩了很多坑~~ 最终终于找到可以使用阿里图标库的方法 简单方便 阿里巴巴图标库：https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2 近期阿里图标库更新了 没有之前的在线链接直接使用(如下图) 不要慌绝绝子来教你啊 怎么创建项目 加入图标 我这里就不再具体说了 一. 首先打开你的iconfont项目(......
【uniapp引入阿里字体图标】
ytfty24124的博客
10-28 531
nvue中不可直接使用 css 的方式引入字体文件，需要使用以下方式在 js 内引入。nvue 内不支持本地路径引入字体，请使用网络链接或者base64形式。src字段的url的括号内一定要使用单引号。
uni-app（使用阿里图标）
小林的博客
03-28 1310
uni-app，使用自定义图标
uniapp 使用 jquery app
最新发布
weixin_40905584的博客
08-19 79
在 uni-app 中使用 jQuery 的完整指南 随着前端开发的日益复杂，很多开发者选择使用 jQuery 来简化 DOM 操作和 AJAX 调用。虽然 uni-app 是一个基于 Vue.js 的框架，但我们仍然可以将 jQuery 集成到项目中。本文将逐步指导您如何在 uni-app 中使用 jQuery。 步骤流...
uniapp 引入阿里iconfont图标并使用
rain__chen的博客
07-17 2026
1、找到需要的图标 2 添加到库 3 4 添加到项目，没有项目的话要先建项目 5 6、将css文件复制到uniapp项目中 7、生成代码，替换url 8、使用 在要使用的页面导入
如何在uniapp项目引入阿里图标库的iconfont(线上)
it_laowu的博客
05-11 1961
小程序中使用图片太大怎么办, 来看uniapp小程序中是如何使用阿里矢量图标库的字体图标的
uniapp引入iconfont(阿里图标库)
曳猫的博客
04-28 1807
uni引入阿里图标库(iconfont) 1 首先找到自己要的图标 2 添加入库 3 添加到项目（选择或者新建项目添加） 4 下载到本地 5 解压下载的压缩包 6 复制iconfont.css 到项目 复制到项目的common 7 iconfont.css文件添加 以下代码 text[class*="icon-"], view[class*="icon-"], button[class...
使用uni-app搭建的企业OA app
03-23
在实现企业OA app的功能时，开发者可能会用到uni-app的组件如`uni-forms`（表单）、`uni-grid`（网格）、`uni-swiper`（轮播图）等，以及uniCloud（阿里云提供的云端服务）来实现数据的存储和同步，确保多平台的数据...
移动应用开发——基于uni-app框架
m0_61839930的博客
06-17 878
uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。DCloud公司拥有900万开发者、数百万应用、12亿手机端月活用户、数千款uni-app插件、70+微信/qq群。阿里小程序工具官方内置uni-app（详见），腾讯课堂官方为uni-app录制培训课程（详见），开发者可以放心选择。uni-app在手，做啥都不愁。即使不跨端，
uni-app引入阿里云矢量图标库
tianxingege_的博客
09-07 274
这段时间因为任务要求，要做一个小程序，所以开始学一下uni-app开发，现在写一下关于引入阿里云矢量图标库的方法 添加图标 首先去阿里巴巴矢量图标库选择你喜欢的图标 你可以在这搜索你想要的图标，选择好之后便把他添加到红色小车里 然后选择添加至项目（没有的可以自己建一个） 添加图标 进去我的项目之后，将下面的链接在浏览器打开。 也可以下载本地 把文件放到static里面 在index.html里面引入 ...
uniapp引入阿里图标
dtbk123的博客
10-18 609
在page.json里的配置项 { "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages { "path": "pages/index/index", "style": { "titleNView":{ "buttons":[{"fontSrc":"/sta...
uniapp开发App如何引入阿里巴巴矢量库图标
SSophia的博客
11-08 3197
uniapp开发App如何引入阿里巴巴矢量库图标
uni-app 引入阿里巴巴矢量图标详细步骤
weixin_71273777的博客
01-15 2291
在 class 中定义 iconfont。注：除了以上步骤其他步骤均没有改变。
在 uniapp 中使用阿里图标
糜家智の博客
07-05 4681
uniapp 使用阿里图标
uni-app引入iconfont阿里图标
只有一的博客
01-07 235
选择好图标， 添加进项目， 然后从iconfont官网下载文件： 下载好后,打开压缩包，打开里面的iconfont.css文件 4.把文件复制到项目里，这里我放在了common文件夹下 5.删除上图的蓝色框内的数据，只剩下如下图所示 6.加上src以及";" 7.引入样式，这里我在App.vue中引入为全局样式 8.使用图标 组件内使用 红色框里的数据是必填 9.效果 ...
uniapp使用阿里图标
m0_55333789的博客
08-02 1482
uniapp使用阿里图标
uniapp中引入阿里图标
GeniusMao的博客
08-17 564
一.在uniapp中发现，以往H5的阿里使用步骤失效了： 1.把图标加入购物车，在购物车里添加至项目，选择下载至本地 2.把文件夹里除了html和demo的全部粘贴至软件 3.link引入iconfont.css,在html文件中查看图标编码 4.<i class="iconfont">图标编码</i> 用i.iconfont{ fontsize}调整图标大小或者用类 <i class="iconfont 类名"> </i> 或伪类 li：：befo.
uni-app引入阿里图标【单色】
Chona
11-11 1500
uni-app引入阿里图标【单色】 上期简单的介绍了一下uni-app相信大家根据官方文档都已经了解的差不多了，创建项目应该是没有什么问题了，那么这期我就讲一下在uni-app怎么引入阿里图标——单色 之前文章中我有讲到小程序原生引入阿里图标，如果大家感兴趣的话可以看一下。uni-app引入阿里图标和小程序原生引入还是很不一样的 话不多说，开始！ 第一步：进入阿里图标官网https://www.iconfont.cn/选择自己需要的图标，当然你也可以让你们ui把设计图上的图标上传到阿里图标上 第二步：添加
uniapp使用阿里icon详细步骤
qq_33444716的博客
03-30 4225
1. 首先登录阿里icon,然后找到你想要用的图标全部加入到购物车，并且点击购物车，添加到相应的项目 2. 找到对应的icon项目，点击下载至本地 3.将红框框起来的文件放到项目中 4. 创建一个iconfont.css，做以下处理 @font-face { font-family: uniicons; font-weight: normal; font-style: normal; src:url('~@/static/font/iconfont.ttf') forma.
uni-app引入uni-request
05-10
Uni-request是一个基于Promise的网络请求库，适用于uni-app和小程序开发。如果想在uni-app中使用uni-request，需要先进行以下步骤： 1. 在HBuilderX中创建一个uni-app项目 2. 打开命令行工具，使用npm命令安装uni-request： ``` npm install uni-request ``` 3. 在需要发送网络请求的页面或组件中引入uni-request： ``` import request from '@/common/request.js' ``` 4. 在request.js文件中编写自己的请求方法，例如： ``` import { BASE_URL } from './config.js' import Request from 'uni-request' const request = new Request() request.interceptors.request.use(config => { config.baseUrl = BASE_URL return config }) export default request ``` 在这个示例中，我们将BASE_URL定义在config.js文件中，并通过拦截器将其添加到请求的baseUrl中。这样，我们就可以在发送请求时直接使用相对路径，而不需要每次都写全路径。 5. 在页面或组件中使用request发送网络请求，例如： ``` import request from '@/common/request.js' request.get('/api/user/info').then(res => { console.log(res.data) }) ``` 在这个示例中，我们通过request发送了一个GET请求，请求地址为"/api/user/info"。请求成功后，我们打印出了返回的数据。 注意：在使用uni-request发送网络请求时，需要在manifest.json文件中配置网络权限。可以在manifest.json文件中的"app-plus"-"permissions"节点中添加以下权限： ``` "app-plus": { "permissions": { "network": { "description": "用于发送网络请求" } } } ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

东哥爱编程

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值