HTML5中引入icon字体需通过加载CSS文件，再用或加类名渲染；不可用加载字体文件。常见问题包括路径错误、类名不匹配、字体未加载或CSS冲突，应检查Network面板和Computed样式。

怎么在HTML5里引入icon字体（如Font Awesome、iconfont）

直接用 <link> 引入CDN或本地CSS文件，再用 <i></i> 或 <span></span> 加类名渲染图标。别写成 <img src="xxx.ttf" alt="HTML5怎样插入icon字体图_HTML5插入icon字体图技巧【符号】" >——字体文件不是图片，不能这样加载。

• CDN方式最简单：

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">

• 本地部署需确保 woff2 / woff 文件路径正确，且CSS中 @font-face 的 src 指向无误
• 使用时类名必须和字体库文档一致，比如 Font Awesome 6 的 fa-solid fa-home，旧版可能是 fa-home，混用会不显示

为什么图标不显示？常见原因和检查点

多数是路径、类名、字体加载顺序或CSS冲突导致，不是HTML5本身限制。

• Network 面板查看 .woff2 文件是否返回 404 或 403 ——本地路径错或服务器未配置字体MIME类型
• 浏览器开发者工具的 Computed 标签页里，检查元素是否应用了 font-family（如 "Font Awesome 6 Free"），且 content 伪元素值存在（如 \f015）
• 避免在 <i></i> 上直接写文字内容，它会被字体图标的 Unicode 覆盖；需要文字+图标时，用 <span></span> 包文字，图标单独放

用 CSS 的 ::before 自定义 icon 字体更可控

比依赖第三方类名更灵活，适合定制化项目或减少CSS体积。

Android Control

通过命令行工具（uiautomator、screencap、input、am）控制安卓设备。优先尝试非 root 执行，失败后自动回退至 root...

下载

• 先定义自己的 @font-face：

  @font-face {
    font-family: 'MyIcon';
    src: url('icons.woff2') format('woff2');
    font-display: block;
  }

• 再为具体符号写规则：

  .icon-home::before {
    font-family: 'MyIcon';
    content: '\e900'; /* Unicode码点，从字体生成工具里复制 */
  }

• 注意：content 中的 \e900 是十六进制Unicode，不是十进制；如果用的是SVG字体或symbol引用，这套不适用

HTML5里要不要加 <meta name="viewport"> 才能显示icon字体

不需要。<meta name="viewport"> 影响页面缩放和布局，和字体渲染无关。但移动端若未设置，小图标可能因缩放被压缩变形，看起来像“没显示”。

立即学习“前端免费学习笔记（深入）”；

• 真正影响图标清晰度的是 font-size 和 line-height 是否合理，建议显式设置：

  .icon { font-size: 16px; line-height: 1; }

• 部分老Android WebView对 font-display: swap 支持差，首屏可能闪动或空白，可改用 block 或去掉该声明
• 不要用 transform: scale() 放大图标——会模糊；优先调 font-size

字体图标的本质是字符，不是图像。容易忽略的是：它的可访问性（a11y）默认为零，屏幕阅读器读不出含义。加 aria-label 或 aria-hidden="true" 是上线前必须补的一步。