黑马程序员技术交流社区

标题: 【上海校区】小程序使用 Iconfont 的正确姿势 [打印本页]

作者: 懒，羊羊 时间: 2019-1-24 21:12
标题: 【上海校区】小程序使用 Iconfont 的正确姿势
本帖最后由懒，羊羊于 2019-1-24 21:14 编辑

前言现如今移动设备分辨率不胜枚举，传统的标量图标要分别导出 1 倍图、2 倍图、3 倍图等以适应高分辩率设备。这无疑大大增加了设计师和客户端开发的工作量。矢量图以其无损缩放的优点，在图标方面有着极大的优势。
Iconfont 是由阿里推出，功能强大且图标内容很丰富的矢量图标库，提供矢量图标下载、在线存储、格式转换等功能，几乎国内成了矢量图标库的事实标准。
每个 Iconfont 项目都可以生成一个远程 .css 文件，下文以 //at.alicdn.com/t/font_883452_bqb4vsc7km8.css 为例。你可以查阅教程了解如何生成 .css 文件。
正常 Iconfont 的使用流程是在 HTML 的 head 标签中引入样式文件，然后通过类名调用图标

[HTML] 纯文本查看 复制代码

<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 中引入
[JavaScript] 纯文本查看 复制代码
```
@import "/iconfont.wxss";
```
在 .wxml 文件中使用
[JavaScript] 纯文本查看 复制代码
```
<text class="iconfont icon-plus"></text>
```
现在应该可以在开发者工具中看到你想要的图标了。

解决了基本的使用问题之后，我们发现，由于小程序组件内部有独立的类作用域，因此在 app.wxss 中引入的 .iconfont 和 .icon-plus 并不能在自定义组件内生效，所以你需要在所有需要用到 Iconfont 的组件内，分别引入 iconfont.wxss。
组件化如果你看过我之前的文章，应该知道我对冗余代码深恶痛绝。自定义组件就是解决重复引入的手段。
定义一个 iconfont 组件

iconfont.wxss
引入下载好的 Iconfont 样式表
[JavaScript] 纯文本查看 复制代码
```
@import "/iconfont.wxss"
```

iconfont.js
声明组件参数

[JavaScript] 纯文本查看 复制代码

Component({

          properties: {

            icon: String,

          },

})

iconfont.wxml
[JavaScript] 纯文本查看 复制代码
```
<text class="iconfont icon-{{icon}}"></text>
```

外部调用

page.json
引用组件

[JavaScript] 纯文本查看 复制代码

{

    "usingComponents": {

        "iconfont": "path/to/iconfont"

    }

}

page.wxml
[JavaScript] 纯文本查看 复制代码
```
<iconfont icon="plus"></iconfont>
```

后记现在你已经有了一个强大的组件，应付 Iconfont 上的任何项目应该都不在话下。但现在，你不能在外部控制 iconfont 组件的字体大小，下一篇文章我们会讨论这个话题，在这之前，你可以使用 minapp-iconfont 获得完整的特性。
关注我，不仅仅是小程序。

作者：Idan Loo
原帖链接： https://juejin.im/post/5c47ee8fe51d453a86054020

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2