工具 影音

工具

html字体图标生成和下载

更新时间: 2026-01-04      阅读 收藏
立即下载

html字体图标生成和下载(方便、快捷、实用)
【写在前面:有时为了找个合适图标,花费较多时间,刚好有个网络字体库fontAwesome,通过反复研究转码成功,可用来做图标,改改颜色,保存ico即可】
html字体图标生成和下载(图1) html字体图标生成和下载(图2)
功能介绍
图标:常用字体图标500个,每页100个,因当前字体免费版本限制,个别可能显示为网络。
搜索:支持中文搜索,为全部范围搜索。
尺寸:16×16、32×32、48×48、64×64、128×128、256×256
颜色:调色板选择颜色
预览:根据尺寸和颜色预览,备注:当前颜色、当前尺寸、当前颜色(如#e70d39)
保存:支持png、svg、ico格式,ico自动为透明背景色。
关键代码


  1.         // 下载PNG
  2.         async function downloadPNG() {
  3.             const loadingIndicator = document.getElementById('loadingIndicator');
  4.             loadingIndicator.style.display = 'block';
  5.  
  6.             try {
  7.                 const canvas = await createIconCanvas(selectedSize);
  8.  
  9.                 // 创建下载链接
  10.                 const link = document.createElement('a');
  11.                 const iconName = selectedIcon.replace('fa-', '');
  12.                 const chineseName = iconChineseNames[selectedIcon] || iconName;
  13.                 link.download = `fontawesome-${chineseName}-${selectedSize}px.png`;
  14.                 link.href = canvas.toDataURL('image/png');
  15.                 link.click();
  16.  
  17.                 loadingIndicator.style.display = 'none';
  18.             } catch (error) {
  19.                 console.error('生成PNG文件时出错:', error);
  20.                 loadingIndicator.style.display = 'none';
  21.                 alert('生成PNG文件时出错,请重试');
  22.             }
  23.         }
  24.        ...
  25.         // 下载ICO
  26.         async function downloadICO() {
  27.             const loadingIndicator = document.getElementById('loadingIndicator');
  28.             loadingIndicator.style.display = 'block';
  29.             ...
复制代码

附件:
html软件(含字体库),解压到文件夹,双击浏览器打开即可使用。


- THE END -
取消
微信二维码
微信二维码
支付宝二维码
最新推荐
推荐标签