微信小程序 如何引入外部字體庫(kù)iconfont的圖標(biāo)
更新時(shí)間：2018年01月31日 09:54:59 作者：Rattenking
這篇文章主要為大家詳細(xì)介紹了微信小程序引入外部字體庫(kù)iconfont圖標(biāo)的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
如何引入外部字體庫(kù)iconfont的圖標(biāo)，具體如下
直接使用阿里巴巴的網(wǎng)絡(luò)路徑
選擇iconfont圖標(biāo)
官網(wǎng)：阿里巴巴矢量字體庫(kù)
步驟：阿里巴巴字體庫(kù)使用方法
全局引入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;
}
/*本項(xiàng)目使用的18個(gè)圖標(biāo) */
.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';}
使用圖標(biāo)
<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>
效果圖
注意：此處實(shí)現(xiàn)采用的是無(wú)APPID的開發(fā)模式，實(shí)際應(yīng)用應(yīng)該在微信小程序管理平臺(tái)的開發(fā)設(shè)置中配置合法域名。
下載到本地
步驟
解壓壓縮包 —- 找到ttf格式文件 —- 上傳到平臺(tái)轉(zhuǎn)化為base64格式 —- 下載壓縮包 —- 將css文件名改為wxss —- 放入項(xiàng)目文件夾 —- 用@import全局引入 —- 使用
使用—-引入及全局定義
@import "src/css/icon.wxss";
.iconfont {
font-family: "iconfont";
font-size:60rpx;
}
/*本項(xiàng)目使用的18個(gè)圖標(biāo) */
.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>
效果圖
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
js使用對(duì)象直接量創(chuàng)建對(duì)象的代碼
js使用對(duì)象直接量創(chuàng)建對(duì)象的代碼...2007-09-09
微信小程序非swiper組件實(shí)現(xiàn)的自定義偽3D輪播圖效果示例
這篇文章主要介紹了微信小程序非swiper組件實(shí)現(xiàn)的自定義偽3D輪播圖效果,涉及微信小程序事件響應(yīng)及元素屬性動(dòng)態(tài)操作實(shí)現(xiàn)輪播圖效果相關(guān)技巧與注意事項(xiàng),需要的朋友可以參考下2018-12-12
JavaScript在瀏覽器中的性能成為開發(fā)者所面臨的最重要的可用性問題。而這個(gè)問題又因JavaScript的阻塞特性變的復(fù)雜，也就是說當(dāng)瀏覽器在執(zhí)行JavaScript代碼時(shí)，不能同時(shí)做其他任何事情。本文詳細(xì)介紹了如何正確的加載和執(zhí)行JavaScript代碼，從而提高其在瀏覽器中的性能。2017-02-02
獲取select元素被選中的文本內(nèi)容的方法有很多，本文為大家介紹下使用javascript來(lái)輕松實(shí)現(xiàn)下2014-01-01
JavaScript中iframe實(shí)現(xiàn)局部刷新的幾種方法匯總
Iframe是一種嵌入網(wǎng)頁(yè)的框架形式，Web頁(yè)面可以通過更改嵌入的部分，達(dá)到部分內(nèi)容刷新，通過本文和大家一起學(xué)習(xí)iframe實(shí)現(xiàn)局部刷新的幾種方法匯總，對(duì)iframe局部刷新相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-01-01
JavaScript利用閉包實(shí)現(xiàn)模塊化
本文主要介紹了JavaScript利用閉包實(shí)現(xiàn)模塊化的方法。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
詳談JS中實(shí)現(xiàn)種子隨機(jī)數(shù)及作用
這篇文章詳細(xì)介紹了種子隨機(jī)數(shù)在JS中如何實(shí)現(xiàn)以及有什么作用，希望能幫助有需要的人。下面一起來(lái)看看。2016-07-07
簡(jiǎn)單實(shí)現(xiàn)js倒計(jì)時(shí)功能
這篇文章主要為大家詳細(xì)介紹了js倒計(jì)時(shí)效果的實(shí)現(xiàn)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
本文主要介紹了js仿淘寶商品放大預(yù)覽功能的實(shí)例。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03
WebSocket最大特點(diǎn)就是服務(wù)器可以主動(dòng)向客戶端推送信息,客戶端也可以主動(dòng)向服務(wù)器發(fā)送信息,是真正的雙向平等對(duì)話,屬于服務(wù)器推送技術(shù)的一種,下面這篇文章主要給大家介紹了關(guān)于如何優(yōu)雅的使用WebSocket的相關(guān)資料,需要的朋友可以參考下2022-05-05