注冊登錄

微信小程序font圖標(biāo)下載及是用方法

2017-12-05
導(dǎo)讀:2017年6月14日,微信小程序font圖標(biāo)已經(jīng)是當(dāng)下最熱門的話題,下面將從多方面來談?wù)勎⑿判〕绦騠ont圖標(biāo)相關(guān)的內(nèi)容。...

微信小程序font圖標(biāo)已經(jīng)是當(dāng)下最熱門的話題,下面將從多方面來談?wù)勎⑿判〕绦騠ont圖標(biāo)相關(guān)的內(nèi)容。

下載font-awesome字體包

打開Transfonter網(wǎng)站,上傳字體fontawesome-webfont.ttf(理論其它文件格式也可以轉(zhuǎn)換,并未嘗試),選擇base64編碼,convert后下載
下載得到的包中有style文件,打開后獲得以下代碼,并對照font-awesome.css中的內(nèi)容,加入到微信小程序的app.wxss文件中

 

@font-face {

font-family: 'fa';

src: url(data:font/truetype;charset=utf-8;base64,AAEAAAANAIAAAwBQRkZUTXLOMIUAAlXMAAAAHEdERUYAJwKrAAJVrAAAAB5PUy8yiDJ6IwAAAVgAAABgY21hcJ0vdNQAAAw4AAADAmdhc3D//wADAAJVpAAAAAhnbHlmHejPwQAAGdQAAh3kaGVhZAbB4eAAAADcAAAANmhoZWEO+QqbAAAB......long long) format('truetype');

font-weight: normal;

font-style: normal;

}

.fa {

font-family: "fa" !important;

font-size: 16px;

-webkit-font-smoothing: antialiased;

-webkit-text-stroke-width: 0.2px;

}

/* makes the font 33% larger relative to the icon container */

.fa-lg {

font-size: 1.33333333em;

line-height: 0.75em;

vertical-align: -15%;

}

.fa-2x {

font-size: 2em;

}

//long long long...........

然后在小程序中使用class="fa fa-user"即可,如<text class="fa fa-user"></text>

 


重磅推薦:小程序開店目錄

第一部分:小商店是什么

第二部分:如何開通一個(gè)小商店

第三部分:如何登錄小商店

第四部分:開店任務(wù)常見問題

第五部分:小商店可以賣什么

第六部分:HiShop小程序特色功能

第七部分:小程序直播

第八部分:小程序收貨/物流

第九部分:小程序怎么結(jié)算

第十部分:小程序客服

第十一部分:電商創(chuàng)業(yè)

第十二部分:小程序游戲開發(fā)

電話咨詢 微信咨詢 預(yù)約演示 0元開店