1. 程式人生 > >微信小程式中使用iconfont圖示

微信小程式中使用iconfont圖示

方案一:

利用小程式中不支援 ttf 字型,卻支援 base64 的特點,我們可以通過將 ttf 字型轉碼成 base64 ,再通過 iconfont 的特點,通過設定字型大小和顏色來達到目的。

具體做法:
1.我們可以先去阿里提供的圖示庫 官網找到我們需要的3個圖示, 點選 下載程式碼 將程式碼下載到本地~
2.解壓我們剛才下載的包,會有以下這些檔案,但對於我們來說,會用到的只有 iconfont.cssiconfont.ttf 這兩個檔案。
3.我們要對 iconfont.ttf 這個檔案進行轉碼,將它轉成 base64 格式,剛好 這個網站 就提供了這個功能,按照下圖的步驟,分別上傳 ttf 檔案,選擇配置,點選轉換。
在這裡插入圖片描述


4.轉換完成如下圖所示,廢話不多說,直接下載下來解壓,我們需要的是裡面 stylesheet.css 這個檔案
5.我們在小程式裡的靜態資原始檔夾裡新建一個叫 iconfont.wxss 樣式檔案,將 上面解壓出來的 stylesheet.css 裡面的內容全部拷貝到 iconfont.wxss 中,另外,還記得我們上面說的 iconfont.css 嗎?這時候就要派上用場了,我們開啟 iconfont.css 這個樣式檔案,將下面的樣式,也就是我用紅框標註的內容複製到 iconfont.wxss 檔案裡,注意上面的不需要複製!!
在這裡插入圖片描述到此為止,準備工作算是已經完成了,這時候你的 iconfont.wxss 應該類似下面這樣:
在這裡插入圖片描述

6.接著,將我們的字型檔案引入到 app.wxss 全域性 , 這樣你就可以在任何你想用到的地方進行呼叫了,只需要將 class 寫對就沒什麼問題了
在這裡插入圖片描述
你要換顏色,只要改變對應的 color 就可以了~
在這裡插入圖片描述
方案一缺點:每次要新增或者更改一個圖示,整個流程都要重新走一遍…

方案二

第二套方案的思路是藉助 svg 向量圖具有不失真和可以自主填充顏色的特點,通過 fill 屬性,使用者可以自定義填充顏色,但是小程式裡面不支援 svg 標籤的,我們通過顏色選擇器將使用者選擇好的顏色填充到 svg 裡,在通過轉碼將換過顏色的 svg 轉成 base64 編碼(線上轉換地址)發給小程式,小程式可以直接用在 image 標籤中的 src 屬性上~

缺點:更改顏色不靈活,每個svg圖示都需要轉換。

方案三

把SVG程式碼直接內聯在CSS的url()方法中,語法就是data:image/svg+xml;utf8,加上完整的SVG程式碼即可!例如比較常用的background-image的url()方法,程式碼如下:

.icon-arrow-down {
    width: 20px; height: 20px;
    background: url('data:image/svg+xml;utf8,<svg t="1540868110683" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1632" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M801.504818 539.525929c0.663667-1.327335 1.831083-2.49475 2.326834-3.822085a63.23232 63.23232 0 0 0-12.79359-73.635108L321.281418 17.707368a63.848011 63.848011 0 1 0-87.772025 92.753529l421.548797 398.776207-419.885631 404.597291a63.792039 63.792039 0 1 0 88.435693 91.953929l465.438808-448.64722c0.799599-0.799599 1.159419-2.158918 2.158918-2.990502a25.003473 25.003473 0 0 1 2.158918-1.831083 55.444222 55.444222 0 0 0 8.139922-12.79359z m0 0z" fill="#cdcdcd" p-id="1633"></path></svg>') no-repeat center;
    background-size: 100%;
}

改顏色的話直接改 fill="#cdcdcd" 就可以。
缺點:
不支援IE,IE瀏覽器出於安全考慮,需要對一些字元進行安全轉義。參考張鑫旭大神的文章