在uniapp中使用icon图标

最新推荐文章于 2025-10-16 16:41:00 发布

原创最新推荐文章于 2025-10-16 16:41:00 发布 · 3.7k 阅读

CC 4.0 BY-SA版权

本文介绍了在uniapp项目中使用iconfont图标的方法。首先，在iconfont官网选择需要的图标，然后将样式代码粘贴到app.vue的style标签内，并确保url前加上https。在实际使用时，需要注意伪类:before及content属性的正确设置，例如使用'e608'，否则可能无法正常显示。

如何在uniapp中使用icon

1.在iconfont官网找你想要的图标
在这里插入图片描述
2.在你的uniapp项目中粘贴这段代码，粘贴在app.vue文件的style标签内

<style>
 /* icon图标 */
   
	@font-face {
	  font-family: 'iconfont';  /* project id 1920028 */
	  src: url('https://at.alicdn.com/t/font_1920028_rszv531mqm.eot');
	  src: url('https://at.alicdn.com/t/font_1920028_rszv531mqm.eot?#iefix') format('embedded-opentype'),
	  url('https://at.alicdn.com/t/font_1920028_rszv531mqm.woff2') format('woff2'),
	  url('https://at.alicdn.com/t/font_1920028_rszv531mqm.woff') format('woff'),
	  url('https://at.alicdn.com/t/font_1920028_rszv531mqm.ttf') format('truetype'),
	  url('https://at.alicdn.com/t/font_1920028_rszv531mqm.svg#iconfont') format('svg');
	}
    
</style>

在这里插入图片描述
注意 url里加上https 至于为什么我也不知道从别人那里学会的