在uniapp中使用icon图标

最新推荐文章于 2025-10-10 08:48:05 发布

原创最新推荐文章于 2025-10-10 08:48:05 发布 · 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 至于为什么我也不知道从别人那里学会的

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

我是引用的别人的博客

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

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

以上

您可能感兴趣的与本文相关的镜像

ACE-Step

音乐合成

ACE-Step

ACE-Step是由中国团队阶跃星辰（StepFun）与ACE Studio联手打造的开源音乐生成模型。它拥有3.5B参数量，支持快速高质量生成、强可控性和易于拓展的特点。最厉害的是，它可以生成多种语言的歌曲，包括但不限于中文、英文、日文等19种语言