本文介绍了一系列免费图标字体资源及其使用方法，包括在线制作平台、图标字体的优势及如何解决浏览器下的显示问题。
对于图标字体，网页设计师以及UI设计师应该都不会陌生。什么是图标字体？图标字体也称之为符号字体，是一种包含符号和字形（如箭头、文件夹、放大镜等）的字体文件，通常被认定为网站用户界面设计专用字形。图标字体就像其他网站字体一样，以设计排版规则在网站浏览器上显示的图标。使用图标字体能我们带来很多方便，比如在移动设备、Retina屏幕效果展示…
对于图标字体，网页设计师以及UI设计师应该都不会陌生。什么是图标字体？图标字体也称之为符号字体，是一种包含符号和字形（如箭头、文件夹、放大镜等）的字体文件，通常被认定为网站用户界面设计专用字形。图标字体就像其他网站字体一样，以设计排版规则在网站浏览器上显示的图标。使用图标字体能我们带来很多方便，比如在移动设备、Retina屏幕效果展示、兼容IE6/7浏览器以及能任意将图标放大缩小等，这些都是很不错的。今天给大家分享一组超全的免费图标字体，这些免费图标字体可以完美的运用在你的界面设计中，可以让你更快捷的设计出更精彩的界面。
现在不少网站一般都采用图片图标来给一些按钮、标签、菜单、标题前添加一些好看对应的图标，这样可以让网页显得美观活泼，但美化的同时需要载入图标图片，这会影响网站的速度。而为网站使用图标字体来显示那些美化的图标就不会有太大的影响。
为网页添加字体图标，有很多好处，比如说：
- 替代了原来的图片图标，缩减了文件大小。
- 引用图片次数减少，减少了http请求，提高了网页速度。
- 可以用css自由改变图标颜色，大小等属性，很方便。
- 缩放屏幕的话，图标还是依旧清晰。
- 有很大的跨浏览器支持（即使IE6，也能支持这种规则）
- 在用户调整他们的网页浏览器设置的时候可以自动缩放
- 能体现字体和文本有关的属性（如文本阴影与梯度）
让我们一起来分享这些的免费的图标字体吧。
IcoMoon，在线制作图标字体网站。
icoMoon的字体定制方法：
打开icoMoon APP字体定制页面，然后你会看到几百个常用图标，这里不建议全选，选几个你需要的就可以了，然后点击底部的“Generate Font”按钮 –> 点击“Download”即可下载字体。
图标字体使用方法
下载完字体后，把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的属性哦~~
<a href="#" rel="nofollow" ><span data-icon="?" aria-hidden="true"></span>帮助</a>
2.使用Class类
<span aria-hidden="true" class="icon-help"></span>
Fontello 在线制作图标字体网站，内置了大量图标资源。
阿里妈妈MUX推出的在线图标字体制作平台：iconfont
Heydings Controls (App Icon Font)
Dashicons – The Official WordPress Admin Icon Font (197 Icons)
Stroke 7 – An iOS7 Inspired Thin Stroke Icon Font (170 Icons)
The Elegant Icon Font (360 Icons)
Elegant Icon Font Download Page →
Dripicons – A Completely Free, Vector Line-Icon Font (95 Icons)
Metrize Icons – A Metro-Style Icon Font (300 Icons)
Icon Pack – A Line-Styled Icon Font from Petras Nargela (40 Icons)
Line-Styled Icon Pack Download Page →
Genericons – An Icon Font from WordPress (123 Icons)
Open Iconic – A Highly Legible Icon Font (218 Icons)
Linecons Free – A Free Line-Styled Icon Font (48 Icons)
Outlined Icons by Dario Ferrando (150 Icons)
Outlined Icons Download Page →
Feather Icon Set – A Beautifully Simple Icon Font (130 Icons)
Feather Icon Set Download Page →
The Icony Icon Font (100 Icons)
Icon Shock Icon Font (1286 Icons)
Icon Shock Font Download Page →
Stackicons Social Icon Font (75 Icons)
Stackicons Social Download Page →
Socialicious – A Social Media Icon Library (58 Icons)
Weather Icon Font – A Weather Themed Icon Font (92 Icons)
Weather Icon Font Download Page →
=============================================================
网络上除了有很多漂亮的免费图标字体，也有部分图标字体是需要付费的，例如Glyphicons。Glyphicons字体对于使用Bootstrap框架的人来说再熟悉不过了，Glyphicons Halflings 一般是收费的，但是他们的作者却允许 Bootstrap 免费使用。
Glyphicons Halflings图标字体使用方法
1、从Bootstrap官网下载源码，里面含有Glyphicons字体的两个主要文件fonts文件夹和css。
2、fonts文件夹可以直接复制出来，而css需要从bootstrap.css中找到Glyphicons字体的部分复制出来。
3、复制安装包里面的fonts文件夹和css文件至自己网站所使用主题的目录下。
4、引用css文件，方法和引用主题的style.css一样，打开主题的header.php模板，在<head>与</head>之间输入如下代码：
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('template_directory'); ?>/css/Glyphicons.min.css" rel="nofollow" />
当然，你也可以直接把里面的css直接复制粘贴到主题的style.css中合成一个css。
5、最后就可以调用字体图标了，使用时先参照官网的图标和代码对照页面 (或者这里可以)，然后输入相应的代码即可。举例：
<span class="glyphicon glyphicon-home"></span> 首页
其中的glyphicon glyphicon-home就是home 这个图标的坐标代码，这些代码可以在上面的链接页面找到。
你还可以自由定制Glyphicons Halflings字体的大小以及颜色
=============================================================
免费图标字体，有很多人还特别中意Font Awesome，Font Awesome包含了大量的图标资源。
- 只需一种字体，同时拥有将近500个图标
- 无需JavaScript：Font Awesome不依赖于JS,同时中文版奥森提供了IE7+以上兼容性解决方案
- 可无限放大缩小：使用和普通字体一样自由便捷,可任意缩放
- 完全免费：完全免费，可以用于商业用途， SIL OFL 1.1 协议
- CSS可控性：通过CSS可以任意控制所有图标的大小 ，颜色，阴影。
- 完全兼容视网膜屏：由于fontawesome是矢量字体，可以完全兼容视网膜屏
- 良好兼容性：能和Bootstrap等常用UI框架一起使用，奥森（Font Awesome中文）兼容IE7+
- 桌面应用：可以用于桌面应用中
- 兼容屏幕阅读器：不像其它字体那样， 它可以兼容屏幕阅读器。
Font Awesome 图标字体使用方法
- 下载Font Awesome最新字体包，并把字体文件放置到你的项目中。
- 打开你的项目中的 font-awesome.min.css 文件并编辑字体路径指向正确的位置（字体路径是相对于你的 CSS 目录的）。
- 在html文档中的
<head>部分，引入 font-awesome.min.css 文件。
<link rel="stylesheet" href="../css/font-awesome.min.css" rel="nofollow" >
如果需要支持 IE7 浏览器？那再引入IE7支持css
<!--[if IE 7]>
<link rel="stylesheet" href="../css/font-awesome-ie7.min.css" rel="nofollow" >
<![endif]-->
=============================================================
图标字体中使用原创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里，否则容易变形。
图标字体在chrome浏览器下被加粗的解决办法
有些icon font字体图标可能在制作的过程中出现了半个像素的问题，在浏览器下就被显示称为一个像素，造成了加粗的现象。解决这个问题的办法就是使用-webkit-font-smoothing属性。
CSS代码为：.iconfont{-webkit-font-smoothing: antialiased;}
图标字体在chrome浏览器下放大出现锯齿的解决办法
CSS代码为：.iconfont{-webkit-text-stroke-width: 0.2px;}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
