V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
kai1992
V2EX  ›  前端开发

纯 css icons 图标,只使用一个 i 标签,减少请求量

  •  
  •   kai1992 · 2016-11-28 09:39:15 +08:00 · 2733 次点击
    这是一个创建于 2925 天前的主题,其中的信息可能已经有所发展或是发生改变。

    css-icons

    github 地址 CSS-ICONS

    使用方法

    直接引入 css 就可以,由于效果是 css3 实现,所以建议在手机端页面引用。

    <link rel="stylesheet" href="icons.css">
    

    例子

    加上 class

        <i class="css-icon-close-circle"></i>
    

    就可以看到效果

    目前有 60 个图标,还会继续添加更新... 点击页面图标就可以看到 class 名称

    13 条回复    2016-11-28 14:36:53 +08:00
    yangg
        1
    yangg  
       2016-11-28 09:49:34 +08:00
    至少单位用 em 吧。
    swift
        2
    swift  
       2016-11-28 09:58:05 +08:00
    iconfont 才是正道,矢量图,颜色,大小随便设置
    SourceMan
        3
    SourceMan  
       2016-11-28 09:59:55 +08:00
    减少请求量已经是上个前端时代的优化需求了。
    SourceMan
        4
    SourceMan  
       2016-11-28 10:01:05 +08:00
    哈哈哈,来了应景的 bug
    kai1992
        5
    kai1992  
    OP
       2016-11-28 10:27:59 +08:00
    @yangg 有道理
    kai1992
        6
    kai1992  
    OP
       2016-11-28 10:28:09 +08:00
    @swift 有道理
    kai1992
        7
    kai1992  
    OP
       2016-11-28 10:28:23 +08:00
    @SourceMan 好吧
    xxxyyy
        8
    xxxyyy  
       2016-11-28 10:30:39 +08:00 via Android
    @swift svg 才是正道
    learnshare
        9
    learnshare  
       2016-11-28 11:56:21 +08:00
    css 绘图只是玩玩,真搞起来太费时间
    Kilerd
        10
    Kilerd  
       2016-11-28 12:55:05 +08:00
    @learnshare 主要是消耗渲染时间。
    learnshare
        11
    learnshare  
       2016-11-28 13:37:23 +08:00
    @Kilerd 是写起来费时间,性能上不是问题
    kai1992
        12
    kai1992  
    OP
       2016-11-28 14:13:19 +08:00
    @learnshare 所以慢慢积累起来,就方便了
    learnshare
        13
    learnshare  
       2016-11-28 14:36:53 +08:00
    @kai1992 总不如 AI/Sketch 搞一搞,做成 字体 /SVG 来得方便

    闲事用 CSS 画一画倒也是一种乐趣
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1033 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 18:46 · PVG 02:46 · LAX 10:46 · JFK 13:46
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.