小程序點睛之二：小程序使用 Iconfont 的正確姿式

時間 2019-11-07

標籤程序點睛之二使用 iconfont 正確简体版

原文原文鏈接

前言

現現在移動設備分辨率不勝枚舉，傳統的標量圖標要分別導出 1 倍圖、2 倍圖、3 倍圖等以適應高分辯率設備。這無疑大大增長了設計師和客戶端開發的工做量。矢量圖以其無損縮放的優勢，在圖標方面有着極大的優點。javascript

Iconfont 是由阿里推出，功能強大且圖標內容很豐富的矢量圖標庫，提供矢量圖標下載、在線存儲、格式轉換等功能，幾乎國內成了矢量圖標庫的事實標準。css

每一個 Iconfont 項目均可以生成一個遠程 .css 文件，下文以 //at.alicdn.com/t/font_883452_bqb4vsc7km8.css 爲例。你能夠查閱教程瞭解如何生成 .css 文件。html

正常 Iconfont 的使用流程是在 HTML 的 head 標籤中引入樣式文件，而後經過類名調用圖標java

<html>
    <head>
        <link href="//at.alicdn.com/t/font_883452_bqb4vsc7km8.css" />
    </head>
    <body>
        <!-- 這是一個名爲 plus 的 icon -->
        <i class="iconfont icon-plus"></i>
    </body>
</html>
複製代碼

不幸的是小程序不支持引入外部 css 文件，爲此我尋遍網絡，竟沒有找到 Iconfont 在小程序中的正確用法。git

本文根據我在實踐經驗所得，是我目前能找到在小程序中使用 Iconfont 最簡的方法。github

引入

雖然小程序不支持引入外部樣式表，但 .wxss 文件本質上就是 .css 文件，所以咱們能夠將 Iconfont 的樣式表保存到本地的 .wxss 中。json

下載 at.alicdn.com/t/font_883452_bqb4vsc7km8.css 至 /iconfont.wxss，並在 app.wxss 中引入小程序
```
@import "/iconfont.wxss";
複製代碼
```

在 .wxml 文件中使用網絡

<text class="iconfont icon-plus"></text>
複製代碼

如今應該能夠在開發者工具中看到你想要的圖標了。app

解決了基本的使用問題以後，咱們發現，因爲小程序組件內部有獨立的類做用域，所以在 app.wxss 中引入的 .iconfont 和 .icon-plus 並不能在自定義組件內生效，因此你須要在全部須要用到 Iconfont 的組件內，分別引入 iconfont.wxss。

組件化

若是你看過我以前的文章，應該知道我對冗餘代碼深惡痛絕。自定義組件就是解決重複引入的手段。

定義一個 `iconfont` 組件

iconfont.wxss

引入下載好的 Iconfont 樣式表
```
@import "/iconfont.wxss"
複製代碼
```

iconfont.js

聲明組件參數

Component({
  	properties: {
    	icon: String,
  	},
})
複製代碼

iconfont.wxml

<text class="iconfont icon-{{icon}}"></text>
複製代碼

外部調用

page.json

引用組件

{
    "usingComponents": {
        "iconfont": "path/to/iconfont"
    }
}
複製代碼

page.wxml

<iconfont icon="plus"></iconfont>
複製代碼

後記

如今你已經有了一個強大的組件，應付 Iconfont 上的任何項目應該都不在話下。但如今，你不能在外部控制 iconfont 組件的字體大小，下一篇文章咱們會討論這個話題，在這以前，你可使用 minapp-iconfont 得到完整的特性。

關注我，不單單是小程序。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

小程序點睛之二：小程序使用 Iconfont 的正確姿式

前言

引入

組件化

定義一個 iconfont 組件

外部調用

後記

定義一個 `iconfont` 組件