小程序使用 Iconfont 的正确姿势

发布时间：2020-12-14 19:25:27 所属栏目：资源来源：网络整理

导读：现如今移动设备分辨率不胜枚举，传统的标量图标要分别导出 1 倍图、2 倍图、3 倍图等以适应高分辩率设备。这无疑大大增加了设计师和客户端开发的工作量。矢量图以其无损缩放的优点，在图标方面有着极大的优势。 Iconfont 是由阿里推出，功能强大且图标内容很

现如今移动设备分辨率不胜枚举，传统的标量图标要分别导出 1 倍图、2 倍图、3 倍图等以适应高分辩率设备。这无疑大大增加了设计师和客户端开发的工作量。矢量图以其无损缩放的优点，在图标方面有着极大的优势。

Iconfont 是由阿里推出，功能强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能，几乎国内成了矢量图标库的事实标准。

每个 Iconfont 项目都可以生成一个远程?.css?文件，下文以?//at.alicdn.com/t/font_883452_bqb4vsc7km8.css?为例。你可以查阅教程了解如何生成?.css?文件。

正常 Iconfont 的使用流程是在 HTML 的?head?标签中引入样式文件，然后通过类名调用图标

<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 在小程序中的正确用法。

本文根据我在实践经验所得，是我目前能找到在小程序中使用 Iconfont 最简的方法。

引入

虽然小程序不支持引入外部样式表，但?.wxss?文件本质上就是?.css?文件，因此我们可以将 Iconfont 的样式表保存到本地的?.wxss?中。

下载?at.alicdn.com/t/font_883452_bqb4vsc7km8.css?至?/iconfont.wxss?，并在?app.wxss中引入
```
@import "/iconfont.wxss";
复制代码
```

在?.wxml?文件中使用

<text class="iconfont icon-plus"></text>
复制代码

现在应该可以在开发者工具中看到你想要的图标了。

解决了基本的使用问题之后，我们发现，由于小程序组件内部有独立的类作用域，因此在?app.wxss?中引入的?.iconfont?和?.icon-plus?并不能在自定义组件内生效，所以你需要在所有需要用到 Iconfont 的组件内，分别引入?iconfont.wxss?。

组件化

如果你看过我之前的文章，应该知道我对冗余代码深恶痛绝。自定义组件就是解决重复引入的手段。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!