如何在HTML中使用图标字体？

在做手机端Web项目中，经常会遇到小图标在手机上显示比较模糊的问题，有很多小的Icon（图标），如分享、回复、赞、返回、话题、访问、箭头等，这些Icon（图标）一般都是纯色的。经过实践发现了一种比较好的解决方案，图标字体化。

字体图标除了图像清晰度之外，比位图还有哪些优势呢? 1、轻量性：一个图标字体比一系列的图像（特别是在Retina屏中使用双倍图像）要小。一旦图标字体加载了，图标就会马上渲染出来，不需要下载一个图像。可以减少HTTP请求，还可以配合HTML5离线存储做性能优化。

2、灵活性：图标字体可以用过font-size属性设置其任何大小，还可以加各种文字效果，包括颜色、Hover状态、透明度、阴影和翻转等效果。可以在任何背景下显示。使用位图的话，必须得为每个不同大小和不同效果的图像输出一个不同文件。

3、兼容性：网页字体支持所有现代浏览器，包括IE低版本。

除了以上优势之外，当然也有劣势 1、图标字体只能被渲染成单色或者CSS3的渐变色，由于此限制使得它不能广泛使用。 2、使用版权上有限制，有好多字体是收费的。当然也有很多免费开源的精美字体图标供下载使用。 3、创作自已的字体图标很费时间，重构人员后期维护的成本偏高。

把字体目录下载到你的项目中，再引用它的css，以Font Awesome为例。

拷贝 Font Awesome 字体目录到你的项目中。
font-awesome.min.css 文件到你的项目中。
打开你的项目中的 font-awesome.min.css 文件并编辑字体路径指向正确的位置。

字体路径是相对于你的 CSS 目录的。
在html文档中的 <head> 部分，引入 font-awesome.min.css 文件。
1. <link rel="stylesheet" href="../css/bootstrap.min.css">
2. <link rel="stylesheet" href="../css/font-awesome.min.css">
在浏览器中打开页面，检查是否正确启用了 Font Awesome!