在公司项目或者个人建站时经常会有这么一个需求，就是在网站的底部以图标的形式加入自己的某些常用社交联系方式，比如QQ、微信、微博、Twitter等等，如果采用传统切图的方式去制作这些图标会有两个缺点：
1.前端工程师有可能不懂美工切图的相关技术，而有些小公司又没有美工这个职位，这样自己找素材就会十分麻烦
2.传统图片没法灵活地调整尺寸，比如当图片放大后里面的内容就会变得很模糊，无法适应比较复杂的需求
使用font awesome这套开源图标库就能很好解决以上两个问题。
使用font awesome的具体步骤：
1.到官网下载相关压缩包
2.解压后得到四个文件夹，把css文件夹中的font-awesome.css引入到你的项目css目录下。
还有一点十分重要！一定要把font文件夹放到你项目css文件夹的同级目录下，否则到时不会正确显示图标，网上很多教程都没提到这点
3.在你的html文件中引入font-awesome.css就可以直接使用了
测试：
在html随意位置添加：
1 <span class="fa fa-qq"></span>
页面会正常显示出一个qq图标，说明font awesome正常工作
你还能添加相关的类，比如fa-qq-lg增大图标的尺寸，相关方法可以去官网上看具体文档