[css] 如何使用Font Awesome

1. 官网下载Font Awesome旧版或最新版；http://www.fontawesome.com.cn/faicons/
3. 将CSS内的font-awesome文件放到自己的css文件夹中；



4. 将Fonts文件夹取出，同放到与CSS文件夹同级目录即可

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

4. css代码

@font-face {
    font-family: 'FontAwesome';
     src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
     src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
     font-weight: normal;
     font-style: normal;
   }

5. 然后，就可以在网页中插入你想要的图标了。

找到图标的名称

6. 在fontawesome文件夹里找到font-awesome.css并打开

可以看到，刚才要找的图标的编码为​​f2b9​​，此时就可以在html文件中直接使用这个字符了

@font-face {
  font-family: 'FontAwesome';
  src: url('../font/fontawesome-webfont.eot?v=4.7.0');
  src: url('../font/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

i::after {
  content: "\f00d";
  width: 9px;
  height: 9px;
  color: rgba(0, 0, 0, .45);
  font-family: FontAwesome;
}