字体图标引入方式，基本使用的方法

目录

通过本地下载字体图标包引入

第一种使用方式，Unicode方法，

第二种使用方式，直接使用类名

第三种使用方式，使用伪元素

---

通过本地下载字体图标包引入

在html中通过link引入iconfont.css文件

第一种使用方式，Unicode方法，

给标签的添加固定的class类名iconfont。然后再双标签内输入Unicode码

    
    
    
    
    
    


    
    
    
    
    

第二种使用方式，直接使用类名

在标签固定类名后面再添加字体图标的类名

第三种使用方式，使用伪元素

• 给标签设置字体图标固定类名，然后通过css设置该标签的伪元素内容来实现字体图标效果（可以查看字体图标的css文件设置方式）
• 字体图标文件

• @font-face {
    font-family: "iconfont"; /* Project id  */
    src: url('iconfont.ttf') format('truetype');
  }
  
  .iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  .icon-all:before {
    content: "\e6ef";
  }
  
  .icon-bussiness-man:before {
    content: "\e6f0";
  }
  
  .icon-add-cart:before {
    content: "\e742";
  }
  
  .icon-category:before {
    content: "\e747";
  }
  
  

• 伪元素content属性设置对应的图标