uniapp中nvue项目引入阿里图标在线链接

最新推荐文章于 2023-05-09 10:26:52 发布
最新推荐文章于 2023-05-09 10:26:52 发布
阅读量254 收藏
点赞数
文章标签： uni-app vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47435082/article/details/129699494
版权

在app.vue文件中的onLaunch中引入代码，如下，注意url链接需要补全https，是阿里巴巴矢量图表库生成的后缀ttf那个文件，注意不要引入错了，这是只限于在app中使用，如果要兼容小程序的话还需要使用另外一种方式

onLaunch: function() {
			// #ifdef APP-PLUS-NVUE
			// 加载公共图标库
			const domModule = weex.requireModule('dom')
			domModule.addRule('fontFace', {
			    'fontFamily': "iconfont",
			    'src': "url('https://at.alicdn.com/t/c/font_3967784_2ywacc0vqqt.ttf')"
			});
			// #endif
			
		},

页面上使用，nvue页面中使用必须用text标签

<text class="iconfont font-lg">&#xe646;</text>

在这里插入图片描述

小伍先生啦
关注
uniapp - 引入使用阿里图标后在移动端显示“文件查找失败“不显示问题，但在h5端平台却可以正常显示（uniapp引入iconfont文件报错文件查找失败：./iconfont.woff?t=）
高级前端工程师
02-01 2134
uniapp，h5，移动端，阿里图标库，阿里巴巴图标，uniapp使用阿里图标库不显示怎么办，解决uniapp引入阿里图标报文件查找失败，uniapp报错iconfont文件报错文件查找失败，uniapp移动端不显示阿里图标， uniapp app中阿里图标库不能使用，uniapp项目中iconfont阿里云图标不显示，uni-app引入阿里矢量图在移动端不显示的问题，移动端不显示但在h5网页能显示，阿里图标在移动端无法显示怎么办，如何解决uniapp引入阿里图标后在h5能显示，但在移动端平台却不显示，un
uniapp
喵喵的博客
04-08 656
项目目录及文件介绍 一个uni-app项目，默认包含如下目录及文件： ┌─cloudfunctions 云函数目录（阿里云为aliyun，腾讯云为tcb，uniCloud详见 https://uniapp.dcloud.io/uniCloud ） │─components 符合vue组件规范的uni-app组件目录 │ └─wqq-banner │ └─wqq-banne.vue 可复用的a组件，若目录名和.vue文件名一致，不需要import也可以直接在页面中直接使用`<wqq-bann
vue页面和nvue页面 、引用阿里图标库-图标方法
qq_45500519的博客
07-21 513
引入阿里 字体图标
nvue使用阿里图标
chenronglong20的博客
05-12 299
1、template <template> <view> <text class="iconfont">&#xe665;</text> </view> </template> 2、js <script> const dom = weex.requireModule("dom"); dom.addRule("fontFace",{ fontFamily:"iconfont", /
nvue引入字体图标
m0_61950846的博客
10-19 450
nvue引入图标
vue使用阿里图标
m0_54570434的博客
11-30 1727
这样的引入是引入对应的 字体类 对其之前的颜色会去除（类似于黑白）需要自定义颜色，对于简单的图标去改变颜色用这种方式是非常友善的，不用担心fill占据。【1】（1）是示例 可去除 （2）是需要引入的 ，新建icon文件夹放入后 在main.js对应引入她的js和css。【2】复制图标代码(例：icon-icon_select) 再对应使用。【1】复制链接代码，在index.html引入。【1】复制链接代码，在index.html引入。【2】之后和 方法1 的【2】及后面步骤一样。
Nvue引入字体图标、subNvue使用字体图标
qq_44046765的博客
03-05 1497
如何在使用nvue或subNvue时添加字体图标库（线上地址） 在nvue中使用字体图标 在解决APP端使用video标签时，需要使用到subNvue原生子窗体，因为在APP端，video组件是属于原生组件，层级比所有的vue组件都要高，所以会出现video组件覆盖vue组件的问题，这个时候可以使用coverView组件或者使用subNvue来实现自定义播放器。 在使用subNvue时，需要导入自定义字体图标库，但是常规的css引入并不支持，所以只能使用weex提供的方式来引入字体图标库。 导入 /
【uniapp引入阿里字体图标】
ytfty24124的博客
10-28 542
nvue中不可直接使用 css 的方式引入字体文件，需要使用以下方式在 js 内引入。nvue 内不支持本地路径引入字体，请使用网络链接或者base64形式。src字段的url的括号内一定要使用单引号。
uni-app扫雷先锋之nvue的文字图标，封装自己的图标按钮
weixin_43139949的博客
11-25 828
uni-app扫雷先锋实际需求第一次遇坑第二次尝试-遇坑第三次尝试-图标出现了封装字体图标 上次还说nvue以后讨论今天就来了，nvue呀怎么说呢，官方的说法是性能好如何如何的，但是有些时候呢却逼着咱开发者不得不用，因为有些功能呢只有nvue有。。。比如地图组件的一大堆功能就只有nvue才能用，有些小伙伴说了引plus呀，可是引plus的话，小程序和app之间就会产生很多很多区别。行了废话就不多说了。。。 实际需求 字体图标这个东西相信搞开发的小伙伴们都不会陌生，用到它的地方特别的多，那么在nvue中它有多
uniapp引入阿里巴巴矢量图标库
m0_73075579的博客
05-09 430
第一部分：创建矢量图标库1.登录阿里巴巴矢量图标库，点击导航栏的资源管理-我的项目。2.点击右上角加号图标创建。3.根据实际情况填写信息，点击新建。 4.现在项目名为wx-app的图标库就已经创建完成，在刷新页面后，可以在“我发起的项目”中看到。第二部分：添加图标至图标库1.可以在首页进行搜索，寻找自己所需要的图标。2.这里点击搜索关键词“箭头” ，进入搜索结果页。3.将鼠标移动到我们想要添加的图标上，点击购物车，将图标添加进购物车。 4. 点击导航栏的购物车，可以看到我们刚才添加的图标，点击下方的添加至
uni-app里nvue页面引用iconfont图标经验分享
zhangdaren的专栏
06-09 7102
前言：发现社区在对nvue使用iconfont图标的文章还是比较少，在这里刚好遇到了，那就分享一下我的解决方法。 在项目中遇到了需要在nvue里使用iconfont图标， 刚开始照着社区搜索的答案：https://ask.dcloud.net.cn/question/64622 这样引入css文件： <style src="@/common/iconfont.css"><...
nvue使用阿里字体图标
qq_45768050的博客
03-20 398
nvue使用阿里字体图标 第一步：下载字体图标 第二步：复制ttf文件到相关项目目录下 第三步：使用
unapp的nvue页面怎么引入iconfont图标
qq_53244180的博客
01-26 269
unapp的nvue页面怎么引入iconfont图标
uni-app nvue项目使用iconfont字体图标
HRM2454的博客
07-23 3298
首先，选择自己想要的图标，添加至自己的项目，具体教程就不出了，相信能搜这个解决方案的人都会，iconfont官网戳这里 请一定要仔细看备注内容~~ 远程ttf文件方式 复制如下地址，补上前面补上https: 完整的地址为：https://at.alicdn.com/t/font_1911079_a4go6gdw4y6.ttf nvue页面代码，看备注哦~ <template> <view class="main-wrapper"> <!--...
uniapp 在nvue中使用阿里巴巴矢量图标不出现字体
wkx8324183的博客
10-11 683
项目中遇到需要使用subVues，子页面使用nvue来布局，但因为需要使用阿里巴巴矢量图标，因此在观看了文档后发现需要使用网络地址，在测试了许多次后可能会发现，当按照文档完成后，只是显示了dom占位的方框，没有正确显示字体，原因可能在于地址错误或者css里并没有设置iconfont样式，因此我展示下我的代码，以此来辨认自己是否哪里书写错误 请注意，dom标签必须使用text。此外如何按照上述图片敲写代码后仍发现展示不出icon，请确认代码或者网络地址是否正确。 ...
在uniapp、vue 中引入iconfont图标
weixin_48789376的博客
04-13 571
1、先在iconfont挑选图标(https://www.iconfont.cn/)，吧想要的图标先加入购物车 2、再将图标添加到项目中，没有项目的，可以先新建一个项目 3、将刚刚选的图标下载到本地 4、解压后，将需要的文件添加到项目中 5、复制以下代码，将iconfont.css中的内容替换 将原来文件中下面那部分内容替换成刚刚复制的内容，替换钱前： 替换后：再复制的内容连接前面要加上https 6、再在app.vue文件中引入样式 7、使用 <view class="iconfont icon
uniapp使用阿里巴巴在线图标库
mrqi122的博客
11-08 490
uniapp使用在线阿里图标库
uniapp vue和Nvue使用外部字体iconfont
weixin_45441173的博客
10-10 532
uniapp如何引入iconfont字体图标 1，选择好的图标添加到购物车，在购物车选择 font class =>下载至本地 2，在本地打开下载的iconfont.css文件进行复制到所需要的项目 eg：一般uniapp都是放在common==>css中 3.删除多余的 4.最后使用 ...
uniApp nvue如何使用阿里图标iconfont
tianxingege_的博客
09-07 1315
在项目中遇到了需要在nvue里使用iconfont图标， 刚开始照着社区搜索的答案：https://ask.dcloud.net.cn/question/64622 这样引入css文件： <style src="@/common/iconfont.css"></style> 然后再使用<div class=”iconfont icon-like”></div>，真机运行，纹丝不动，气人的是还没法调试…… 再次搜索发现社区都是只言片语，于是将搜索范围扩
uniapp小程序如何在线引入阿里图标库
最新发布
05-20
要在uniapp小程序中引入阿里图标库，您可以按照以下步骤操作： 1. 在您的uniapp小程序项目中找到 `App.vue` 文件，然后在该文件中加入以下代码： ```html <!-- 引入阿里图标库 --> <iconfont class="ali-icon" :style="{ fontFamily: 'iconfont' }"></iconfont> ``` 2. 在 `static` 目录下新建一个文件夹（例如 `iconfont`），将您下载好的阿里图标库文件（例如 `iconfont.ttf`）放到该文件夹中。 3. 打开阿里图标库官网，选择您需要的图标并添加到购物车中。在购物车页面下载图标代码包。 4. 解压缩下载的图标代码包，找到 `iconfont.css` 文件并复制其中的 CSS 代码。 5. 在您的 `App.vue` 文件中加入以下代码，将阿里图标库的 CSS 样式引入： ```html <style> @font-face { font-family: 'iconfont'; src: url('static/iconfont/iconfont.ttf') format('truetype'); } .ali-icon { font-size: 32px; color: #333; } /* 将从阿里图标库官网下载的 CSS 代码粘贴到这里 */ </style> ``` 6. 在粘贴的 CSS 代码中，将所有的 `font-family` 属性值改为 `iconfont`，以便与上面的 `@font-face` 代码相对应。 7. 至此，您已经成功将阿里图标库引入您的uniapp小程序项目中了。可以在需要使用图标的地方使用 `<iconfont class="ali-icon">&#x图标代码;</iconfont>` 的方式来使用阿里图标库中的图标。其中，`&#x图标代码;` 表示要使用的图标的代码，可以在阿里图标库官网上找到对应的代码。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值