字体附近的小三角图标的制作方法，字体图标的使用

问题转化：如何做一个字体图标

1. 使用after伪元素

   1. 位置：在需要加图标的li后面
   2. 统一类名arrow-icon
   3. 转义出对应的字体图标

2. 声明字体图标

   1. www.iconfont.cn阿里巴巴矢量图标库官网

   2. 选择想要的字体图标添加到项目中

   3. 下载到本地解压缩到项目文件夹

      

   4. 进入demo_index.html 按照其操作进行引入字体图标

   5. 使用Unicode的方法，但是注意将url加一下字体图标文件夹的相对路径

   6. 

   7. 打开iconfont.css

   8. 

   9. 字体图标的样式，例如改一下颜色，就在arrow-icon的类选择器加color:red;

   10. 在伪元素选择器中的content输入上方的content

   

3. 伪元素也是一个行内元素，content的内容相当于在盒子中间写的内容，但也不完全一样

   1. 如果用i或者span标签则需要用demo中提示的代码

   2. 

   3. 

4. 字体图标的优势

   1. 轻量：马上渲染
   2. 清晰度高
   3. 灵活：在类选择器中随意修改样式
   4. 兼容性高，网页字体总得支持吧

5. 字体图标的劣势（感觉能接受）

   1. 创作字体图标费时间，只能偷阿里图标库有的
   2. 只能渲染成单色或者CSS3的渐变色

6. 伪元素选择器的作用

   1. 帮助我们用CSS创建标签，简化HTML结构
   2. 字体图标小三角
   3. 清除浮动