HTML5中插入带图标元素的五种常用方法：一、Font Awesome图标库；二、Google Fonts Icons；三、内联SVG；四、自定义图标字体@font-face；五、SVG Sprite复用。
如果您希望在HTML5文档中插入带图标的元素，通常需要借助外部图标库或内联SVG方式实现。以下是几种常用且兼容性良好的嵌入方法：
一、使用Font Awesome图标库
Font Awesome提供矢量图标字体，通过CSS类名即可调用图标，无需额外图片资源，支持缩放与样式控制。
1、在HTML文档的<head>标签内引入Font Awesome CDN链接：<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
2、在需要显示图标的位置添加带有标签和fa类名的HTML结构：<i class="fas fa-home"></i>
立即学习“前端免费学习笔记（深入）”；
3、可配合CSS设置图标大小、颜色等样式，例如：.fas { font-size: 24px; color: #333; }
二、使用Google Fonts Icons
Google Fonts Icons是免费开源的SVG图标集，以Web字体形式提供，加载轻量且自动适配高DPI屏幕。
1、在<head>中引入Google Icons CSS：<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet">
2、使用span标签调用图标，设置字体族为Material Symbols Outlined：<span class="material-symbols-outlined">home</span>
3、图标名称需使用小写连字符格式，如search、settings、account_circle，不加前缀、不带空格
三、内联SVG图标
直接将SVG代码嵌入HTML中，可完全控制路径、颜色、动画等属性，无网络依赖，适合关键UI图标。
1、复制所需图标的SVG源码（例如从https://heroicons.com或https://tabler-icons.io获取）
2、将SVG代码粘贴至HTML文档中任意位置，确保保留xmlns、viewBox等必要属性：<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path d="M12 2L2 7v10c0 5.55 3.84 9.74 9 11 5.16-1.26 9-5.45 9-11V7l-10-5z"/></svg>
3、可通过CSS修改fill属性改变图标颜色：svg { fill: #007bff; }
四、使用图标字体自定义@font-face
当需离线部署或统一管理图标字体时，可下载图标字体文件（如.ttf或.woff），通过@font-face注册后使用。
1、将图标字体文件放入项目fonts目录，例如fonts/iconfont.woff
2、在CSS中声明字体族：@font-face { font-family: 'MyIcon'; src: url('fonts/iconfont.woff') format('woff'); }
3、定义伪元素或专用类，绑定Unicode码点：.icon-home::before { content: "\e900"; font-family: "MyIcon"; }
五、通过SVG Sprite复用图标
将多个SVG图标合并为一个sprite文件，按ID引用，减少HTTP请求数，提升页面加载效率。
1、创建SVG sprite文件（如icons.svg），内部包含多个<symbol>元素，每个id唯一：<symbol id="arrow-left" viewBox="0 0 24 24"><path d="M15.41 7.41L14 6l-6 6 6-6zM10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/></symbol>
2、在HTML中通过<use>引用图标：<svg class="icon"><use href="icons.svg#arrow-left"></use></svg>
3、为<svg>设置width/height，并用CSS控制尺寸与对齐：.icon { width: 20px; height: 20px; vertical-align: middle; }
