web界面设计的免费图标字体

分类栏目:用户体验 - 视觉设计

28117

发布于 4 条评论

web界面设计的免费图标字体

本文将介绍18种免费图标字体,这些免费图标字体可以完美的运用在你的界面设计中,可以让你更快捷的设计出更精彩的界面。

什么是图标字体?

图标字体不同于标准的字体数字的字符,是一种包含符号和字形(如箭头、文件夹、放大镜)的字体文件。

图标字体的使用就像和使用网页字体一样,个人理解就是把一些图标以字体的形式保存在一个字体文件里面,然后再以调用字体的方式来使用。具体使用方法详情可以去看看css中的@font-face的用法,在这里就不详细解释了。

在网页中使用图标字体有以下几个优点:

  • 有很大的跨浏览器支持(即使IE6,也能支持这种规则)
  • 在用户调整他们的网页浏览器设置的时候可以自动缩放
  • 可以提供不同的颜色
  • 能体现字体和文本有关的属性(如文本阴影与梯度)

免费字体

ok,让我们一起来看看这神奇的18款优秀的免费图标字体。

1. Foundation Icons Fonts

Foundation Icons Fonts

2. Sosa icon font

Sosa icon font

3. Font Awesome

Font Awesome

4. Iconic Icon Set

Iconic Icon Set

5. Raphaël Icon-Set

Raphaël Icon-Set

6. PulsarJS @FontFace

PulsarJS @FontFace

7. IcoMoon

IcoMoon

8. Typicons

Typicons

9. Entypo

Entypo

10. Heydings Icons

Heydings Icons

11. Heydings Controls (App Icon Font)

Heydings Controls (App Icon Font)

12. JustVector Social Icons Font

JustVector Social Icons Font

13. Modern Pictograms

Modern Pictograms

14. Brandico

Brandico

15. Signify Lite

Signify Lite

16. Web Symbols typeface

Web Symbols typeface

17. Social Media Icons

Social Media Icons

18. ikoo

ikoo

图标字体资源

下面是网络上一些好的图标,字体相关的文章和教程。

原文地址:sixrevisions.com

全部评论 / 4

  1. 我的站图标都是用字体搞,但是IE9一下甚至谷歌浏览器看到字体是不平滑有锯齿的。

    昔影 2012-09-02
    2
  2. 哇,界面好好看,太酷了,但是不知道怎么使用 :roll:

    仰望风 2012-09-02
    1
    1. Javin

      呵呵,其实使用起来不难,只要好好的看看@font-face的用法。如果有什么问题,可以联系我

      1号 Javin 2012-09-02
      1. 您好,我的网站最近也想用font-face来做图标,因为设计稿是用psd做的,我在psd把路径复制到ai,没问题,但是从ai复制到fontLab时一直没反应,请问您是怎么做图标的?

        jellychow 2012-09-02