- 将整个Can ICO图标库的目录复制到你的项目中
- 在
<head>标签中添加<link rel="stylesheet" href="canico.css"> - 在需要图标的地方添加对应
class的<i>即可,已logo图标为例:<i class="cd-candesign"></i>
本地运行demo或者点击下面官网即可查看更多图例。 canico.canmeng.net
1.将canico(for mini program)目录下的“canico” 上传到任意小程序目录
2.在 app.json 或 index.json 中引入组件
"usingComponents": {
"can-ico": "canico/icon/index"
}设置name属性为对应的图标名称即可,所有可用的图标名称见后续官网或html版demo
<can-ico name="candesign" />| 数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| name | 图标名称 | String |
- |
| color | 图标颜色 | String |
inherit |
| size | 图标大小,如 20px,2em |
String |
inherit |
| custom-style | 自定义样式 | String |
- |
如:
<can-ico name="candesign" color="red" size="5em" /> 实例表示,插入图标 “candesign” 并且颜色为红色,大小为5em。
如果直接调用icon文件,所使用的URL即:
src:url(https://d.canmeng.net/css/fonts/Can-ico.ttf)此地址可修改为自己的CDN加速地址,当然也可拆封即用。
修改路径为:
/canico/icon/index.wxss 本人并非专职设计,ICO有自己画有搜集,遵循:
- Can ICO图标库中的字体遵循 SIL OFL 1.1 协议
- Can ICO图标库中的 css 遵循 MIT 协议
- Can ICO图标库中的文档遵循 CC BY 3.0 协议
2018.11.6:初始版本 图标数 327个
2018.11.13:新增 xcx,xcx-i 图标ICO
2018.11.27: 上线微信小程序版ICO
