如何在HTML中使用图标字体

主要特性

使用icon font来生成图标相对于基于图片的图标来说，有如下的好处：

1.自由的变化大小

2.自由的修改颜色

3.添加阴影效果

4.IE6也可以支持

5.支持图片图标的其它属性，例如，透明度和旋转等等

6.可以添加text-stroke和background-clip:text等属性，只要浏览器支持

如何使用？

文字修饰：

<h3>

<span aria-hidden="true" data-icon="⇝"></span>

Stats

</h3>

[data-icon]:before {

font-family: icons/* BYO icon font, mapped smartly */

content: attr(data-icon)

speak: none/* Not to be trusted, but hey. */

}

单独图标：

<a href="#" class="icon-alone">

<span aria-hidden="true" data-icon="▨"></span>

<span class="screen-reader-text">RSS</span>

</a>

/* Same CSS as above, plus */

.icon-alone {

display: inline-block/* Chrome 19 was weird with clickability without this */

}

.screen-reader-text { /* Reusable, toolbox kind of class */

position: absolute

top: -9999px

left: -9999px

}

创建你自己的icon font - IcoMoon

如果大家需要创建自己的iconfont，推荐使用iconmoon，使用它你可以通过上传SVG或者字体来生成你需要的icon字体，本文在线演示使用iconmoon生成。

步骤1：选择他们提供的或者上传自己的

步骤2：

请大家访问在线演示查看效果。希望大家喜欢Icon字体。如果大家觉得图标不够光滑的话，可以考虑使用cufon做处理，这样生成的图标更加美观。

FontAwesome为TwitterBootstrap提供了一种独一无二的图像字体.它还提供了CSS的很强的扩展性.CSS提供了一种描述HTML的机制，可以让你自由的设计网页。你能给FontAwesome加上各种各样的参数来满足你的需求，比如说改变字体，字体大小，图标颜色，阴影等等。FontAwesome诱人的特性FontAwesome只为Boostrap设计，BootStrap是一个前端开发的工具，可以帮助我们在线开发响应式和移动项目。即使你拥有不同的网页设计技能，你也能快速使用FontAwesome设计出富有创造性的图标.即使用单一的字体，你也可以创建369不同风格的图标，这一点很像象形语言.FontAwesome现在的版本是4.0.0.兼容性问题不是问题，因为它不依赖JavaScript.定制过程的过程只涉及以直观的方式使用CSS。其可扩展矢量允许你更改图标的大小，以适应任何设计，让你的标志性设计看起来更加吸引人。FontAwesome能很容易的转换为PNG文件.这种文件格式支持无损数据压缩，它使用的PNG文件扩展名或为多用途Internet邮件扩展（MIME）的图像/png格式的媒体类型.使用PNG以全彩色非调色为基础，并支持灰度图像。PNG是一个被广泛使用的网页设计师最常用的无损图像压缩格式。因为在CSS中iconicfont可以使用，你需要将FontAwesome按一下步骤转换为PNG文件:方法一:Step1.从FontAwesomewebsite.下载FontAwesome程序。Step2.从Github上下载theFontAwesomeTTFFile.Step3.保存FontAwesome使用文档。

Font Awesome 是一套专门为 Twitter Boostrap 设计的图标字体库。这标字体集几乎囊括了网页中可能用到的所有图标，除了包含 Twitter Boostrap 的默认图标外，还有社交收集图标、Web 应用法度图标和编辑器图标等等，可以免费用于贸易项目。

下面仅记录应用步调：

1.到官网高低载最新版本的Font Awesome.

2.解压文件，将此中的css和fonts文件夹拷贝到项目中，此中css文件夹中有两个css文件（font-awesome.css和font-awesome.min.css），fonts下有有5个，如下：

3.在须要应用的html或者其它类型的页面中引入样式文件，如下：

<link href="css/font-awesome.css" rel="stylesheet" />

4.查看font-awesome.css文件，若是引用的是紧缩版的，就要查看那个文件了，打开文件看到第一个样式定义如下：

＠font-face {

font-family: ""FontAwesome""

src: url（""../fonts/fontawesome-webfont.eot？v=4.1.0""）

src: url（""../fonts/fontawesome-webfont.eot？＃iefix&v=4.1.0""） format（""embedded-opentype""）， url（""../fonts/fontawesome-webfont.woff？v=4.1.0""） format（""woff""）， url（""../fonts/fontawesome-webfont.ttf？v=4.1.0""） format（""truetype""）， url（""../fonts/fontawesome-webfont.svg？v=4.1.0＃fontawesomeregular""） format（""svg""）

font-weight: normal

font-style: normal

}

必然重视此中的src:url（）中的路径是不是当前与当前项目标实际路径向匹配。

4.最后在页面中参加响应的html元素，并且遵守font awesome定义好的样式为须要添加矢量图标的元素指定样式。：

<div class="list-group">

<a class="list-group-item" href="＃"><i class="fa fa-home fa-fw"></i> Home</a>

<a class="list-group-item" href="＃"><i class="fa fa-book fa-fw"></i> Library</a>

<a class="list-group-item" href="＃"><i class="fa fa-pencil fa-fw"></i> Applications</a>

<a class="list-group-item" href="＃"><i class="fa fa-cog fa-fw"></i> Settings</a>

</div>

<i class="fa fa-spinner fa-spin"></i>

<i class="fa fa-circle-o-notch fa-spin"></i>

<i class="fa fa-refresh fa-spin"></i>

<i class="fa fa-cog fa-spin"></i>

<i class="fa fa-car"></i>

<i class="fa fa-car fa-3x"></i>

别的，font awesome 和BootStrap连络可以达到更好的结果。

---