Font Awesome 转 PNG

小写 Font Awesome 6 Free solid 图标 id,例如 house、star、gear

16 256 2048

常用图标

SVG 从 jsDelivr(Font Awesome Free)加载,栅格化在浏览器本地完成。

为什么移动端还需要成套 PNG 而不仅是 SVG?

路由 `fontawesome-icon-raster-png`(font_awesome_to_png.raster)服务仍要求位图素材的移动/Web 混合团队:旧版 WebView、邮件客户端或某些原生组件只认 PNG。关键是按设备密度成套输出,而不是单张拉伸。Font Awesome 的细线样式在小屏上可辨识度差,必要时换实心或加描边。与 SVG-in-app 并存时,要在文档里写清「何时用矢量、何时用栅格」,避免双份资源互相漂移。

移动端栅格图标导出流程

  1. 在 `fontawesome-icon-raster-png` 选择名称与样式,按 Android/iOS 密度表设定基准尺寸。
  2. 对 TabBar 与列表行分别导出,检查 1x 下是否仍可辨。
  3. 通过脚本写入 mipmap 或 xcassets 目录,并在 PR 里附视觉 diff。

Font Awesome 转 PNG(raster)问答

移动端多密度屏幕下,栅格 PNG 资源集应如何命名与归档?
仓库中保留 SVG 或字体源,PNG 仅作交付;README 写明版本与许可。
什么时候应继续用 SVG,而不是强行全量 PNG?
对同一图标输出多档 PNG(mdpi–xxxhdpi),在 CI 里校验文件名与哈希。
批量导出后如何防止错误图标混入生产包?
在样机截图上做 A/B,确认线宽在真实手机上仍可读。
已经导出 PNG,还需要在设计仓库保留 SVG 或字体源吗?
建议保留矢量源以便改色与多尺寸复用;PNG 只作交付物之一,并在 README 标注 Font Awesome 版本号。
Retina 屏上边缘发灰,是导出尺寸不足还是背景混合问题?
同时检查是否用足够倍率导出,以及是否在深色底上需要单独的反色 PNG;必要时加 1px 描边提升对比。
More versions