簡(jiǎn)介

什么是圖標(biāo)字體？

圖標(biāo)字體不同于標(biāo)準(zhǔn)的字體數(shù)字的字符，是一種包含符號(hào)和字形（如箭頭、文件夾、放大鏡）的字體文件。

例如：

圖標(biāo)字體的使用就像和使用網(wǎng)頁(yè)字體一樣，個(gè)人理解就是把一些圖標(biāo)以字體的形式保存在一個(gè)字體文件里面，然后再以調(diào)用字體的方式來(lái)使用。具體使用方法詳情可以去看看css中的@font-face的用法，在這里就不詳細(xì)解釋了。

免費(fèi)圖標(biāo)字體可以完美的運(yùn)用在你的界面設(shè)計(jì)中，可以讓你更快捷的設(shè)計(jì)出更精彩的界面。

很多UI框架都提供了 圖標(biāo)的直接 引用

比如bootstrap。

使用方法

圖標(biāo)字體目前基本上有兩種方式。

一種是引用框架js或者字體庫(kù)，然后讓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>

第二種是選中我們需要的圖標(biāo)生成我們自己的字體庫(kù)，然后下載到本地，引用后，直接使用編號(hào)

ps：有一些網(wǎng)站只能下載到svg格式的文件，這些文件的使用方法也是第二種，需要到另外的網(wǎng)站上上傳制作 字體庫(kù)。

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

選中完后會(huì)生成編碼，要記住哪些編碼對(duì)應(yīng)哪些圖標(biāo)

在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>

圖標(biāo)庫(kù)收集

下面就列舉可以制作或者可以下載svg文件的網(wǎng)站：

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 類(lèi)型的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

總結(jié)

以上是生活随笔為你收集整理的icon图标库的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。