在线运行工具中字体图标需用cdn或内联方案，禁用本地路径；阿里iconfont须用官方生成的web font链接并确保项目已发布；失效主因是跨域拦截、路径错误或未发布；排查优先看network中woff2是否200。
在线运行工具（如 CodePen、JSFiddle、CodeSandbox）里引入字体图标，**不能直接用本地路径或相对 URL**，因为这些环境不提供文件系统访问权限，url('./iconfont.woff2') 会 404。必须走纯 CDN 或内联方案。
为什么 <link href="iconfont.css"> 在线运行时经常失效
多数在线编辑器默认禁用跨域字体加载，即使你写了正确的 @font-face，浏览器仍可能拦截 .woff2 请求并报 Cross-Origin Request Blocked；更常见的是：你复制的 iconfont.css 里 url('iconfont.woff2') 指向的是本地路径，而在线环境根本不存在这个文件。
- CDN 提供的 CSS 文件必须自带可访问的字体地址（比如阿里 iconfont 的「Web Font」方案生成的链接）
- Font Awesome v6+ 的
all.cssCDN 地址是可行的，但fontawesome.min.css不含字体声明，会白屏 - 别用「Symbol」或「Unicode 直接粘贴」方式——在线工具不支持动态注入 SVG Sprite 或解析 Unicode 字符映射
推荐做法：用官方 Web Font CDN 链接 + 正确 class 写法
以阿里 iconfont 为例，必须在项目设置或 HTML 的 中插入它生成的「Web Font」完整链接，不是你自己拼的路径。
- 登录 iconfont.cn → 进入项目 → 点击「生成链接」→ 选「Web Font」→ 复制整个
<link href="https://at.alicdn.com/t/c/font_*.css">标签 - 确保该 CSS 文件里有完整的
@font-face块，且src中的url()是带协议的完整 CDN 地址（如url('https://at.alicdn.com/t/c/font_*.woff2')），不是相对路径 - HTML 中写
<i class="iconfont icon-home"></i>，不要漏掉iconfont这个基础类名——它是触发font-family: 'iconfont'的关键 - 如果图标还是空白，打开控制台 → Network → 过滤
font，确认 woff2 请求返回 200；若为 404，说明链接未发布或项目未「发布」（iconfont 要点击「生成」再「发布」才生效）
备用方案：把 @font-face 和 CSS 全部内联进
当 CDN 不稳定或跨域策略收紧时，最稳的方式是把整个 @font-face 声明和图标类全部转成 base64 内联进 <style></style>，彻底绕过外部请求。
- 下载 iconfont 的 Web Font 包，打开
iconfont.css，找到@font-face块 - 用在线工具（如 https://www.base64encode.org/）将
iconfont.woff2文件转成 base64 字符串 - 替换原
src中的url(...)为url('data:font/woff2;base64,...') - 把整段
@font-face和所有.icon-xxx:before规则粘贴进 HTML 的<style></style>标签里 - 这样就不再依赖任何外部资源，连离线都能跑
真正卡住人的从来不是 class 怎么写，而是字体文件是否被浏览器成功加载并信任——在线环境里，路径错一个斜杠、CDN 少一个 crossorigin 属性、iconfont 项目没点「发布」，都会让图标变成方块。先盯死 Network 面板里的字体请求状态，比反复改 HTML 有用得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
