一、先说说引入时可能遇到的问题

• 引入之后看不见图标
• 引入之后图标显示为小方框

二、找原因

• 查看是否正确引入bootstrap/font-awesome的css文件
• Glyphicons 字体图标除需引入bootstrap的css文件外，还需引入fonts
• 引入的文件路径是否正确
• HTML界面引用图标的代码是否正确

三、解决办法

bootstrap的icon引入

bootstrap中有开源的Glyphicons 字体图标，可以拿来直接使用
包括250多个来自 Glyphicon Halflings 的字体图标。Glyphicons Halflings 一般是收费的，但是他们的作者允许 Bootstrap 免费使用。

只需两步：

1. 在HTML界面头部，引入boostrap的css文件（在bootstrap官网有下载）
2. 在需要的地方复制你需要的图标代码，如glyphicon什么的

<link rel="stylesheet" href="css/bootstrap.css">


<p>Made with <i class="glyphicon glyphicon-filter"></i> and <i class="glyphicon glyphicon-music"></i><br>by <a href="http://blog.csdn.net/baidu_38742725">yaling Wu</a>.</p>

---

font-awesome的icon引入

bootstrap中有开源的Glyphicons 字体图标，可以拿来直接使用
包括250多个来自 Glyphicon Halflings 的字体图标。Glyphicons Halflings 一般是收费的，但是他们的作者允许 Bootstrap 免费使用。

只需两步：

1. 在HTML界面头部，引入font-awesome的压缩后css文件（在font-awesome官网）有下载，或者去GitHub上下载
2. 在需要的地方复制你需要的图标代码，如fa什么的

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


<ul>
    <li><span class="fa fa-fw fa-linkedin"></span></li>
    <li><span class="fa fa-fw fa-github"></span></li>
    <li><span class="fa fa-fw fa-twitter"></span></li>
    <li><span class="fa fa-fw fa-flickr"></span></li>
</ul>

---

自己今天遇到过这些问题，折磨了我将近两小时，我的天呐，吓得我赶紧梳理了下，谨以此篇blog为同病相怜者送去良药~