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

爱意满满的作品展示区。

This topic created in 4442 days ago, the information mentioned may be changed or developed.

去年我们网站改版，全站更新了用 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 replies • 2016-09-10 09:36:34 +08:00

Mak

Apr 4, 2014

你分析一下 SVG 的优势呢？

我了解 icon fonts，不了解 SVG.

P233

Apr 4, 2014

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

beenhero

Apr 4, 2014

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

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

leungwensen

Jul 26, 2016

试试这个项目： http://leungwensen.github.io/svg-icon/ 你可以按需选择图标生成 SVG symbol sprite ，也可以到项目里找单独的 SVG 文件。目前 github 上几乎所有流行的 icon font 我都转换成 SVG 了，有超过 4000 个 SVG 图标可以用。坑已踩完，直接拿去用吧。有任何问题可以到项目里给我提 issue 。

beenhero

Sep 10, 2016

@leungwensen 赞，有机会来用下