30个免费网页图标字体以及使用方法

今天药忘吃喽~ 2022-08-07 01:34 203阅读 0赞

**文章来源：[http://sc.chinaz.com/info/130228237055.htm][http_sc.chinaz.com_info_130228237055.htm] 设计达人**

**版权:** Free for personal or commercial projects

[查看&下载字体 →][Link 1]

图标整理自：[http://speckyboy.com/2013/02/20/free-icon-font-sets/][http_speckyboy.com_2013_02_20_free-icon-font-sets]

在网页设计中使用图标字体（icon font）是件挺有新意的事情，使用图标字体能我们带来了一定的方便，比如在移动设备、Retina屏幕效果展示、兼容IE6/7浏览器以及能任意将图标放大缩小等，这些都是很不错的。下面为大家简单介绍下利用icomoon来实现网页字体和分享**30个免费网页图标字体**。

![使用icomoon定制网页字体][icomoon]

流行的在线字体定制网站有[Fontello][]和[icomoon][icomoon 1]，这两个在线工具都很不错的，内置的图标也非常的多，当然在我今天分享的文章中的图标字体更多更实用更好哦^.^ 接下来我主要讲讲icoMoon的字体定制方法：

打开[icoMoon APP][]字体定制页面，然后你会看到几百个常用图标，这里不建议全选，选几个你需要的就可以了，然后点击底部的“Font”按钮 –> 点击“Download”即可下载字体。

![select-your-icon][]

### 字体使用 ###

下载完字体后，把Demo文件里面的style.css文件内容复制至你的CSS文件上。

@font-face {
    	font-family: 'shejidaren';
    	src:url('fonts/shejidaren.eot');
    	src:url('fonts/shejidaren.eot?#iefix') format('embedded-opentype'),
    		url('fonts/shejidaren.woff') format('woff'),
    		url('fonts/shejidaren.ttf') format('truetype'),
    		url('fonts/shejidaren.svg#shejidaren') format('svg');
    	font-weight: normal;
    	font-style: normal;
    }
    
    ...省略了啦

HTML代码，有两个调用方法，而且两个都很简单：

1.使用data-icon=”?”,这个是HTML5的属性哦~~

2.使用Class类

### 使用原创Icon方法 ###

也许有些同学喜欢自己原创，当然也是可以滴，准备工具：Fontlab、Adobe Illustrator。

1. Fontlab:  
直接在Fontlab上制作图标字体，完成后点击Fire(文件) –> Export(导出) –> EPS格式。

2. AI:  
打开刚刚导出的EPS，另存为SVG格式。

3.iconMoon APP  
在icoMoon APP页面点击import Icons按钮，支持多选，然后按上文的方法下载使用即可！

Tips: Fontlab和AI这两个工具的路径是可以相互复制的哦，所以我们用AI来制作ICON方便一些，制作完再复制到Fontlab上，需要注意的是在AI里面的路径画大一点再复制到Fontlab里，否则容易变形。

**让网页图标字体兼容IE6/7的浏览器**

下载的压缩包有一个lte-ie7.js文件，内嵌至网页内即可。

## 30个免费网页图标字体下载 ##

接下来一起看看免费开源的图标字体，各种各样的像素图标，我想一定有你需要的。

### [Elusive Icons][] ###

[![2013022810381760.jpg][]][Elusive Icons]

**图标数量:** 271  
**版权:** SIL – Open Font Licence

[查看&下载字体 →][Elusive Icons]

### [MFG Labs Web Icon Set][] ###

[![2013022810381721.jpg][]][MFG Labs Web Icon Set]

**图标数量:** 120  
**版权:** MIT Licence

[查看&下载字体 →][MFG Labs Web Icon Set]

### [Font Awesome][] ###

[![2013022810381882.jpg][]][Font Awesome]

**图标数量:  
版权:** SIL Open Font License

[查看&下载字体 →][Font Awesome]

### [Foundation Icons][] ###

[![2013022810381936.jpg][]][Foundation Icons]

**图标数量:** 140  
**版权:** MIT Open Source License

[查看&下载字体 →][Foundation Icons]

### [Pictonic Icons][] ###

[![2013022810381954.jpg][]][Pictonic Icons]

**图标数量:** 266  
**版权:** Free for personal or commercial projects

[查看&下载字体 →][Pictonic Icons]

### [Batch Icons][] ###

[![2013022810381831.jpg][]][Batch Icons]

**图标数量:** 300+  
**版权:** Free for personal or commercial projects

[查看&下载字体 →][Batch Icons]

### [IcoMoon Free Pack][] ###

[![2013022810381795.jpg][]][IcoMoon Free Pack]

**图标数量:** 450  
**版权:** CC License 3.0

[查看&下载字体 →][IcoMoon Free Pack]

### [Iconic Icon Set][] ###

[![2013022810381900.jpg][]][Iconic Icon Set]

**图标数量:** 171  
**版权:** Creative Commons Share Alike 3.0

[查看&下载字体 →][Iconic Icon Set]

### [Ligature Symbols][] ###

[![2013022810381865.jpg][]][Ligature Symbols]

**图标数量:** 250+  
**版权:** SIL Open Font License

[查看&下载字体 →][Ligature Symbols]

### [Entypo][] ###

[![2013022810381918.jpg][]][Entypo]

**图标数量:** 250  
**版权:** Creative Commons Share Alike 3.0

[查看&下载字体 →][Entypo]

### [OpenWeb Icons][] ###

[![2013022810382060.jpg][]][OpenWeb Icons]

**图标数量:** 54  
**版权:** SIL Open Font License (OFL)

[查看&下载字体 →][OpenWeb Icons]

### [Sosa Icon Font][] ###

[![2013022810382150.jpg][]][Sosa Icon Font]

**图标数量:** 120  
**版权:** Free for personal or commercial projects

[查看&下载字体 →][Sosa Icon Font]

### [Metro UI Web Font][] ###

[![2013022810382042.jpg][]][Metro UI Web Font]

**图标数量:** 333

[查看&下载字体 →][Metro UI Web Font]

### [One Div][] ###

[![2013022810382171.jpg][]][One Div]

**图标数量:** 91

[查看&下载字体 →][One Div]

### [Maki][] ###

[![2013022810382114.jpg][]][Maki]

**图标数量:** 73  
**版权:** BSD License

[Maki →][Maki]

### [PW Drawn Icon Font][] ###

[![2013022810382188.jpg][]][PW Drawn Icon Font]

**图标数量:** 80+  
**版权:** Free for personal or commercial use

[查看&下载字体 →][PW Drawn Icon Font]

### [Premium Pixels Mini Icons][] ###

[![2013022810382096.jpg][]][Premium Pixels Mini Icons]

**图标数量:** 80  
**版权:** Free for personal or commercial use

[查看&下载字体 →][Premium Pixels Mini Icons]

### [Fontelico Font][] ###

[![2013022810382132.jpg][]][Fontelico Font]

**图标数量:** 30  
**版权:** Creative Commons Share Alike 3.0

[查看&下载字体 →][Fontelico Font]

### [Typicons][] ###

[![2013022810381989.jpg][]][Typicons]

**图标数量:** 88  
**版权:** Free for personal or commercial use

[查看&下载字体 →][Typicons]

### [Modern Pictograms][] ###

[![2013022810382077.jpg][]][Modern Pictograms]

**图标数量**: 89  
**版权:** Open Font License (OFL)

[查看&下载字体 →][Modern Pictograms]

### [A Free Icon Web Font][] ###

[![2013022810382007.jpg][]][A Free Icon Web Font]

**图标数量**: 60  
**版权:** SIL Open Font License (OFL)

[查看&下载字体 →][A Free Icon Web Font]

### [Modern Pictograms][Modern Pictograms 1] ###

[![2013022810382365.jpg][]][Modern Pictograms 1]

**图标数量**: 92  
**版权:** SIL Open Font License (OFL)

[查看&下载字体 →][Modern Pictograms 1]

### [Symbol Signs][] ###

[![2013022810382348.jpg][]][Symbol Signs]

**图标数量**: 21

[查看&下载字体 →][Symbol Signs]

### [Web Symbols][] ###

[![2013022810382258.jpg][]][Web Symbols]

**图标数量**: 78  
**版权:** SIL Open Font License (OFL)

[查看&下载字体 →][Web Symbols]

### [Dot Com Font][] ###

[![2013022810382330.jpg][]][Dot Com Font]

**图标数量**: 93  
**版权:** Free for personal use

[查看&下载字体 →][Dot Com Font]

### [Social Media Icons][] ###

[![2013022810382312.jpg][]][Social Media Icons]

**图标数量:** 74  
**版权:** Free for personal or commercial projects.

[查看&下载字体 →][Social Media Icons]

### [Rondo – Social Icon Font][Rondo _ Social Icon Font] ###

[![2013022810382223.jpg][]][Rondo _ Social Icon Font]

**图标数量:** 40  
**版权:** Creative Commons Attribution-ShareAlike 3.0

[查看&下载字体 →][Rondo _ Social Icon Font]

### [JustVector Social Icons Font][] ###

[![2013022810382277.jpg][]][JustVector Social Icons Font]

**图标数量**: 30

[查看&下载字体 →][JustVector Social Icons Font]

### [Social Media Glyph Set][] ###

[![2013022810382206.jpg][]][Social Media Glyph Set]

**图标数量:** 30  
**版权:** Free for personal or commercial projects

[查看&下载字体 →][Social Media Glyph Set]

### [Meteocons][Link 1] ###

[![2013022810382295.jpg][]][Link 1]

**图标数量:** 40

[http_sc.chinaz.com_info_130228237055.htm]: http://sc.chinaz.com/info/130228237055.htm
[Link 1]: http://www.alessioatzeni.com/meteocons/
[http_speckyboy.com_2013_02_20_free-icon-font-sets]: http://speckyboy.com/2013/02/20/free-icon-font-sets/
[icomoon]: /images/20220805/b046a7e0b83b41e482c652a049aafd66.png
[Fontello]: http://fontello.com/
[icomoon 1]: http://icomoon.io/
[icoMoon APP]: http://icomoon.io/app/
[select-your-icon]: /images/20220805/f091e203d65948a19776f964edd52269.png
[Elusive Icons]: http://aristeides.com/elusive-iconfont/index.html
[2013022810381760.jpg]: /images/20220805/ea5f56a97d13427cb00377e0633c1c10.png
[MFG Labs Web Icon Set]: http://mfglabs.github.com/mfglabs-iconset/
[2013022810381721.jpg]: /images/20220805/5567adc1b4b1486a93e3682f62d845ca.png
[Font Awesome]: http://fortawesome.github.com/Font-Awesome/
[2013022810381882.jpg]: /images/20220805/9f1e921a4fd347adb1ab814be8f81983.png
[Foundation Icons]: http://www.zurb.com/playground/foundation-icons
[2013022810381936.jpg]: /images/20220805/ee833e29e4944a3895996bf0dc45ea3c.png
[Pictonic Icons]: https://pictonic.co/free
[2013022810381954.jpg]: /images/20220805/6c36a92eaec14cb9bc25e3ca75596f90.png
[Batch Icons]: http://adamwhitcroft.com/batch/
[2013022810381831.jpg]: /images/20220805/99e916decfd14f72b01ce2423b29b25a.png
[IcoMoon Free Pack]: http://icomoon.io/#preview-free
[2013022810381795.jpg]: /images/20220805/12c28749298545be840f372be0720e59.png
[Iconic Icon Set]: http://somerandomdude.com/work/iconic/
[2013022810381900.jpg]: /images/20220805/87fb683198f042ce9e03c7193b41475f.png
[Ligature Symbols]: http://kudakurage.com/ligature_symbols/
[2013022810381865.jpg]: /images/20220805/c3dd6747ccab4d39b17fdc0174592f7d.png
[Entypo]: http://www.entypo.com/
[2013022810381918.jpg]: /images/20220805/64539a5d9e574a87baaad9fcb910732d.png
[OpenWeb Icons]: http://pfefferle.github.com/openwebicons/
[2013022810382060.jpg]: /images/20220805/4fc751d7b31d48fc9c346fd78140f68c.png
[Sosa Icon Font]: http://www.tenbytwenty.com/sosa.php
[2013022810382150.jpg]: /images/20220805/106eeaf025f8441496c769290cabf6f6.png
[Metro UI Web Font]: http://metroui.org.ua/icons.php
[2013022810382042.jpg]: /images/20220805/ec3e6c0502834687be9e3bdd349bc354.png
[One Div]: http://one-div.com/
[2013022810382171.jpg]: /images/20220805/a4b30ccb60ef4f6a8b2ec1ae86e22380.png
[Maki]: http://mapbox.com/maki/
[2013022810382114.jpg]: /images/20220805/84fe0e034ef14640bd955d56319d4193.png
[PW Drawn Icon Font]: http://www.peax-webdesign.com/goodies/free-icons/icones-gratuites/icon-font.html
[2013022810382188.jpg]: /images/20220805/52c228c00e394226b748f5b06ef06ffb.png
[Premium Pixels Mini Icons]: http://www.premiumpixels.com/freebies/80-mini-icons-psd-icon-font/
[2013022810382096.jpg]: /images/20220805/fbc505d20db342d9a0605ea7bfb891d9.png
[Fontelico Font]: https://github.com/fontello/fontelico.font
[2013022810382132.jpg]: /images/20220805/d4b5f3b0a28a49a1958deeb27b24bba4.png
[Typicons]: http://typicons.com/
[2013022810381989.jpg]: /images/20220805/a64141ba37f54874855a1df3d4f0bf16.png
[Modern Pictograms]: http://thedesignoffice.org/project/modern-pictograms/
[2013022810382077.jpg]: /images/20220805/53f00eb606264deca9e6f00139015bf7.png
[A Free Icon Web Font]: http://www.heydonworks.com/a-free-icon-web-font
[2013022810382007.jpg]: /images/20220805/53f9d601c62e4d87b6782b946cdb499a.png
[Modern Pictograms 1]: http://www.fontsquirrel.com/fonts/modern-pictograms
[2013022810382365.jpg]: /images/20220805/4d1be1cc1c1c4abe89c80f833b71aab6.png
[Symbol Signs]: http://www.designworkplan.com/design/symbol-signs.htm
[2013022810382348.jpg]: /images/20220805/cd9f1f2f7f9d4dc398b034a69b88f7ec.png
[Web Symbols]: http://www.fontsquirrel.com/fonts/web-symbols
[2013022810382258.jpg]: /images/20220805/c1fe62bd1da6466d80ae90d1413eae8f.png
[Dot Com Font]: http://www.dafont.com/dotcom.font?fpp=50
[2013022810382330.jpg]: /images/20220805/73386d3acc6147c4b2be849c2398575c.png
[Social Media Icons]: http://fontfabric.com/social-media-icons-pack/
[2013022810382312.jpg]: /images/20220805/4383b519a62f4465b2831875aa489436.png
[Rondo _ Social Icon Font]: http://www.tajfa.com/projects/rondo/
[2013022810382223.jpg]: /images/20220805/d79a8673294c4756b0f2cf05c1858c53.png
[JustVector Social Icons Font]: http://blog.martianwabbit.com/post/4344642365/justvector-social-icons-font
[2013022810382277.jpg]: /images/20220805/36cd15c3328b49bfa388a25c00f59337.png
[Social Media Glyph Set]: http://pixelb.in/multi-format-social-media-glyph-set-243/
[2013022810382206.jpg]: /images/20220805/feb3857dda4d44afb29b7f836ba5e426.png
[2013022810382295.jpg]: /images/20220805/e63775799f314776b724c6fb4fbce0b1.png