簡介

什么是圖標字體？

圖標字體不同于標準的字體數字的字符，是一種包含符號和字形（如箭頭、文件夾、放大鏡）的字體文件。

例如：

圖標字體的使用就像和使用網頁字體一樣，個人理解就是把一些圖標以字體的形式保存在一個字體文件里面，然后再以調用字體的方式來使用。具體使用方法詳情可以去看看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

總結

以上是生活随笔為你收集整理的icon图标库的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。