最简单插入五角星用Unicode字符★（U+2605），零依赖且兼容性好；空心用☆；CSS content用\2605转义；需自定义样式时用内联SVG并fill="currentColor"确保颜色继承。
用 Unicode 字符插入五角星最简单
直接在 HTML 文本里写 ★ 或 ★，浏览器会渲染成实心五角星 ★。这是零依赖、无样式冲突、兼容性最好的方式。
常见错误是复制粘贴了不可见的 BOM 或全角空格，导致页面里显示空白或乱码；建议手敲，或从可靠的 Unicode 表查编号（U+2605）。
-
★是十进制写法，★是十六进制写法，效果完全一样 - 想用空心五角星？换成
☆（☆），注意不是字体控制，而是不同字符 - 别用图片或 SVG 临时起意——除非你需要缩放、填色或动画，否则纯字符更快更稳
用 CSS content 插入适合图标场景
当五角星要作为伪元素出现在按钮、评分组件里，比如「已收藏」状态，用 ::before 配合 content 更可控。
容易踩的坑是忘记设置 display: inline-block 或父容器未定义 font-family，导致某些系统（如旧版 Windows + 中文字体） fallback 到不支持该字符的字体，显示成方框 □。
立即学习“前端免费学习笔记（深入）”；
- 推荐显式指定一个支持广泛的字体：
font-family: "Segoe UI", "Apple Color Emoji", "Noto Color Emoji", sans-serif; - 示例：
button.favor::before { content: "\2605"; margin-right: 4px; } -
\2605是 CSS 中的十六进制 Unicode 转义，必须用反斜杠开头，不能写成★
用 SVG 插入需要自定义颜色/大小/描边的场合
如果设计稿要求五角星是红色描边、1.5px 粗细、带阴影，Unicode 和 CSS content 都做不到——这时 SVG 是唯一可靠选择。
网页中拖动 DIV 是很常见的操作，今天就分享给大家一个 jQuery 多列网格拖动布局插件，和其它的插件不太一样的地方在于你处理拖放的元素支持不同大小，并且支持多列的网格布局，它们会自动的根据位置自己排序和调整。非常适合你开发具有创意的应用。这个插件可以帮助你将任何的 HTML 元素转换为网格组件
关键不是“怎么画五角星”，而是“怎么嵌入不破坏布局”。直接贴内联 SVG 最稳妥，避免外部请求和跨域问题。
- 别用
- 别把 SVG 写进 CSS background-image：无法继承文字颜色，维护困难
- 推荐内联写法：
- 用
fill="currentColor"可让 SVG 颜色随父元素color变化，省去 JS 控制
移动端 Safari 和旧 Android WebView 的兼容细节
Unicode 五角星在 iOS 12+ 和 Android 8+ 基本没问题，但 iOS 11 及更早版本对 ★ 的渲染可能偏小或模糊；而 SVG 在所有环境都一致。
真正容易被忽略的是：某些安卓定制 ROM（如华为 EMUI 4.x）默认禁用 emoji 字体，此时 ★ 会退化成方块，且无法通过 CSS 强制启用——这种情况下，SVG 是唯一兜底方案。
如果你的产品仍需支持 2017 年前的安卓机型，别省那几行 SVG 代码。
