前端观察

icon font大搜罗

看了上一篇《CSS3 icon font完全指南》之后,你是否也想在自己的项目——特别是移动项目——中小试一把呢?我也一直在找机会show一下这种方法,至少,可以灭了IE6的透明和惨不忍睹的锯齿什么的。今天我们收集国外各种现有的icon font,以给大家提供点儿参考。

免费字体

下面的这些icon font都是免费或者开源的,你可以大胆的使用,但是作为设计师,大家要有点儿修养,在使用前先看看相关字体文件的版权授权方式~~

Font Awesome(150+个)

为配合Twitter Bootstrap使用而设计。其实它是Glyphish的一个免费的重新设计的版本。

Modern Pictograms(89个)

可以在Font Squirrel免费下载,但是如果你愿意,也可以捐款

Erler Dingbats(~120个)

Ecqlipse 2(281个)

Heydings Icons(60个)

Iconic(171个)

Web Symbols(~80个)

Entypo(100+个)

JustVector Social Icons(150+个)

只有社交符号

PulsarJS(73个)

面向移动网站开发的一个字体。

Raphaël(116个)

Dot Com(92个)

The Noun Project(424个)

Gcons(100个)

这个字体开源

Pixelated(36个)

Roam Design(99个)

仅限个人使用

Jigsoar(66个)

Social Media Pictograms (74个)

Social Media Pictograms

pictograms 包括几乎所有的社交媒体图标。然后对于一些图标,通过字母的大小写来实现是否有圈。

Peculiar (45个)

Peculiar

好吧,Peculiar其实不是一个字体,而是用css3实现的icon,不过方法可鉴。

Symbol Signs(21个)

Symbol Signs @fontface font

Web Symbols(78个)

Web Symbols @fontface font

InfoBits Icons & Dingbats(190个)

InfoBits Icons & Dingbats @fontface font

ikoo(65个)

ikoo @fontface font

Social Networking Icons Font(56个)

Social Networking Icons Font @fontface font

收费字体

下面的icon font都是收费的字体,它们相对于上面的免费字体有什么提升吗?有那些地方或细节值得我们学习?

Glyphish(400个)

Glyphicons(350个)

Gedy Rivera Social(107个)

Fico(52个)

WriteSocial

ClickBits(400个)

Flexi Social(65个)

Steedicons(94个)

Web Icon Set(1600+个)

Geomicons(100+个)

Picons(100+个)

Symbolicons(500个)

Bixel(65个)

Tabs(745个)

Gentleface(304个)

Eddit iPhone UI(160个)

Simplicity(205个)

Picas(250个)

CleanIcons(55个)

Helveticons(600+个)

UIcons(362个)

IcoMoon(500+个)

Pictos(600+个)

iconSweets 2(1000+个)

Tipogram(90个)

GUI Design Icons(30个)

GUI Design Icons @fontface font

其它工具

  • Fontomas提供一些免费的字体,并且允许你挑选你需要的图标然后生成你自定义的字体文件,不过生成的文件是svg的,你需要将其转化为其它格式的;
  • Hieroglyph – 类似fontomas,从一系列的svg字体文件生成一个字体文件;

是不是你也想要试一把了啊,如果你在项目中有使用icon font,欢迎与我们分享经验。

整理自: