icon图标库

简介

什么是图标字体？

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

例如：

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

免费图标字体可以完美的运用在你的界面设计中，可以让你更快捷的设计出更精彩的界面。

很多UI框架都提供了 图标的直接 引用

比如bootstrap。

使用方法

图标字体目前基本上有两种方式。

一种是引用框架js或者字体库，然后让class= 我们需要的样式名

例如：@import url(http://weloveiconfonts.com/api/?family=zocial);/* zocial */[class*="zocial-"]:before {font-family: 'zocial', sans-serif;}

<ul> 
<li class="zocial-twitter"></li>
<li class="zocial-flickr"></li> 
<li class="zocial-lastfm"></li> 
<li class="zocial-reddit"></li>
</ul>

第二种是选中我们需要的图标生成我们自己的字体库，然后下载到本地，引用后，直接使用编号

ps：有一些网站只能下载到svg格式的文件，这些文件的使用方法也是第二种，需要到另外的网站上上传制作 字体库。

http://fontello.com/ 就能制作

选中完后会生成编码，要记住哪些编码对应哪些图标

在css中引用

/*Entypo font*/
@font-face {
    font-family: 'FontomasEmtypo';
    src: url('entypo/fontomas-webfont.eot');
    src: url('entypo/fontomas-webfont.eot?#iefix') format('embedded-opentype'),
         url('entypo/fontomas-webfont.woff') format('woff'),
         url('entypo/fontomas-webfont.ttf') format('truetype'),
         url('entypo/fontomas-webfont.svg#FontomasCustomRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

html中引用：

<div class="box">
  <span class="key">!</span>
  <span class="fontomas"> ! </span>
  <span class="hex"> ! </span>
  <span class="cssContent">content:'!'</span>
</div>

图标库收集

下面就列举可以制作或者可以下载svg文件的网站：

bootstrap

http://v3.bootcss.com/components/

WE LOVE ICON FONTS

链接：

http://weloveiconfonts.com/

Fontello

链接：

http://fontello.com/

ICOMATIC

链接：

http://www.icomatic.io/

ICONIC OPEN

链接：

https://useiconic.com/open

ICONIC PRO

链接：

https://useiconic.com/tour/

Genericon

链接：

http://genericons.com/

Foundation Icons Fonts

链接：

http://zurb.com/playground/foundation-icons

Sosa icon font

链接：

http://tenbytwenty.com/?xxxx_posts=sosa

Font Awesome

链接：

http://fortawesome.github.io/Font-Awesome/

fa 类型的icon

Raphaël Icon-Set

链接：

http://icons.marekventur.com/

IcoMoon

链接：

https://icomoon.io/#toDownload

Typicons

链接：

http://typicons.com/

Entypo

链接：

http://www.entypo.com/

Heydings Icons

链接：

http://www.heydonworks.com/article/a-free-icon-web-font

JustVector Social Icons Font

链接：

http://blog.martianwabbit.com/post/4344642365.html

Modern Pictograms

链接：

http://thedesignoffice.org/project/modern-pictograms

Signify Lite

链接：

http://medialoot.com/item/signify-free-icon-font/

Web Symbols typeface

链接：

http://www.justbenice.ru/studio/websymbols/

Social Media Icons

链接：

http://fontfabric.com/social-media-icons-pack/

 ikoo

链接：

http://fontstruct.com/fontstructions/show/352362