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

响应式设计中图标用什么方案?icon fonts 还是 SVG?

  •  
  •   beenhero · 2014-04-04 20:30:02 +08:00 · 3931 次点击
    这是一个创建于 3889 天前的主题,其中的信息可能已经有所发展或是发生改变。
    去年我们网站改版,全站更新了用 icon fonts 来作图标,SVG 有明显的优势,不过实际应用的还比较少,想了解一下大家的情况。

    之前给 infoQ 的一篇供稿详细介绍了 icon fonts,有兴趣可以读一下
    www.infoq.com/cn/articles/icons-fonts-as-your-responsive-strategy

    或到我 blog 上读起来可能更舒服点。
    http://beenhero.com/icons-fonts-as-your-responsive-strategy/

    下一篇想写写SVG的应用。
    5 条回复    2016-09-10 09:36:34 +08:00
    Mak
        1
    Mak  
       2014-04-04 20:32:06 +08:00
    你分析一下 SVG 的优势呢?

    我了解 icon fonts,不了解 SVG.
    P233
        2
    P233  
       2014-04-04 20:47:32 +08:00
    图标还是 icon font 方便。SVG 用来制作大面积的动画效果,或者复杂的交互特效都不错,现在技术也比较成熟了
    beenhero
        3
    beenhero  
    OP
       2014-04-04 20:50:56 +08:00
    @Mak SVG 在支持它的A浏览器里没有像 icon fonts 会碰到的unicode 的问题。
    另外,SVG 可以支持彩色,甚至通过js 做有趣的动画。

    另,还可以把 SVG 写进 data-uir 里更省 http request 等等。。。
    具体可以再写一篇文章。
    leungwensen
        4
    leungwensen  
       2016-07-26 22:47:58 +08:00
    试试这个项目: http://leungwensen.github.io/svg-icon/ 你可以按需选择图标生成 SVG symbol sprite ,也可以到项目里找单独的 SVG 文件。目前 github 上几乎所有流行的 icon font 我都转换成 SVG 了,有超过 4000 个 SVG 图标可以用。坑已踩完,直接拿去用吧。有任何问题可以到项目里给我提 issue 。
    beenhero
        5
    beenhero  
    OP
       2016-09-10 09:36:34 +08:00
    @leungwensen 赞,有机会来用下
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   4881 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 21ms · UTC 09:58 · PVG 17:58 · LAX 01:58 · JFK 04:58
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.