uniapp中nvue页面如何使用iconfont字体图标
今天要使用到 nvue 页面,在使用过程中发现 iconfont 图标不好使了,这里记录一下如何在 nvue 页面中引入使用 iconfont 图标。
1、JS部分
const domModule = weex.requireModule('dom');
domModule .addRule('fontFace', {
fontFamily: 'iconfont',
src: "url('https://at.alicdn.com/t/***.ttf')"
});
// 这里需要引入你的 iconfont 项目的 ttf 文件
2、文本部分
这里需要注意 2 点:
(1)nvue页面中文字只能使用 <text></text> 标签包裹,div、view之类的无法渲染。我就是这里踩了坑。
(2)iconfont 的unicode码需要用  —— &#x(); 包裹,其中 e63c 就是 iconfont 的 unicode 码
<text class="iconfont cc"></text>
3、样式部分
<style scoped>
.iconfont {
font-family: iconfont;
}
</style>
做完这三步,就可以显示了。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)
· winform 绘制太阳,地球,月球 运作规律