微信小程式如何使用font-awesome圖標

下載font-awesome字體包
開啟Transfonter網站，上傳字體fontawesome-webfont.ttf（理論其它檔案格式也可以轉換，並未嘗試），選擇base64編碼，convert後下載

下載得到的包中有style文件，打開後獲得以下代碼，並對照font-awesome.css中的內容，加入到微信小程式的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"即可，如########### ##################

以上是微信小程式如何使用font-awesome圖標的詳細內容。更多資訊請關注PHP中文網其他相關文章！