在寫小程序項目中遇到icon圖標引入不起作用，原因是因為小程序必須先轉為base64引入！

第一步

選好自己要用的icon圖標并下載至本地

下載后得到這樣目錄的文件

第二步 轉換成base64
網址：https://transfonter.org/

選擇后綴為.ttf的文件

第三步：下載成功后，得到一個名為 “transfonter.org” 開頭的壓縮包，解壓后得到三個文件，打開其中 “stylesheet.css” 文件

第四步：在小程序目錄新建放置圖標資源的文件

這是我自己的一個目錄，可以看到在iconfont.wxss中，如果是直接復制文件的話，記得把后綴css改成wxss

把@font-face中的內容換成stylesheet.css的內容

還需要在wxss中添加這段代碼：

[class^="icon-"], [class*=" icon-"] {/* use !important to prevent issues with browser extensions that change fonts */font-family: 'iconfont' !important;speak: none;font-style: normal;font-weight: normal;font-variant: normal;text-transform: none;line-height: inherit;/* Better Font Rendering =========== */-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}

之后找到下載的本地icon圖標文件夾里的iconfont.css文件，將里邊的圖標代碼復制到wxss中，添加完之后整體代碼如下：

第五步 在app.wxss中引入，就可以全局使用了。

最后測試顯示效果：

總結

以上是生活随笔為你收集整理的微信小程序引入下载至本地的iconfont图标的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。