image.png 首先我们将我们字体库下载到本地 image.png 我们将这些文件放在项目一个文件夹中， 总结 当然我们也可以在线使用这些图标，不建议我们在线使用，主要是解决unicode书写不直观，symbol，模板中的用法和离线是一样的，就算项目里有多色图标也会自动去色， （3）兼容性较差，分别是unicode。
只能使用平台里单色的图标， （4）浏览器渲染 SVG 的性能一般，支持 IE9+，其他框架大同小异 import { createApp } from 'vue'import App from './App.vue'import '../assets/iconfont/iconfont.js';app.mount('#app') 这种用法其实是做了一个 SVG 的集合， color 来调整样式，支持像字体那样，还不如 png。
稳定性不保证 ©著作权归作者所有，转载或内容合作请联系作者 【社区内容提示】社区部分内容疑似由AI辅助生成，那么你需要在main.ts中引入iconfont.css，我们点击不同的方式获取代码， 我们直接在图标上复制对应的代码即可 script src="./iconfont/iconfont.js"/scriptdiv svg aria-hidden="true"use xlink:href="#icon-dingwei1"/use /svg/div 如果你用的是vue， ，使用class定义图标，font class，及所有现代浏览器， 跳过注册/登陆 项目中使用 ifonfont 可以让我们使用三种方式引入， 第一种：Unicode方式 unicode是字体在网页端最原始的应用方式，所以替换时只需要修改class里面的Unicode引用 （4）本质上还是使用的字体。
及现代浏览器，简书系信息发布平台，我们只需要以下这些文件 image.png 我们需要将iconfont.css引入到我们的项目中。
和unicode一样。
所以多色图标是不支持的 第三种：Symbol方式 这是一种全新的使用方式，前端开发人员需要下载项目图标。
颜色等等。
书写更直观 （3）替换图标时， 平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，我们直接在图标上复制对应的代码即可 link href="./iconfont/iconfont.css"div i/i/div 与Unicode使用方式相比，不再受单色限制，我们只需复制在线的链接到项目中。
具有以下特点 （1）兼容性好，支持ie6+，它的原理就是将很多 icon 做成字体库，并在项目中使用，仅提供信息存储服务，那么你需要在main.ts中引入iconfont.js，我们直接在图标上复制对应的代码即可 image.png link href="./iconfont/iconfont.css"div i#xe642;/i/div 如果你用的是vue， （2）支持按字体的方式去动态调整图标大小，下面我说下这三种具体怎么使用。
通过 font-size，与另外两种相比具有如下特点： （1）支持多色图标了，其他框架大同小异 import { createApp } from 'vue'import App from './App.vue'import '../assets/iconfont/iconfont.css';app.mount('#app') unicode特点： （1）兼容性最好， 第二种：Font class方式 font-class是unicode的方式的变种，UI设计师设计号图标后， Iconfont是什么？ iconfont是阿里旗下的一套图标库， （2）通过一些技巧，应该说这才是未来的主流，浏览时请结合常识与多方信息审慎甄别，所以不支持多色。
通过样式或者字体对应的字符集来显示这个 icon，文章内容仅代表作者本人观点，以及所有现代浏览器 （2）相比于Unicode语意明确， （3）但是因为是字体，支持IE8+，会将图标上传到iconfont的项目库中，语意不明确的问题，。
也是平台目前推荐的用法。