1、使用@font-face和字符编码

（1）将iconfont.css文件中的@font-face和.iconfont引入需要使用的文件中

（2）查看并修改@font-face中url，确保资源可以被正确加载（1.html和fonts在同级目录下）

（3）使用

1）在伪类中使用

①确定编码

②在伪类中的content中使用

2）在标签中使用

①确定编码

②在标签中添加iconfont类，在标签内容中写入编码

（4）好处

      1）灵活：可以使用任何文本编辑器来编辑和更新图标

        2）只需将字体文件添加到项目中，并在CSS中定义@font-face规则

        3）可以通过添加新的字符到字体文件来扩展图标集

        4）当字体文件被缓存后页面加载会更快

（5）使用场景

        1）需要大量的图标，并希望能够通过简单的文本编码引用

        2）希望图标能够像文本一样被复制、搜索和选择时

2、使用类名和Iconfont的CSS文件

（1）在使用的页面引入iconfont.css 文件

（2）使用

1）选择其中一个编码的类名

2）给需要的标签添加iconfont和icon-cangshu类

（3）好处

        1）通过给元素添加类名来引用图标，直观和简单

        2）Iconfont平台通常会提供CSS文件（其中包含所有图标的类名和相应的字体设置）

        3）图标集更新时，只需替换CSS和字体文件

（4）使用场景

        1）使用预定义的图标集，并且不手动管理字符编码

        2）图标具有一致的样式和大小，并且能够通过CSS调整

3、使用SVG和Iconfont的JavaScript文件（支持有颜色的图标使用）

（1）引入iconfont.js文件

（2）使用（通过use使用）

（svg的icon类不是必须的）

（3）好处

        1）SVG图标在任何尺寸下都能保持清晰，可以添加动画、点击事件等交互效果，不依赖于外部字体文件，减少了加载时间

        2）可以通过CSS直接控制SVG图标的颜色

（4）使用场景

        1）需要高分辨率的图标，并且在不同的屏幕尺寸下都能保持清晰时

        2）图标具有复杂的样式（如渐变、阴影等）时

        3）图标能够具有交互性（如点击事件、动画等）时