小程序点睛之二：小程序使用 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` 组件