在www.iconfont.cn中下載自己收藏的圖標(biāo)項(xiàng)目
Iconfont-阿里巴巴矢量圖標(biāo)庫
下載解壓后文件目錄如下
文件目錄
在uni-app中引用iconfont圖標(biāo)
將iconfont.css復(fù)制到uni-app項(xiàng)目中棘伴。
iconfont.css文件如下：
@font-face {font-family: "iconfont";
src: url('iconfont.eot?t=1564391050125'); /* IE9 */
src: url('iconfont.eot?t=1564391050125#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAABL0AAsAAAAAJcgAABKjAAE...') format('woff2'),
url('iconfont.woff?t=1564391050125') format('woff'),
url('iconfont.ttf?t=1564391050125') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('iconfont.svg?t=1564391050125#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
...
方法一：只保留iconfont.ttf
將iconfont.ttf復(fù)制到iconfont.css相同目錄中。并修改iconfont.css渠退。注意iconfont.ttf路徑世澜。
@font-face {font-family: "iconfont";
src: url('../../static/style/iconfont.ttf') format('truetype'); /* iOS 4.1- */
}
...
方法二：只保留base64
@font-face {font-family: "iconfont";
src:
url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAH2cAAsAAA... ') format('woff');
}
...
使用
在全局App.vue中引用class文件
<style>
/*每個頁面公共css */
@import './static/style/iconfont.css';
</style>
在page頁面中使用
<icon class="icon iconfont" :class="item.icon"></icon>
