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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 3916 天前的主题，其中的信息可能已经有所发展或是发生改变。

去年我们网站改版，全站更新了用 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的应用。

Fonts

icon

svg

5 条回复 • 2016-09-10 09:36:34 +08:00

Mak

2014-04-04 20:32:06 +08:00

你分析一下 SVG 的优势呢？

我了解 icon fonts，不了解 SVG.

P233

2014-04-04 20:47:32 +08:00

图标还是 icon font 方便。SVG 用来制作大面积的动画效果，或者复杂的交互特效都不错，现在技术也比较成熟了

beenhero

2014-04-04 20:50:56 +08:00

@Mak SVG 在支持它的A浏览器里没有像 icon fonts 会碰到的unicode 的问题。
另外，SVG 可以支持彩色，甚至通过js 做有趣的动画。

另，还可以把 SVG 写进 data-uir 里更省 http request 等等。。。
具体可以再写一篇文章。

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

2016-09-10 09:36:34 +08:00

@leungwensen 赞，有机会来用下