uni-app 引入本地iconfont的正确姿势以及nvue阿里图标引入

1.引入本地iconfont

iconfont文件里面包含 iconfont.ttf、iconfont.css, 将 iconfont.tt64文件转位 base64。
推荐转换工具地址:https://www.giftofspeed.com/base64-encoder/

然后打开 iconfont.css文件,修改 @font-face 部分,将转换好的 base64代码粘贴到对应位置,并且设置 代码如下:

@font-face {  
  font-family: "iconfont";  
  src: url(data:font/truetype;charset=utf-8;base64,转换的base64内容) format('truetype');  
}  
.iconfont {  
  display: inline-block;  
}  

最后则再项目中App.vue中引入iconfont.css文件  

<style>  
@import "./font/iconfont.css";  
</style>  

2.引入阿里图标

@font-face {
  font-family: 'iconfont';  /* project id 876692 */
  src:url('http://at.alicdn.com/t/font_876692_b4c5ti59cpk.ttf') format('truetype');
}

 注意的是src使用加上http

 

方法二 无需转码

修改路径如下

@font-face {font-family: "iconfont";
  src: url('~@/static/iconfont/iconfont.eot?t=1583481355968'); /* IE9 */
  src: url('~@/static/iconfont/iconfont.eot?t=1583481355968#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
  url('~@/static/iconfont/iconfont.woff?t=1583481355968') format('woff'),
  url('~@/static/iconfont/iconfont.ttf?t=1583481355968') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('~@/static/iconfont/iconfont.svg?t=1583481355968#iconfont') format('svg'); /* iOS 4.1- */
}

  

 nvue中引入阿里图标不生效

1.可能原因:每次更换icon本地地址时需要杀死app进程重新打开,防止不生效原因是缓存

2.引入的地址不正确,或者没有配置css

下面完整的引入方式:

<template>
    <view class="list">

      <!--使用unicode的形式-->
      <text class="iconfont icon-like">&#xe64e;</text>

      <!--图标内容使用data里的变量-->
      <text :style="{fontFamily:'iconfont',color:'red',fontSize:'40px'}">{{fontName}}</text>

    </view>
</template>

<script>
    let that
    import {
        mapGetters
    } from 'vuex'
    //#ifdef APP-PLUS-NVUE
    // nvue中使用阿里图标不生效的可能原因是app没有杀死重来
    var domModule = weex.requireModule('dom');
    domModule.addRule('fontFace', {
        'fontFamily': 'iconfont',  
        'src': "url('/static/iconfont/iconfont.ttf')"
    }); 
    //#endif
    export default {
        computed: {
            ...mapGetters(['APPTheme', 'userInfo', 'api']),
        },
        data() {
            return {
                fontName:‘\ue665’
            }
        },
        mounted() {
            that = this
        },
        onShow() {
            
        },
        methods: {}

    }
</script>

<style scoped lang="scss">
    .list {
        .li{
            
        }
    }
    
</style>

 

posted @ 2019-04-02 13:12  奔跑吧前端(李钊)  阅读(6519)  评论(0编辑  收藏  举报