uni-app nvue项目使用iconfont字体图标

最新推荐文章于 2024-05-31 19:52:03 发布
最新推荐文章于 2024-05-31 19:52:03 发布
阅读量3.1k 收藏 3
点赞数 2
分类专栏： uni-app 文章标签： uni-app nvue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HRM2454/article/details/107544283
版权

首先，选择自己想要的图标，添加至自己的项目，具体教程就不出了，相信能搜这个解决方案的人都会，iconfont官网戳这里

 

请一定要仔细看备注内容~~

 

远程ttf文件方式

复制如下地址，补上前面补上https:  完整的地址为：https://at.alicdn.com/t/font_1911079_a4go6gdw4y6.ttf

 nvue页面代码，看备注哦~

<template>
	<view class="main-wrapper">
		<!-- 你可以直接写编码，直接写编码格式如下，直接赋值iconfont官网的UniCode -->
		<view class="ly-row">
			<text class="ly-icon">&#xe852;</text>
		</view>
		<view class="ly-row">
			<text class="ly-icon">&#xe854;</text>
		</view>
		
		<!-- 也可以从data中取 -->
		<view class="ly-row">
			<text class="ly-icon">{{icons.check}}</text>
		</view>
		<view class="ly-row">
			<text class="ly-icon">{{icons.radio}}</text>
		</view>
	</view>
</template>

<script>
	// 如果需要做多端编译，建议总是加上条件编译
	// #ifdef APP-NVUE
	const dom = weex.requireModule('dom');
	dom.addRule('fontFace', {
	    fontFamily: 'lyicon',
	    src: "url('https://at.alicdn.com/t/font_1911079_a4go6gdw4y6.ttf')"
	});
	// #endif
	export default {
		data() {
			return {
				icons: {
					// 'check': '&#xe855;', // 这种方式图标会显示不出来，需要转换成以下格式 &#x 换成 \u ，末尾的分号去掉
					'check': '\ue855',
					'radio': '\ue86b'
				}
			}
		}
	}
</script>

<style>
	/* 非nvue端 后边加上 format('truetype')  */
	/* #ifndef APP-NVUE */
	@font-face {
		font-family: "lyicon";
		src: url('https://at.alicdn.com/t/font_1911079_a4go6gdw4y6.ttf') format('truetype');
	}
	/* #endif */
	
	.ly-icon {
		font-family: lyicon;
		font-size: 36rpx;
		color: #007AFF;
	}
	
	.main-wrapper {
		margin-top: 30rpx;
	}
	
	.ly-row {
		margin-top: 30rpx;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: center;
	}
	
	.ly-text {
		font-size: 30rpx;
	}
</style>

 

 

本地ttf文件方式

还是刚才那一个路径，复制后前面拼接上https: ，粘贴到浏览器地址栏按回车，ttf文件就会下载下来

下载下来后，复制到项目static文件夹下，因为是静态文件，请一定放到static文件夹下，然后可以重新命名

nvue页面代码，看备注哦~

<template>
	<view class="main-wrapper">
		<!-- 你可以直接写编码，直接写编码格式如下，直接赋值iconfont官网的UniCode -->
		<view class="ly-row">
			<text class="ly-icon">&#xe852;</text>
		</view>
		<view class="ly-row">
			<text class="ly-icon">&#xe854;</text>
		</view>
		
		<!-- 也可以从data中取 -->
		<view class="ly-row">
			<text class="ly-icon">{{icons.check}}</text>
		</view>
		<view class="ly-row">
			<text class="ly-icon">{{icons.radio}}</text>
		</view>
	</view>
</template>

<script>
	// 如果需要做多端编译，建议总是加上条件编译
	// #ifdef APP-NVUE
	const dom = weex.requireModule('dom');
	dom.addRule('fontFace', {
	    fontFamily: 'lyicon',
	    src: "url('/static/lyicon.ttf')"
	});
	// #endif
	export default {
		data() {
			return {
				icons: {
					// 'check': '&#xe855;', // 这种方式图标会显示不出来，需要转换成以下格式 &#x 换成 \u ，末尾的分号去掉
					'check': '\ue855',
					'radio': '\ue86b'
				}
			}
		}
	}
</script>

<style>
	/* 非nvue端 后边加上 format('truetype') */
	/* #ifndef APP-NVUE */
	@font-face {
		font-family: "lyicon";
		src: url('/static/lyicon.ttf') format('truetype');
	}
	/* #endif */
	
	.ly-icon {
		font-family: lyicon;
		font-size: 36rpx;
		color: #007AFF;
	}
	
	.main-wrapper {
		margin-top: 30rpx;
	}
	
	.ly-row {
		margin-top: 30rpx;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: center;
	}
	
	.ly-text {
		font-size: 30rpx;
	}
</style>

 

本地base64方式

同上，将ttf文件下载到本地，然后转换为base64编码，转换网站戳这里

"url('data:font/truetype;charset=utf-8;base64,转码后的内容替换到这里来')"

nvue页面代码，看备注哦~

<template>
	<view class="main-wrapper">
		<!-- 你可以直接写编码，直接写编码格式如下，直接赋值iconfont官网的UniCode -->
		<view class="ly-row">
			<text class="ly-icon">&#xe852;</text>
		</view>
		<view class="ly-row">
			<text class="ly-icon">&#xe854;</text>
		</view>
		
		<!-- 也可以从data中取 -->
		<view class="ly-row">
			<text class="ly-icon">{{icons.check}}</text>
		</view>
		<view class="ly-row">
			<text class="ly-icon">{{icons.radio}}</text>
		</view>
	</view>
</template>

<script>
	// 转码网站 https://www.motobit.com/util/base64-decoder-encoder.asp
	// "url('data:font/truetype;charset=utf-8;base64,转码后的内容替换到这里来')"
	
	// 如果需要做多端编译，建议总是加上条件编译
	// #ifdef APP-NVUE
	const dom = weex.requireModule('dom');
	dom.addRule('fontFace', {
		'fontFamily': "lyicon",
		'src': "url('data:font/truetype;charset=utf-8;base64,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')"
	});
	// #endif
	
	export default {
		data() {
			return {
				icons: {
					// 'check': '&#xe855;', // 这种方式图标会显示不出来，需要转换成以下格式 &#x 换成 \u ，末尾的分号去掉
					'check': '\ue855',
					'radio': '\ue86b'
				}
			}
		}
	}
</script>

<style>
	/* 非nvue端，后边加上 format('truetype') */
	/* #ifndef APP-NVUE */
	@font-face {
		font-family: "lyicon";
		src: url('data:font/truetype;charset=utf-8;base64,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') format('truetype');
	}
	/* #endif */
	
	.ly-icon {
		font-family: lyicon;
		font-size: 36rpx;
		color: #007AFF;
	}
	
	.main-wrapper {
		margin-top: 30rpx;
	}
	
	.ly-row {
		margin-top: 30rpx;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: center;
	}
	
	.ly-text {
		font-size: 30rpx;
	}
</style>

 

 

最终的效果

凉音、
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
关于nvue引用iconfont阿里图标库
weixin_45477816的博客
12-18 1014
第一次写终端机，踩坑uniapp,由于终端机安卓版本太低且内核版本也很低导致开发出来的安卓包运行交互方面有两到三秒的延迟时间，实在影响体验，最终返工用nvue，确实是解决了高延迟问题，但是也是踩了不少坑（nvue对于一些css样式的不兼容以及各种各样的问题） 下面讲一下遇到的坑： nvue引用阿里图标库 ...
uniapp 在nvue中使用阿里巴巴矢量图标不出现字体
wkx8324183的博客
10-11 647
项目中遇到需要使用subVues，子页面使用nvue来布局，但因为需要使用阿里巴巴矢量图标，因此在观看了文档后发现需要使用网络地址，在测试了许多次后可能会发现，当按照文档完成后，只是显示了dom占位的方框，没有正确显示字体，原因可能在于地址错误或者css里并没有设置iconfont样式，因此我展示下我的代码，以此来辨认自己是否哪里书写错误 请注意，dom标签必须使用text。此外如何按照上述图片敲写代码后仍发现展示不出icon，请确认代码或者网络地址是否正确。 ...
uniapp 添加字体ttf
最新发布
tengyuxin的博客
05-31 740
在uniapp中使用字体，一共分成两种情况，一种是普通vue页面，一种是nvue页面引入字体。。
在uni-app中引用iconfont,和遇到图标引入不显示的问题记录
weixin_42674490的博客
06-30 2401
1.在iconfont.css中，需要使*~@* 将路径添加完整 如： @font-face { font-family: "iconfont"; /* Project id 2642111 */ src: url('~@/static/fonts/iconfont.woff2?t=1625021641165') format('woff2'), url('~@/static/fonts/iconfont.woff?t=1625021641165') format('woff'),
解决uni-app无法使用icon-font彩色图标(Symbol方式)
FantasyWeirdo的博客
07-08 1758
解决uni-app无法使用icon-font彩色图标(Symbol方式)
uniapp使用iconfonts图标不显示以及颜色问题
Mitin_的博客
08-16 8065
1，首先到iconfont官网中找到我的项目，然后点击查看在线连接，点击打开css文件，复制其中的src路径，粘贴到项目的对应的css文件下，然后加上https即可。在uniapp中使用阿里的iconfont图标遇到了图标无法显示出来的问题，复制完之后粘贴到本地的对应的iconfont.css文件中。颜色的话也可以在iconfont.css文件中设置 ，如下。在iconfont.css文件中，修改为以下这样的路径。以及图标显示了但是为一个小正方形的问题，同时包括图标颜色不显示的问题。...
uni app 小程序中的引用的iconfont图标后预览不出页面的问题
lyh9503的博客
05-07 859
之前引用了阿里的图标，发现小程序在预览的时候页面是空白的，只有在调试的时候才出现内容， 解决方法 用手机扫码预览小程序页面，点击页面右上角三个小点，选中开发调试功能，页面就出出现一个vConsole按钮，打开就能到报错信息， 原来是下载的iconfont包里面的js文件报错，将文件注释掉以后，页面还能显示图标，只是用图标的话没有影响， 这样预览就可以出现了内容了， ...
uniapp vue和Nvue使用外部字体iconfont
weixin_45441173的博客
10-10 508
uniapp如何引入iconfont字体图标 1，选择好的图标添加到购物车，在购物车选择 font class =>下载至本地 2，在本地打开下载的iconfont.css文件进行复制到所需要的项目 eg：一般uniapp都是放在common==>css中 3.删除多余的 4.最后使用 ...
uni-app nvue沉浸式状态栏（线性渐变色）.vue
12-17
uni-app nvue沉浸式状态栏（线性渐变色）.vue
uni-app项目练习2
05-16
【uni-app项目练习2】 uni-app是一个由DCloud(即HBuilderX)开发的多端开发框架，它允许开发者编写一次代码，就可以在iOS、Android、Web（H5）、微信小程序、支付宝小程序、百度小程序、QQ小程序等多个平台运行。这...
基于uni-app开发的微信小程序商城项目
08-03
此项目是基于uni-app开发的微信小程序商城项目，开发工具用的是Hbuilder和微信开发者工具，前端用的vue3.0,后台的数据用的是用node搭建的本地服务器，通过内网穿透的方式进行数据外网访问的方式，只局限做开发和测试...
ListCtrl Icon模式显示jpg、gif等图片
10-30
ListCtrl Icon模式显示jpg、gif等图片
uni-app 富文本编辑 回显富文本和修改富文本！
11-21
uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富文本和修改富文本！uni-app 富文本编辑 回显富...
uni-app+Vue3+pinia+uview-plus搭建的项目包
12-28
uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-...
uni-app里nvue页面引用iconfont图标经验分享
zhangdaren的专栏
06-09 7019
前言：发现社区在对nvue使用iconfont图标的文章还是比较少，在这里刚好遇到了，那就分享一下我的解决方法。 在项目中遇到了需要在nvue里使用iconfont图标， 刚开始照着社区搜索的答案：https://ask.dcloud.net.cn/question/64622 这样引入css文件： <style src="@/common/iconfont.css"><...
uniapp 使用自定义icon图标
黎小小的博客
05-29 4951
注意如果时vue3需要 slot用在节点中。
Nvue引入字体图标、subNvue使用字体图标
qq_44046765的博客
03-05 1450
如何在使用nvue或subNvue时添加字体图标库（线上地址） 在nvue中使用字体图标 在解决APP端使用video标签时，需要使用到subNvue原生子窗体，因为在APP端，video组件是属于原生组件，层级比所有的vue组件都要高，所以会出现video组件覆盖vue组件的问题，这个时候可以使用coverView组件或者使用subNvue来实现自定义播放器。 在使用subNvue时，需要导入自定义字体图标库，但是常规的css引入并不支持，所以只能使用weex提供的方式来引入字体图标库。 导入 /
uni-app值使用icon图标组件的教学指南
码奴一只猿
06-08 8505
UniApp是一个跨平台的开发框架，允许开发者使用一套代码同时构建多个平台的应用程序。其中，Icon组件是UniApp提供的一个非常实用的组件，用于显示各种图标。本篇文章将详细介绍如何在UniApp中使用Icon组件，并提供详细的示例代码。
uni-app扫雷先锋之nvue的文字图标，封装自己的图标按钮
weixin_43139949的博客
11-25 800
uni-app扫雷先锋实际需求第一次遇坑第二次尝试-遇坑第三次尝试-图标出现了封装字体图标 上次还说nvue以后讨论今天就来了，nvue呀怎么说呢，官方的说法是性能好如何如何的，但是有些时候呢却逼着咱开发者不得不用，因为有些功能呢只有nvue有。。。比如地图组件的一大堆功能就只有nvue才能用，有些小伙伴说了引plus呀，可是引plus的话，小程序和app之间就会产生很多很多区别。行了废话就不多说了。。。 实际需求 字体图标这个东西相信搞开发的小伙伴们都不会陌生，用到它的地方特别的多，那么在nvue中它有多
uni-app nvue模式人脸识别
06-03
你想要了解如何在uni-app的nvue模式下进行人脸识别是吗？如果是的话，你可以使用uni-mpvue-faceid插件，它是一个基于mpvue的人脸识别插件，可以用于uni-app的nvue模式。该插件可以进行人脸检测、人脸比对、人脸识别等功能。你可以在GitHub上找到并了解该插件的具体使用方法。同时，你需要注意的是，人脸识别功能需要使用设备的摄像头，因此你需要在manifest.json文件中声明相应的权限。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值