<span style="color:#606266;font-family:" font-size:15px;background-color:rgba(255,="" 255,="" 0.85);"="">html字体图标生成和下载(方便、快捷、实用)
【写在前面:有时为了找个合适图标,花费较多时间,刚好有个网络字体库fontAwesome,通过反复研究转码成功,可用来做图标,改改颜色,保存ico即可】
功能介绍
图标:常用字体图标500个,每页100个,因当前字体免费版本限制,个别可能显示为网络。
搜索:支持中文搜索,为全部范围搜索。
尺寸:16×16、32×32、48×48、64×64、128×128、256×256
颜色:调色板选择颜色
预览:根据尺寸和颜色预览,备注:当前颜色、当前尺寸、当前颜色(如#e70d39)
保存:支持png、svg、ico格式,ico自动为透明背景色。
html软件(含字体库),解压到文件夹,双击浏览器打开即可使用。
关键代码:
// 下载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[selectedIcon] || 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';
...
资源下载
抱歉,下载地址 评论 后刷新可见
版权说明
文章采用: 《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权。版权声明:未标注转载均为本站原创,转载时请以链接形式注明文章出处。如有侵权、不妥之处,请联系站长删除。敬请谅解!



看看能不能用