用字体在网页中画icon图标 · 参考资料

如何把你的图标转换成web字体

在这篇教程中,我们将使用一个免费的Web应用程序 http://www.IcoMoon.io 将矢量图转换成Web字体。然后将生成的字体通过css应用到Web页面中。

字体图标除了图像清晰度之外,一旦图标字体加载了,你的图标就会马上渲染出来,不需要下载一个图像。

  • 可扩展性:图标字体可以用font-size属性设置其任何大小。
  • 灵活性:文字效果可以很容易地应用到你的图标上,包括颜色,阴影和翻转等效果。
  • 兼容性:网页字体支持所有现代浏览器(包括IE6)。

我们开始吧!→

IcoMoon+@font-face+Sass制作Icons

自从CSS3的@font-face属性的出现,使用@font-face制作ICON变得越来越流行。

外国友人jaydenseric写了一篇《FUN WITH SASS & FONT ICONS》教程,介绍了如何使用Sass和@font-face结合制作字体图标,实在是强大而又有意思。 要轻松自己动手制作ICON,大家还是需要具备一些基础知识:

  • IcoMoon工具的基本操作;
  • @font-face使用;
  • Sass基础知识

我们开始吧!→