font-awesome 原理分析

1、使用  font-awesome ：

      a、导入  font-awesome.css

      b、将该插件目录下font目录拷贝到项目下，需要放在font-awesome.css所属目录的父目录（原因后面分析）

      

      

      具体使用哪个图标  查看官方提供的code即可

     显示效果如下：            

     

   

    2、原理分析

    这是  font-awesome.css  文件中主要片段

    

   

    @font-face 应用自定义字体，具体百度下用法、url出现多次是保证浏览器兼容性，同时这里能看到为什么font目录要放在css文件的所属目录的父目录下

    这里我们用   fontawesome-webfont.ttf  来说明

    content :"\f18b" 在ttf文件中能找到相应的代码，ttf编辑工具及code（f18b）都能在下图能看到

   

    

   

    3、自己制作属于自己的图标

    

    test.ttf文件增加一个图标字体  unicode（f001）

     

   浏览器效果（chrome版本 47.0.2526.106 m）：