V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
designer
V2EX  ›  分享创造

分享丨做了个前端字体图标库:草莓图标

  •  3
     
  •   designer · 2017-06-14 12:41:45 +08:00 · 7967 次点击
    这是一个创建于 2748 天前的主题,其中的信息可能已经有所发展或是发生改变。

    enter image description here

    草莓图标库

    为开发者设计的一套免费开源图标库!
    

    http://chuangzaoshi.com/icon/

    这套图标是我和设计朋友用 Illustrator 和 Sketch 将每个图标设置成 16X16 的像素方格大小精心绘制。所有线条都尽量保持了 1 像素,风格统一,为了兼顾商业大众项目,在识别度方面,通用性和个性差异化上做一个均衡。我们会定期新增和优化草莓图标库。力求矢量图的像素级别的完美显示。

    有些设计我自己之前也习惯去用阿里 iconfont 平台的图标,类别比较丰富,但是也存在许多其他问题:设计师风格不同,图标线条粗细不一致,关键一点 iconfont 有些图标存在潜在的商业版权风险。

    草莓图标的最初版本,也是为了我们自己的项目设计使用,随着图标越来越多,现在使用 SIL OFL 协议免费开源分享给有需要的开发者朋友,也同样希望给大家提供多一个选择! 也很感谢流浪小猫 @xcatliu 和一些技术小伙伴。

    欢迎访问→ 草莓图标
    github 地址→ https://github.com/xiangsudian/caomei

    第 1 条附言  ·  2017-06-14 14:49:57 +08:00
    作为设计师,技术是薄弱点。如果有前端小伙伴有时间并且愿意一起维护这个开源项目
    可以私信!谢谢!
    第 2 条附言  ·  2017-06-15 16:20:18 +08:00
    感谢 @leopku
    图标放大颤抖的问题已经修复了
    第 3 条附言  ·  2017-06-17 02:31:48 +08:00
    修复了下命名的问题,新增了一些图标。
    更新到了版本 1.0.1
    59 条回复    2017-06-16 00:03:06 +08:00
    yu7er
        1
    yu7er  
       2017-06-14 12:57:54 +08:00 via Android   ❤️ 1
    好棒,希望能加上框架 logo 之类的,谢谢!
    designer
        2
    designer  
    OP
       2017-06-14 12:59:35 +08:00   ❤️ 1
    @yu7er 嗯 你说的是各大语言的框架 logo 吧。主要是针对前端开发者的需求。后期会不断地新增,
    isCyan
        3
    isCyan  
       2017-06-14 13:02:14 +08:00 via Android   ❤️ 1
    网页里面有两个 czs-android 一个安卓图标一个苹果图标
    czs-chorme 应为 chrome
    zhifubao 不是有名字叫 alipay 吗
    designer
        4
    designer  
    OP
       2017-06-14 13:04:26 +08:00
    @isCyan 233 图标太多了,在导出和编辑成字体文件的时候,输入有误。感谢提醒
    sxw11
        5
    sxw11  
       2017-06-14 13:11:02 +08:00   ❤️ 1
    提个不知道算不算 bug 的意见哈,官网那些图标在鼠标悬停到变大之前一直在颤抖,看这有点不舒服 0.0
    Chrome 58.0.3029.96
    designer
        6
    designer  
    OP
       2017-06-14 13:17:13 +08:00
    @sxw11 谢谢,下次争取搞的尽享如丝般顺滑
    droiz
        7
    droiz  
       2017-06-14 13:46:26 +08:00   ❤️ 1
    滋瓷!感谢!
    ivmm
        8
    ivmm  
       2017-06-14 13:47:19 +08:00   ❤️ 1
    赞一个!
    wolfan
        9
    wolfan  
       2017-06-14 13:50:41 +08:00 via Android
    啥时候能上国旗 and 国徽就更新爱了喵~
    intellectual
        10
    intellectual  
       2017-06-14 13:54:56 +08:00   ❤️ 1
    点赞,不过,新的花样又来了,ios11 里面一部分线图标变面图标了...
    intellectual
        11
    intellectual  
       2017-06-14 13:55:47 +08:00
    16px 有点小,如果默认可选大点的像素,找图标就不费神了。
    designer
        12
    designer  
    OP
       2017-06-14 13:56:23 +08:00
    @ivmm 感谢,都成了老朋友了。
    @wolfan 开发者的需求真是深不可测啊
    designer
        13
    designer  
    OP
       2017-06-14 14:00:17 +08:00
    @intellectual
    16px 是 web 标准的最小图标。在这个像素下绘制,也就是为了保持图标的精致性。我在演示站点把字体换成了 16px,为了大家能看到图标在最小效果下的实际样子。
    字体图标在实际应用的过程中,你可以自行设置尺寸(16x16 24x24 32x32 40x40 )。

    草莓图标,目前有线性也有相对应的实心图标(未来一个图标都会尽量做这两个配套)。
    jinzhe
        14
    jinzhe  
       2017-06-14 14:41:42 +08:00   ❤️ 1
    能自定义下载就好了
    演示站可以设置大小
    designer
        15
    designer  
    OP
       2017-06-14 14:46:59 +08:00
    @jinzhe 有这个打算,目前在找前端小伙伴
    zangbob
        16
    zangbob  
       2017-06-14 14:47:41 +08:00   ❤️ 1
    感谢分享,看了下图标非常不错,更重要的是避免了版权纠纷。。
    designer
        17
    designer  
    OP
       2017-06-14 14:50:43 +08:00
    @zangbob 感谢
    learnshare
        18
    learnshare  
       2017-06-14 14:54:46 +08:00   ❤️ 1
    demo 给的图标有点小,鼠标 hover 动画有点抖动
    Showfom
        19
    Showfom  
       2017-06-14 15:09:29 +08:00 via iPhone   ❤️ 1
    支持一下
    Kilerd
        20
    Kilerd  
       2017-06-14 15:17:42 +08:00   ❤️ 1
    支持。
    Martox
        21
    Martox  
       2017-06-14 15:43:56 +08:00
    以后支持一下
    jin5354
        22
    jin5354  
       2017-06-14 15:50:17 +08:00
    支持
    580a388da131
        23
    580a388da131  
       2017-06-14 16:02:19 +08:00   ❤️ 1
    哇哦 非好东西 常感谢
    levie
        24
    levie  
       2017-06-14 16:12:19 +08:00   ❤️ 2
    支持!以后应该能用到 😄
    designer
        25
    designer  
    OP
       2017-06-14 16:19:32 +08:00
    @levie 欢迎 snipaste 加入草莓豪华大餐!
    290601953
        26
    290601953  
       2017-06-14 16:52:01 +08:00
    http://www.iconfont.cn/ 和这个区别是?
    290601953
        27
    290601953  
       2017-06-14 16:52:34 +08:00
    竟然不能删除自己的评论....尴尬了....发完才看到主题里面写了..
    designer
        28
    designer  
    OP
       2017-06-14 17:15:27 +08:00
    @290601953
    没事,iconfont 是可以在线制作和上传的以及提供图标素材下载的大众化平台。
    而草莓是一个走个性化精致风格方案的图标库。
    ajan
        29
    ajan  
       2017-06-14 17:18:57 +08:00
    赞一个!
    mokeyjay
        30
    mokeyjay  
       2017-06-14 17:24:18 +08:00
    先点赞
    Slengl
        31
    Slengl  
       2017-06-14 17:28:07 +08:00 via Android
    支持
    OctoCat
        32
    OctoCat  
       2017-06-14 18:12:20 +08:00 via iPhone
    纯支持
    dreammes
        33
    dreammes  
       2017-06-14 19:41:33 +08:00
    支持
    designer
        34
    designer  
    OP
       2017-06-14 19:42:58 +08:00 via iPhone
    @Martox
    @jin5354
    @ajan
    @mokeyjay
    @Slengl
    @OctoCat
    @dreammes
    不一一点赞了,感谢各位。
    6ovo9
        35
    6ovo9  
       2017-06-14 19:51:44 +08:00
    bilibili 好萌
    designer
        36
    designer  
    OP
       2017-06-14 20:55:36 +08:00 via iPhone
    @6ovo9 以后会增加一些二次元元素图标,毕竟很多开发者都已经萌化了。
    4396NeverBeSlave
        37
    4396NeverBeSlave  
       2017-06-14 22:04:49 +08:00   ❤️ 1
    支持一下
    652600543
        38
    652600543  
       2017-06-15 08:22:48 +08:00
    没有任何理由的支持!!
    killerv
        39
    killerv  
       2017-06-15 08:52:10 +08:00
    很不错
    leopku
        40
    leopku  
       2017-06-15 08:58:06 +08:00
    @designer 楼主留一个联系方式,微信、QQ、tg 均可
    cnzzz
        41
    cnzzz  
       2017-06-15 09:10:21 +08:00
    点赞
    xcatliu
        42
    xcatliu  
       2017-06-15 09:10:40 +08:00 via iPhone
    强烈支持
    metrue
        43
    metrue  
       2017-06-15 09:24:51 +08:00
    awesome !!!!
    yjgoo
        44
    yjgoo  
       2017-06-15 09:25:35 +08:00
    支持!
    LuciusChen
        45
    LuciusChen  
       2017-06-15 09:39:52 +08:00
    hover 的时候放大感觉在抖( facepalm
    designer
        46
    designer  
    OP
       2017-06-15 09:47:25 +08:00 via iPhone
    @leopku 更新啦 个人中心,欢迎勾搭!
    fengtalk
        47
    fengtalk  
       2017-06-15 09:56:52 +08:00
    不错,强烈支持!
    zlg
        48
    zlg  
       2017-06-15 10:10:01 +08:00
    支持!
    suantong
        49
    suantong  
       2017-06-15 11:09:21 +08:00 via Android
    真棒。我一直想找能区分 Facebook share, Facebook invite, Facebook likes 的图标,楼主整不?。
    designer
        50
    designer  
    OP
       2017-06-15 11:18:02 +08:00
    @suantong 版本在 2.0 会做一套手势的不同动作
    shisaq
        51
    shisaq  
       2017-06-15 11:55:22 +08:00
    做得真棒!!!
    leopku
        52
    leopku  
       2017-06-15 12:06:27 +08:00
    @designer 已加,请通过
    Biwood
        53
    Biwood  
       2017-06-15 12:06:55 +08:00
    好奇这些 font icon 使用什么工具制作的,收费平台还是开源软件?有推荐的工具么
    designer
        54
    designer  
    OP
       2017-06-15 12:32:08 +08:00 via iPhone
    @Biwood 草莓采用的 icomoom 国内的 用阿里的 iconfont 就 ok 拉
    designer
        55
    designer  
    OP
       2017-06-15 12:32:29 +08:00 via iPhone
    @leopku 已加!
    cuit4017
        56
    cuit4017  
       2017-06-15 15:01:41 +08:00 via Android
    看起来很不错😎
    designer
        57
    designer  
    OP
       2017-06-15 15:13:11 +08:00
    @cuit4017 希望能满足你各种姿势
    pulelt
        58
    pulelt  
       2017-06-15 16:50:55 +08:00
    很酷呀
    wensonsmith
        59
    wensonsmith  
       2017-06-16 00:03:06 +08:00
    厉害了! 图标很赞
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   961 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 19:16 · PVG 03:16 · LAX 11:16 · JFK 14:16
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.