微信小程序引入字體圖標

mayaohua 發布于2019-08-29 16:59 / 1570人閱讀

摘要：小程序與平常開發中引入字體圖標的方式不一樣，必須先轉為再引入，以阿里巴巴字體圖標為例一去官網下載想要的圖標將想要的圖標添加入庫進入購物車下載代碼下載成功后，將得到一個名為的文件，然后解壓得到這么一堆文件二轉換文件為推薦去轉換配置選項，將配置

小程序與平常web開發中引入字體圖標的方式不一樣，必須先轉為base64再引入，以阿里巴巴字體圖標 http://iconfont.cn 為例：

一、去官網 http://iconfont.cn 下載想要的圖標

1.將想要的圖標添加入庫：

2.進入購物車

3.下載代碼

4.下載成功后，將得到一個名為 "download.zip" 的文件，然后解壓得到這么一堆文件：

二、轉換 ttf 文件為 base64

推薦去 https://transfonter.org 轉換

1.配置選項，將配置改為如下紅色框所示，并打開 Base64 encode 選項：

2.配置完選項，下一步就可以添加ttf文件開始轉換了：

3.選擇剛剛從阿里巴巴 http://iconfont.cn 下載后解壓出來一堆文件中的 ttf 文件：

4.轉換并下載：

5.下載成功后，得到一個名為 "transfonter.org" 開頭的壓縮包，解壓后得到三個文件，然后我們打開 "stylesheet.css" 文件:

三、在小程序中使用

1.新建一個小程序項目，成功后可以自己建一個 resource 文件夾用來放字體圖標等資源，并在resource目錄下新建一個 "style.wxss" 的空白文件，這個wxss就是我們的字體圖標文件：

2.打開新建的 style.wxss 空白文件，將轉換完成后下載下來的三個文件中 "stylesheet.css" 里面的內容全部復制過來：

3.并將最開始從阿里巴巴下載下來解壓后的 "iconfont.css" 打開，把未打叉的部分全部復制到小程序新建的 "style.wxss" 中：

4.現在我們的 "style.wxss" 長這樣：

那現在可以直接使用了嗎？NO~ ，還需要添加如下一段代碼到 style.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;
}

最終 style.wxss 如下（注意兩個綠色框中的 font-family 要一致）：

5.全局引入字體圖標，打開 "app.wxss" ，引入剛剛創建的 style.wxss，就可以全局使用了 :

6.全局使用

任意打開 pages 文件夾下的 .wxml 文件，像我們平常那樣使用就可以了（對應的 class類名可以自定義，也可以在剛剛創建的 style.wxss 里面找，或者打開最開始從阿里巴巴下載的文件中，任意一個html文件，都有預覽和對應的類名）：

自定義類名，先在剛剛創建的 style.wxss 修改為自定義的類名，然后在.wxml頁面中寫上對應的類名即可：

style.wxss中：

.wxml頁面中：

style.wxss 中的類名：

打開任意一個html:

GPU云服務器云服務器微信小程序微信小程序支付微信小程序部署微信小程序搭建

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114028.html

微信小程序引入字體圖標

摘要：小程序與平常開發中引入字體圖標的方式不一樣，必須先轉為再引入，以阿里巴巴字體圖標為例一去官網下載想要的圖標將想要的圖標添加入庫進入購物車下載代碼下載成功后，將得到一個名為的文件，然后解壓得到這么一堆文件二轉換文件為推薦去轉換配置選項，將配置小程序與平常web開發中引入字體圖標的方式不一樣，必須先轉為base64再引入，以阿里巴巴字體圖標 http://iconfont.cn 為例： ...

hightopo 2019-08-02 11:43 評論0 收藏0
微信小程序引入字體圖標

摘要：小程序與平常開發中引入字體圖標的方式不一樣，必須先轉為再引入，以阿里巴巴字體圖標為例一去官網下載想要的圖標將想要的圖標添加入庫進入購物車下載代碼下載成功后，將得到一個名為的文件，然后解壓得到這么一堆文件二轉換文件為推薦去轉換配置選項，將配置小程序與平常web開發中引入字體圖標的方式不一樣，必須先轉為base64再引入，以阿里巴巴字體圖標 http://iconfont.cn 為例： ...

doodlewind 2019-08-23 12:23 評論0 收藏0
自己制作微信小程序使用base64字體圖標

摘要：問題微信小程序不能隨意使用網絡資源，如字體文件等不能在小程序中使用字體文件不能使用背景圖片定位來使用內部圖片下面就介紹一下如何制作字體圖標。簡易方式通過兩個在線工具，很容易地生成加密的字體圖標。問題： 1.微信小程序不能隨意使用網絡資源，如字體,css文件等 2.不能在小程序中使用字體文件 3.不能使用background-position背景圖片定位來使用內部png圖片下面就介紹...

leon 2019-08-29 16:18 評論0 收藏0