评论

自制图标和引入iconfont

一些简单的图标不需要美工,介绍如何生成tab图标和引入iconfont。

先看效果图:

以上的UI并不需要美工,程序员自己就能实现。具体步骤如下:

1、找现成的图标去这里:https://icomoon.io/

2、点击Generage Font F

3、下载font文件,下载后解压成icomoon文件夹,找到/fonts/icomoon.ttf,接下来要用到它;

4、生成 @font-face去这里:https://transfonter.org

第一步Add fonts时,选择/fonts/icomoon.ttf

第二步打开Base64开关;

第三步点击转换;

第四步下载生成的文件;

5、将在icomoon生成的文件style.css和在transfonter生成的文件stylesheet.css中的内容编辑合并,生成小程序中的一个wxss文件:

6、在其他wxss里引用该icon.wxss文件:

@import "./icon.wxss";

7、在wxml里的用法:

<icon class="ico icon-chevron-right" />

8、结束。

最后一次编辑于  2020-01-06  
点赞 9
收藏
评论

2 个评论

  • Hanks🇨🇳
    Hanks🇨🇳
    2020-01-06

    文章板块,技术贴难得啊


    PS:icon用阿里的矢量图标库,感觉更好用哈哈

    https://www.iconfont.cn/

    2020-01-06
    赞同 1
    回复
  • 假装在上海
    假装在上海
    2020-01-06

    遇到技术贴 赞就对了

    2020-01-06
    赞同 1
    回复
登录 后发表内容