<text class="iconfont"></text>
*1.使⽤text组件引⽤字体图标
*2.组件⼀定不能换⾏
6.引⼊图标库优化
以上的在每个页⾯onLoad()引⼊太过⿇烦，所以考虑在App.vue⽣命周期⾥⾯加载
<script>
export default{
onLaunch:function(){
// 加载图标库
icon图标库
// 当为APP-PLUS-NVUE是加载
// #ifdef APP-PLUS-NVUE
const domModule = quireModule('dom');
domModule.addRule('fontFace',{
fontFamily:'iconfont',
src:"url('at.alicdn/t/font_f')"
});
// #endif
console.log('App Launch');
},
onShow:function(){
console.log('App Show');
},
onHide:function(){
console.log('App Hide');
}
};
</script>
<style>
/*每个页⾯公共css */
/*引⼊css样式库*/
@import'./common/free.css';
@import'./common/common.css';
</style>
7.图标如何兼容多端
⽬前只是兼容了app，在⼩程序中打开是看不到图标的
1.下载图标的css代码放到⼀个新建的css⽂件中
2.对css代码进⾏删减留下.ttf后缀的那⼀⾏，这⾥的src和App.vue中的相同
@font-face{font-family:"iconfont";
src:url('at.alicdn/t/font_f')format('truetype') }
.iconfont{
font-family:"iconfont"!important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-
moz-osx-font-smoothing: grayscale;
}
3.在App.vue
<style>
/*每个页⾯公共css */
/*引⼊css样式库*/
@import './common/free.css';
@import './common/common.css';
/* #ifndef APP-PLUS-NVUE */
/* 如果不是APP-PLUS-NVUE则加载图标库,⽬的是做⼀个兼容 */
@import './common/free-icon.css';
/
* #endif */
</style>
总结：
引⼊图标分为两种情况：
1.直接下载css代码引⼊，删减css代码时保留base64和下⽅类那串代码。
2.下载css⽂件，下载css的代码时保留.ttf⽂件，并下载引.ttf⽂件。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。