在参考（copy）别人网站设计的时候发现了：Font Awesome

在做项目前端的时候，要实现显示博文，但要怎样设计没个好的想法

于是就百度找别人的博客进行参考，发现了一个很合心意的设计

其中博文的时间和标签前有个小图标，当时我在想这应该是个img标签里放了个小图标。

 

结果在copy的时候发现了，这个效果是用：：before伪类里添加content: " \f02c";来实现的...

很懵这个\f02c是什么玩意？

百度了一下：https://zhidao.baidu.com/question/1639884906094172020.html

发现大概是一个字体被设计成图标的样子，使用这个字其实就相当于使用一个图标。

这就厉害了，这样网站中经常使用到的小图标岂不是无需使用图片就可以实现了？直接用这种图标文字就行了。

 

于是乎兴冲冲的复制了before里的样式，当然font-family: FontAwesome;这个也没放过。

但是立马就出问题了，页面中没有给我显示出正常的图标，显示的是一个白框框。

 

我知道大概是使用姿势不对，于是乎继续百度，发现原来是Font Awesome这么个东西。

进到中文网：http://www.fontawesome.com.cn/，按照说明下载了Font Awesome，发现是一个文件夹，里面又是CSS、又是字体的。

哇，我只想用两个小图标而已，使用起来那么麻烦吗？好像还需要给项目里引用CSS才行，我已萌生退意...

 

不过想到之前看的一个文章说，如果不用Font Awesome的类，直接用小图标的话引入一个字体文件就行了。

于是乎在中文网那里看了看，用CND的方式，在项目head里引入一个js文件就可以使用了

http://www.fontawesome.com.cn/get-started/

 

自此效果终于实现了，而我也很困了，sleep