Quantcast
Channel: 云秀网|在云上开发优秀的网站 » html5+css3
Viewing all articles
Browse latest Browse all 10

如何找到自己需要的Icon Fonts

0
0

转载自:http://www.solagirl.net/find-icon-fonts.html

要找到一款适合自己用的Icon Fonts,首先要了解资源。本文列举了一下常见的icon fonts,并描述了icon fonts的特点,了解图标字体的特点能够帮助你在选择字体时有的放矢,选择适合自己的。

按照编码分类

拉丁语编码(Latin encoding),用字母或单词代替图标,例如d表示日历图标
Unicode编码,例如fontawesome,用.fa-glass:before { content: “\f000″;}表示酒杯图标

按应用方式分类

直接写在html代码里,例如d表示日历图标,

<span class="icon">d</span>

用css插入图标编码,例如,对应样式

.fa-glass:before { content: "\f000";}

将图标编码放到标签属性中,例如用data-属性::

<span class="icon" data-icon="&#xE001;" aria-hidden="true"></span>

,再如ICONIC的用法

<span class="oi oi-icon-name" title="icon name" aria-hidden="true"></span>

Chris Coyier写了一篇文章,总结了常用的Ion Fonts链接。

http://css-tricks.com/flat-icons-icon-fonts/

WE LOVE ICON FONTS
Google Webfont提供网络字体CDN,weloveiconfonts.com提供类似的服务,只是全部为图标字体。

http://weloveiconfonts.com/

Fontello
Fontello的特色在于可以定制自己的字体包,不仅可以上传自己的svg图形,还能将第三方Icon Fonts提供商的字体加进去,比如Font awesome,Entypo。

http://fontello.com/

ICOMATIC
icomatic的字体直接使用英文字母表示,而非常见的unicode。使用时语法如下所示:


<div class="icomatic icon">alert</div>

<div class="icomatic icon">arrowdown</div>

<div class="icomatic icon">arrowleft</div>

用户既可以下载已经完成的网络字体包,也可以通过其APP创建自定义字体包。

http://www.icomatic.io/

ICONIC OPEN
ICONIC的免费图标引用形式多种多样,不仅可以当做网络字体使用,也能直接引用svg或svg sprite。

https://useiconic.com/open

ICONIC PRO
Iconic的收费图标有一些十分有趣的特性,比如一个图标的不同部分可以使用不同颜色;图标可以根据屏幕尺寸大小改变样子,对小屏幕隐藏一些细节,大屏幕上则展现更丰富的细节。

https://useiconic.com/tour/

Genericons
一款针对博客的免费网络图标字体,由WordPress的开发者Automattic提供,在WordPress默认主题中有用到

http://genericons.com


Viewing all articles
Browse latest Browse all 10

Latest Images

Trending Articles





Latest Images