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,d09GMgABAAAAAAwwAAsAAAAAFfAAAAviAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCECgqdbJZ+ATYCJAMkCxQABCAFhG0HexulEUVGbuQg5SX7fyZkQ6b0hlGbOu2qyGhXBR7curl88fzOZjOsmrKMJVu8Pp9PMmKlLpyll2TX1JH4TcfTnP2893Y3m002a0kQ2wTRa0NKxYNYBY20DhXTUKWhgnhNjdYPvsCdcyLC0ZyWyHUkT80FZeXQA7rA/efygMlWY9cAAWiAf6b7hNbhzpFzG2sy6R6piZA1WeFx5o2sdVnP8v98+7k60Qge9ZDIWyjUeF9mcvPDPyaWyCRCXiLu8Bti+rpm6N4jCuK5tBcKTT6A3QECAA5CJUBpGYOcwAIFzITQYtrkicXAxlxAlYQhYG1MzqqUEZUDDSzegJsAYIv9ePQV2GMBMNAE2LJ5E9LHgaMdPu9BvB0KRmgPlCwPA0CPBEAAIAEA1bM25jqqwYwmEQS49hRMAgCZSP4mbod2qp1tD2zX7fXtVz/v0dFBeiA2FQKZzw9AgAEaEGgAH5N/HmKAmPXaOitWxQK0g0RAJhYKCBhYWCCgYQkEAgTLDCDQwFIPBBiWq8DAwvXAQ3slmrVkFRnAaADqcwD6PjB7n21gzxTWA6YCA+icU0qIWc/3DuDMAi+Jot4LEymtwPMB1khbf9EcapZ5iuF19BRP06wyiN1qhWJpjhqpPmJpe2ieUvSURqRZVhsryqInEC6fXSGcL1ZJJ42SWuQ1iLJ6PP6YkoOM6g5mQUq4cwvBuejJpVpVaZB10xK2rnv0aQsS1e1PVEy4C0uhffys2c3DfM63RK24yfNzV17mafGuxgbOtRVnobnf85SR371vFj35u32fJQ/+mLDy1pm/6yq2eArNQ5awrZ3L3c8vhmxbSFpMxpe6cRcBiH4Tj0z5ocSD2VhxN7bmZ4i3RzNN9nXBtz7PXTs/q/M2X1+zamyxq/B+eU6ue/8ZH20eqcfDdRgE3W1pNIRwGRkKwxgJoAbZs4OdhWb3eomO53yuoztwS8sYtcTZZsmBb8H36GutciNyH+1Oc7Nz5S3kuSf6H+1yV3QNxoekjJbNccMbaLc+7pg/RFx8RaVPCdYGQAw+rYzPhxJ9mCNE4aJMSyVJheGJxjHCe7lFKcowKUkPi6Ty/MXlkte+l95XnugQs2ua2E3t5XqZlRgg1AiUoWUWo5KI+d4R1e4howVkeGW9doXmoWW4tuhpgwFEoal4JljslFVrZoy0ueuePoTAylJjlHbCMMqXZTwmOhw6FWttJinm9n2pWTP0tbN0VwjXOERNgrAyG0Igjd8c/Xxah0euqPKdy2WvQq41EfLEZzfWwnc3SzgfYL/hb+GXGqQ0WRwKwB4rRbrX3K0ZYk51FhkeuiyvkdllwitxfUqoBWsrXLXR13hUcmaPx93f5dJjvsjz9HW6XIa1AhBsoASkm0LXcHMRu2JcCizLJbegd7XQaNgUPYkUnDOxNcCI8zFMTFSAUyelYBp0lqHG6hKMfXN1ivEFYrIyJxMsbW3pWQru4lF/Nj+Y296wc3vTTuK0Qb1Gm/xVz8E4o5yLGiwjJpQo218HDIOgeUSRD6QRy0XCLzNuW0UgwEKwZu/KGksRMsk6FyWWWDolzdUEIqTQQqRJVFGHfT4MNJKoGlKeUkkoQIaxZia+AfWkPeS1sM+YyyhZqELcbbOQFHNuk2IM9at3itOK0xtaa7PdWuEbj5y4o3PNH5lvNQfS1lKhzKAhExlfPZx2lc3GNeuGks7y14+Qyl0PfTF6eDBXugh1Js6J7xLSupEbjRAz87XxQue6YXG/C2xAD51b/2uvFtQeN6guEH7tm13xSkwc6LytW9GXGXVL/M2ds3a/m36xJcy8rSnpQbN1Z0v3s3ZC7t7bvh+PCXlnh1JrrVHXG9fBJqk2ah3sZvuqPx5jn5dxvbrWuk7Z+cFv3B6ppk/K+Zptejg+TspM7uWw+Wph7B4BDQxgFCZnypAzlL4Dix0988J7Jvese2z6pZXp2YhDHcClvgdu/RISrevXOQdNmoSUIZe4clBoyDUMgkV98I1g+ObDD78xCPQtQP+XwS+1E2ctlfrF/Lm7wUuBEn/8G+PXmzbUeaWA0h31k0Vktf7L/h0MvPgtv5+6tOa4JyLqpGnR4s0PuJfcxFlnZ018f+PwqYUFU/G3e+bRlHAYenRfOXW+7gc+8YugwP/usk925Bcj+R92gf2jgYldQ0u/PrYLnyHfv17sg2Ge2rye0WsrBy5INcTEPO+Ma58+SQ0gKfZ1w/hT43uM7z5eZ/zlprR2KB/s7u7u4eZMBeuYVfcOlpMtzJUzq4ePHNRrwcx+YRMyYwaXbjlStEryb+vc5s8vnbxczwQ90RRVQFGrrbXIsHTKMr2GhQ5Q3qQ844B7pjRNGJ7RLzc2cRkcDVlyZZS2TWn1jvK2Km2FI/zTznL/srZJ3k7jbkl8pUHGjeMlQyUpaHfGvIy55qLU3DQeOjV6g3I45nB0Q0zDX+GsLrlJFEdtMMaN0Xl0u49r0m7UNimt3EautYZrMuwaGb08zMtJtgxeAoPxjKqqGXgm9h4Fz4DBOUsd6vjQ6srQ8VO4XewubkrY+KrK8sH/cwWVPdmfgJq1zCJbtnHEfJSLi1auHI04xNXgIpQzbH6WUbSt03CfwdqXo5xHYHnXHGahfkFeTt4C/cKsUl0kfyGjo1E4cRK/BKbF2N6VV3ZDon4Sb3u5LHhZuU07UWsrt2d2Vu/MCZ7zgc0QWe9SIrXq8aExjkbSnRwxJqYX5+SnJ5qOGLsbj/RepD3CdmePamMkY2FIcjCLGMwv7LOQJ/7h9Xs53fzLEirmfVuuHbt/cHj64eBt5dfK7o4MSqa35VDpqBtOoWIiqQmHLWlMy7IOz4CUKtq+aESXwEmnTPAU3WLYT6bap9qKrR7WYIh16VL4Llq3aumSJUvtQ/A4ngtXpvwzRdl7Mw1MT3uL0Q52CKI1KEpdaYnA4xJr/NsS4/f0DlTNyea4mRbFbrX8L1LWjeqAIIzLJfGEwSkNII7FY0VZGiMXpiRh8cvUIXUezhKeGo69EkgRhYXWcIRFd0jnWEnBzFXpql8TtioOTDAWbXIOcz/W74FGI+ixBSNAsliKRWzB4xXLF9bV1bNSsjLu7ubEWlaIJqK6zn89zgekmqnklR8DOVB+OlKJ6gy8Kl/t5kjY2ysQRznMGV3Xw6yQjpLGFVrCRQnjDJnI12Tr9m/WWozzE4hDRERDOYiIwIHynIiwJh3woz5Eu7UJNchmIoNVab18HgAhUQwXVy/JKgIRkiyLmV06hgBSMS4qIhSererVDarnnGzHSOoabpcwwlZIiapd39I27a9d5l3SwY1WRpNDJrg4+fTd2H9a1zNp5ZrChZ+/ydF22seUag4y9RoovbUACui2vIN5bbRs25VmzfYJXYQX0voE1/D8t4rie1+EYv2E3hN4pdPn92aX7Nv4oRtcB7eNhwkfuGF899GTP+lSbkcLZvzQRWdf8OG3VcoUS0Z3df7RCRnJC45OFMenRpUmobREzw0eVHHqLv2l9e7VWZCSKgv9kj+JTHPTFXkC9D+weh1e8g8RNH7l4gLxxreR1yQ88RYpJw7JqnoAxIk7iOM24dZ+/3zzwdCHmWS00OcXdv8xPu1/peF7q1teIbCAi7IRwP8cos6NRP/qpzrm1lJjXo49F/YF1yJRi36AvBwDAMcnAfy75cneW67VVJv/O7WaQoBBAyGAAAsRYkqeAGjQQRJggIX+gIN4mWvrQDEHCCBKCwBx1noAgegkwGCAm4CA6BkEhLwN0GD2DWBAjAAOLvzouMm922h377GK2EJ9BmqMZsIbd67lC/JBVj6qs3Ef6AOVQJHmyZpn1OiXQQkjL2NkwLxR8OTtDaU0YL3psYlpF6M9ZRnLo6aNUZOdex6qRJ22BWpnTdIwNDZ1tEu9/wvEDaSKLxlwovkBeQEFDgqpvIb42axrDbgt7YMRV4oEMyC7e4YCnghGklcawObP1UONKNW1KLdOMjIRq2tO129Vl7V5cvENyi5hG0YEUYhGDNIgFmkRB4cZzZUJHdWEaxN8qBxVq1+kP9KraDnWSOsjvzNGEtctat5Tsm26wQ9iqAoNWjgnEwAA') 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"></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>