在uniapp中使用icon图标

最新推荐文章于 2025-06-21 09:53:47 发布

寒冰射手杨百亿

最新推荐文章于 2025-06-21 09:53:47 发布

阅读量3.6k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/ybyshezhang/article/details/109670158

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

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

如何在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 至于为什么我也不知道从别人那里学会的

从iconfont网站复制过来的代码是默认没有的，亲测在app端是必须的！——shika233

我是引用的别人的博客

3.使用icon
在这里插入图片描述

单独控制图标还要加个：before，伪类的作用吧应该是，content这里的属性要注意，我这个图标代码是&#xe608 我写的是 \e608，原因不明亲测不这么写就无效

以上