CSS使用伪元素引入IconFont

在日常的开发中，我们一般都是使用类名的方式来引入iconfont，其实我们也可以使用伪元素来引入字体图标，并且更有助于我们html结构的清晰。

首先通过阿里巴巴矢量图标库，下载好所需素材，并导入编辑软件

 

引入素材库的iconfont.css文件，并给盒子加上类名，添加伪元素

​
 <i class="iconfont"></i>

 i::after {
            content: '';
        }

 接着在VScode中打开iconfont.css文件，把content中的内容添加到盒子的伪元素中即可

.icon-add-cart:before {
  content: "\e742";
}

 

 i::after {
            content: '\e742';
        }

这样就完成了使用伪元素来引入字体图标