微信小程序引入fontawesome
小程序引入fontawesome需要做的步驟是比其他的多一點(diǎn)，比如說本質(zhì)上下載下來fontawsome沒法直接用，他有好多的css，其實(shí)也有好多TTF的字體文件，對(duì)于他的這種 TTF的文件是需要給它進(jìn)行一個(gè)轉(zhuǎn)換，轉(zhuǎn)換之后把它變成是比如說base64，它編碼變成之后再把它引入到我們的項(xiàng)目中。
0、嫌麻煩直接跳轉(zhuǎn)文末引入轉(zhuǎn)好的
一、下載fontawesome6
https://fontawesome.com/download【被墻打不開進(jìn)下面中文官網(wǎng)https://fontawesome.com.cn/，只有v5之前版本】
選擇免費(fèi)的Free for web 版本
二、使用transfonter編碼成Base64
? 1.下載好解壓，打開webfonts文件夾，一堆字體文件。
? 2.把全部字體（包括woff2后綴）上傳到transfonter，打開Base64 encode，勾選TTF和WOFF2然后轉(zhuǎn)換Convert
? transfonter官網(wǎng)：https://transfonter.org/
? 
? 3.轉(zhuǎn)換好了下載，下載好了解壓。只要stylesheet這個(gè)css就好
? 
三、微信小程序引入fontawesome
? 1.記事本打開上一步解壓的文件中的stylesheet.css，復(fù)制到小程序根目錄，后綴記得改成**.wxss**（這邊直接重命名成fontawesome.wxss）
? 
? 2.打開最開始下載解壓完成的fontawesome6文件夾，css目錄下的6個(gè)css樣式（brands.css、fontawesome.css、regular.css、solid.css、svg-with-js.css、v4-shims.css）
? 3.分別用記事本打開這6個(gè)樣式，全選復(fù)制粘貼追加至小程序引入的fontawesome.wxss后面，一個(gè)勁兒往里懟往里插就是了。
? 注意：值得一提的是凡是遇到@font-face里面‘ src: url("…/webfonts/。。。.woff2’醬色兒的直接刪除
? 上面選中的6個(gè)樣式文件中有這3個(gè)里面有的需要?jiǎng)h：
? brands.css開頭處
? regular.css中間
? solid.css中間
? 
? 從transfonter轉(zhuǎn)換好的csssheet加上6個(gè)樣式全部復(fù)制進(jìn)去差不多10000行
四、測(cè)試效果
? 1.在微信小程序的全局樣式app.wxss導(dǎo)入根目錄下的fontawesome.wxss
@import"/fontawsome.wxss"
? 2.從fontawsome官網(wǎng)找喜歡的圖標(biāo)測(cè)試一些嚕~
? 
<text class="fa-brands fa-facebook"></text>
<text class="fa-regular fa-thumbs-down"></text>
<text class="fa-solid fa-moon"></text>
<text class="fa-regular fa-moon"></text>
五、fontawesome懶人包-直接放進(jìn)根目錄，導(dǎo)入后直接用
下載
https://download.csdn.net/download/weixin_44229624/88191024
? 寫好的包是6.4.2版本，超過了的新圖標(biāo)用不了哦，記得篩選一下版本。
? 
fontawesome圖標(biāo)庫：
? https://fontawesome.com/search?o=r&m=free文章來源：http://www.zghlxwxcb.cn/news/detail-759010.html
打開鏈接是免費(fèi)庫（用v4，v5的都可以你能進(jìn)哪個(gè)官網(wǎng)就用哪個(gè)），免費(fèi)圖標(biāo)可能換個(gè)樣式頭頂多了pro標(biāo)識(shí)那就不能用咯，用了小程序里也是個(gè)空框框~
有的奇奇怪怪的圖標(biāo)是免費(fèi)但是好像用了也是沒有效果（應(yīng)該是最開始轉(zhuǎn)換和引入css的問題），不過絕大部分都可以用上了。歡迎大佬們?cè)u(píng)論區(qū)補(bǔ)充。文章來源地址http://www.zghlxwxcb.cn/news/detail-759010.html
到了這里，關(guān)于微信小程序引入使用fontawesome圖標(biāo)庫【內(nèi)附懶人包下載導(dǎo)入即用】的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
