uview2.0 如何自定义图标

最新推荐文章于 2024-11-22 11:01:09 发布

Tail96

最新推荐文章于 2024-11-22 11:01:09 发布

阅读量3.3k

点赞数

分类专栏： uniapp 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_44179923/article/details/121885400

版权

本文介绍了在uView2.0中自定义图标的步骤，包括从iconfont网站选择图标并下载，将ttf文件和css放入指定目录，修改App.vue和iconfont.css，更新u-icon组件的props.js，以及通过node.js生成icons.js。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先去iconfont这个网站添加自己想要的图标，然后下载下来

把ttf文件放到根目录 static/iconfont.ttf
把css放到根目录的common/iconfont.css

打开App.vue 文件修改成下面

<script>
	
	export default {
		onLaunch: function() {
			// #ifndef MP
			const domModule = weex.requireModule('dom')
			domModule.addRule('fontFace', {
			    'fontFamily': "uicon-iconfont",
			    'src': "url('/static/iconfont.ttf')"
			});
			// #endif
			
		},
		onShow: function() {
			
		},
		onHide: function() {
			
		}
	}
</script>

<style lang="scss">
	/*每个页面公共css */
	@import "@/uni_modules/uview-ui/index.scss";
	@import "common/demo.scss";
	/* #ifndef APP-PLUS-NVUE */
	@import url("/common/iconfont.css");
	/* #endif */
</style>

修改/common/iconfont.css以下内容

// 原来
@font-face {
   font-family: "iconfont";
// 现在
@font-face {
   font-family: "uicon-iconfont";


// 原来
font-family: "iconfont" !important; 
// 现在
font-family: "uicon-iconfont" !important