兼容nvue
1.只能使用text标签<text class="iconfont" style="color: #fff;font-size: 28rpx;"></text>
2.App.vue设置,引入iconfont
onLaunch() { // #ifdef APP-PLUS this.addIconFont(); // #endif },
/** 添加icon解决(真机)nvue引用不生效问题 */ addIconFont() { const dom = weex.requireModule('dom'); dom.addRule('fontFace', { fontFamily: 'iconfont', src: "url('https://at.alicdn.com/t/c/font_*********.ttf?t=******)" }); },
<style lang="scss"> .iconfont { font-family: iconfont; } </style>
兼容vue
1.项目中添加iconfont.css文件
@font-face { font-family: 'iconfont'; /* Project id 3238109 */ src: url('https://at.alicdn.com/t/c/font_3238109_********.ttf?t=*********') format('truetype'); } .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-zhiyin:before { content: "\e6ec"; }
2.App.vue引入
<style lang="scss">
@import "@/common/iconfont.css";
</style>
3.dom使用
<i class="iconfont" style="color: #fff;font-size: 28rpx;"></i>
需要vue、nvue都兼容的话,两部分代码同时使用即可