html字体图标生成和下载（支持字体图标2089个和中文搜索）
本帖最后由 dada02 于 2026-1-15 11:34 编辑# html字体图标生成和下载（方便、快捷、实用）
## 【写在前面：有时为了找个合适图标，花费较多时间，刚好有个网络字体库fontAwesome，通过反复研究转码成功，可用来做图标，改改颜色，保存ico即可】
## 功能介绍
Font Awesome 图标，包括Solid（实心图标） Regular（常规图标） Brands（品牌图标）等
图标：常用字体图标500个，每页100个，因当前字体免费版本限制，个别可能显示为网络。（新版2089个）
搜索：支持中文搜索，为全部范围搜索。
尺寸：16×16、32×32、48×48、64×64、128×128、256×256
颜色：调色板选择颜色
预览：根据尺寸和颜色预览，备注：当前颜色、当前尺寸、当前颜色（如#e70d39）
保存：支持png、svg、ico格式，ico自动为透明背景色。
## 关键代码
```js
// 下载PNG
async function downloadPNG() {
const loadingIndicator = document.getElementById('loadingIndicator');
loadingIndicator.style.display = 'block';
try {
const canvas = await createIconCanvas(selectedSize);
// 创建下载链接
const link = document.createElement('a');
const iconName = selectedIcon.replace('fa-', '');
const chineseName = iconChineseNames || iconName;
link.download = `fontawesome-${chineseName}-${selectedSize}px.png`;
link.href = canvas.toDataURL('image/png');
link.click();
loadingIndicator.style.display = 'none';
} catch (error) {
console.error('生成PNG文件时出错:', error);
loadingIndicator.style.display = 'none';
alert('生成PNG文件时出错，请重试');
}
}
...
// 下载ICO
async function downloadICO() {
const loadingIndicator = document.getElementById('loadingIndicator');
loadingIndicator.style.display = 'block';
...
```
## 配套工具，内外兼修：
图PNG转ICO渐变处理工具
https://www.52pojie.cn/thread-2083865-1-1.html
(出处: 吾爱破解论坛)
## 附件：
html软件（含字体库），解压到文件夹，双击浏览器打开即可使用。
蓝奏云
https://wwavl.lanzouu.com/i1IZn3f7jdwf 密码:52pj 修正本机字体读取
https://wwavl.lanzouu.com/inWXE3fd097i 密码:52pj 字体图标500个，支持图标旋转
https://wwavl.lanzouu.com/inMe73g6a9fa 密码:52pj 字体图标2089个（含上传icon-families（中文）.json）可生成png和ico 修正导出界面预览角度问题
欢迎试用。
下载研究一下咋用，好不好用看疗效 vipcrack 发表于 2026-1-2 15:46
很好用，不知道是否能支持渐变色
以下渐变工具，请参考。原创贴子，发表有难度，不一定能过，随缘就好。
PNG转ICO渐变处理工具
https://www.52pojie.cn/thread-2083865-1-1.html
(出处: 吾爱破解论坛)
刚需呀，谢谢提供。。 很好用，不知道是否能支持渐变色 感谢 很不错 就是搜不到英文字母 库存好像有点少
刚需呀，谢谢提供。。 下载测试，确实好用，谢谢楼主分享！ 挺不错的，来用用！！！ 好东西，感谢大佬的分享
页:
[1]
2