微信小程序 如何引入外部字體庫iconfont的圖標
更新時間：2018年01月31日 09:54:59 作者：Rattenking
這篇文章主要為大家詳細介紹了微信小程序引入外部字體庫iconfont圖標的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
如何引入外部字體庫iconfont的圖標，具體如下
直接使用阿里巴巴的網(wǎng)絡(luò)路徑
選擇iconfont圖標
官網(wǎng)：阿里巴巴矢量字體庫
步驟：阿里巴巴字體庫使用方法
全局引入app.wxss
@font-face {
font-family: 'iconfont'; /* project id 518032 */
src: url('//at.alicdn.com/t/font_518032_t2q88z3jok8iwwmi.eot');
src: url('//at.alicdn.com/t/font_518032_t2q88z3jok8iwwmi.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_518032_t2q88z3jok8iwwmi.woff') format('woff'),
url('//at.alicdn.com/t/font_518032_t2q88z3jok8iwwmi.ttf') format('truetype'),
url('//at.alicdn.com/t/font_518032_t2q88z3jok8iwwmi.svg#iconfont') format('svg');
}
.iconfont {
font-family:"iconfont" !important;
font-size:60rpx;
font-style:normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/*本項目使用的18個圖標 */
.icon-zhiding:before{content: '\e739';}
.icon-zuojiantou:before{content: '\e736';}
.icon-youjiantou:before{content: '\e735';}
.icon-shangjiantou:before{content: '\e734';}
.icon-xiajiantou1:before{content: '\e733';}
.icon-xiajiantou:before{content: '\e6cc';}
.icon-gengduotianchong:before{content: '\e67f';}
.icon-erweima:before{content: '\e65f';}
.icon-fenleiorguangchangorqita:before{content: '\e64f';}
.icon-dibiao:before{content: '\e64d';}
.icon-bangzhu:before{content: '\e64a';}
.icon-xinfeng:before{content: '\e640';}
.icon-duihuaxinxi:before{content: '\e639';}
.icon-sousuo:before{content: '\e62f';}
.icon-shouye:before{content: '\e62d';}
.icon-shezhi:before{content: '\e62a';}
.icon-shanchu:before{content: '\e629';}
.icon-dianhua:before{content: '\e61b';}
使用圖標
<view> <icon class="iconfont icon-zhiding"></icon> <icon class="iconfont icon-zuojiantou"></icon> <icon class="iconfont icon-youjiantou"></icon> <icon class="iconfont icon-shangjiantou"></icon> <icon class="iconfont icon-xiajiantou1"></icon> <icon class="iconfont icon-xiajiantou"></icon> </view> <view> <icon class="iconfont icon-gengduotianchong"></icon> <icon class="iconfont icon-erweima"></icon> <icon class="iconfont icon-fenleiorguangchangorqita"></icon> <icon class="iconfont icon-dibiao"></icon> <icon class="iconfont icon-bangzhu"></icon> <icon class="iconfont icon-xinfeng"></icon> </view> <view> <icon class="iconfont icon-duihuaxinxi"></icon> <icon class="iconfont icon-sousuo"></icon> <icon class="iconfont icon-shouye"></icon> <icon class="iconfont icon-shezhi"></icon> <icon class="iconfont icon-shanchu"></icon> <icon class="iconfont icon-dianhua"></icon> </view>
效果圖
注意：此處實現(xiàn)采用的是無APPID的開發(fā)模式，實際應(yīng)用應(yīng)該在微信小程序管理平臺的開發(fā)設(shè)置中配置合法域名。
下載到本地
步驟
解壓壓縮包 —- 找到ttf格式文件 —- 上傳到平臺轉(zhuǎn)化為base64格式 —- 下載壓縮包 —- 將css文件名改為wxss —- 放入項目文件夾 —- 用@import全局引入 —- 使用
使用—-引入及全局定義
@import "src/css/icon.wxss";
.iconfont {
font-family: "iconfont";
font-size:60rpx;
}
/*本項目使用的18個圖標 */
.icon-zhiding:before{content: '\e739';}
.icon-zuojiantou:before{content: '\e736';}
.icon-youjiantou:before{content: '\e735';}
.icon-shangjiantou:before{content: '\e734';}
.icon-xiajiantou1:before{content: '\e733';}
.icon-xiajiantou:before{content: '\e6cc';}
.icon-gengduotianchong:before{content: '\e67f';}
.icon-erweima:before{content: '\e65f';}
.icon-fenleiorguangchangorqita:before{content: '\e64f';}
.icon-dibiao:before{content: '\e64d';}
.icon-bangzhu:before{content: '\e64a';}
.icon-xinfeng:before{content: '\e640';}
.icon-duihuaxinxi:before{content: '\e639';}
.icon-sousuo:before{content: '\e62f';}
.icon-shouye:before{content: '\e62d';}
.icon-shezhi:before{content: '\e62a';}
.icon-shanchu:before{content: '\e629';}
.icon-dianhua:before{content: '\e61b';}
開發(fā)使用
<view> <icon class="iconfont icon-zhiding"></icon> <icon class="iconfont icon-zuojiantou"></icon> <icon class="iconfont icon-youjiantou"></icon> <icon class="iconfont icon-shangjiantou"></icon> <icon class="iconfont icon-xiajiantou1"></icon> <icon class="iconfont icon-xiajiantou"></icon> </view> <view> <icon class="iconfont icon-gengduotianchong"></icon> <icon class="iconfont icon-erweima"></icon> <icon class="iconfont icon-fenleiorguangchangorqita"></icon> <icon class="iconfont icon-dibiao"></icon> <icon class="iconfont icon-bangzhu"></icon> <icon class="iconfont icon-xinfeng"></icon> </view> <view> <icon class="iconfont icon-duihuaxinxi"></icon> <icon class="iconfont icon-sousuo"></icon> <icon class="iconfont icon-shouye"></icon> <icon class="iconfont icon-shezhi"></icon> <icon class="iconfont icon-shanchu"></icon> <icon class="iconfont icon-dianhua"></icon> </view>
效果圖
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
js使用對象直接量創(chuàng)建對象的代碼...2007-09-09
微信小程序非swiper組件實現(xiàn)的自定義偽3D輪播圖效果示例
這篇文章主要介紹了微信小程序非swiper組件實現(xiàn)的自定義偽3D輪播圖效果,涉及微信小程序事件響應(yīng)及元素屬性動態(tài)操作實現(xiàn)輪播圖效果相關(guān)技巧與注意事項,需要的朋友可以參考下2018-12-12
JavaScript在瀏覽器中的性能成為開發(fā)者所面臨的最重要的可用性問題。而這個問題又因JavaScript的阻塞特性變的復雜，也就是說當瀏覽器在執(zhí)行JavaScript代碼時，不能同時做其他任何事情。本文詳細介紹了如何正確的加載和執(zhí)行JavaScript代碼，從而提高其在瀏覽器中的性能。2017-02-02
獲取select元素被選中的文本內(nèi)容的方法有很多，本文為大家介紹下使用javascript來輕松實現(xiàn)下2014-01-01
JavaScript中iframe實現(xiàn)局部刷新的幾種方法匯總
Iframe是一種嵌入網(wǎng)頁的框架形式，Web頁面可以通過更改嵌入的部分，達到部分內(nèi)容刷新，通過本文和大家一起學習iframe實現(xiàn)局部刷新的幾種方法匯總，對iframe局部刷新相關(guān)知識感興趣的朋友一起學習吧2016-01-01
本文主要介紹了JavaScript利用閉包實現(xiàn)模塊化的方法。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
這篇文章詳細介紹了種子隨機數(shù)在JS中如何實現(xiàn)以及有什么作用，希望能幫助有需要的人。下面一起來看看。2016-07-07
這篇文章主要為大家詳細介紹了js倒計時效果的實現(xiàn)代碼，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
本文主要介紹了js仿淘寶商品放大預覽功能的實例。具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
WebSocket最大特點就是服務(wù)器可以主動向客戶端推送信息,客戶端也可以主動向服務(wù)器發(fā)送信息,是真正的雙向平等對話,屬于服務(wù)器推送技術(shù)的一種,下面這篇文章主要給大家介紹了關(guān)于如何優(yōu)雅的使用WebSocket的相關(guān)資料,需要的朋友可以參考下2022-05-05