如何创建像字体真棒这样的图标

Posted 2023-03-06

【中文标题】如何创建像字体真棒这样的图标

【英文标题】：How to create icons like font awesome

【发布时间】：2016-12-21 18:27:38

【问题描述】：

我是网络开发的新手。在我获取图标的示例项目中，我包含了 font-awesome 插件 (http://fontawesome.io/icons/)。我可以选择所有可用的图标。但是我有两个三个project specific images，比如project logo。

问题 1：如何将项目特定图像 (png) 转换为“font-awesome”等图标

问题 2：我搜索了一下，然后发现它们只是带有 svg 扩展名的文件。因此，如果我将已有的图像转换为 SVG 格式就足够了。

问题 3：所以，一旦我创建了 SVG 图标，我就可以像应用在“font-awesome”图标上一样应用 CSS 样式。

我对这一切都不熟悉。请指导我。

【问题讨论】：

我非常怀疑我是否要求任何书籍或任何插件推荐。我在提问之前做了功课，然后发布了我的问题。我得到了一个令人满意的答案，它本身没有任何书籍推荐。谢谢

【参考方案1】：

问题 1：如何将项目特定图像 (png) 转换为“font-awesome”等图标

link

png 是位图图像样式，而 SVG 是基于矢量的图形 支持位图的设计，因此它不会转换 图像到矢量，只是以基于矢量的格式嵌入的图像。你 可以使用免费的http://www.inkscape.org/ 来做到这一点。它会 嵌入它，但它也有一个类似 Live Trace 的引擎，它将尝试 如果您愿意，可以将其转换为路径（使用 potrace）。

问题 2：我搜索了一下，然后发现它们只是带有 svg 扩展名的文件。因此，如果我将已有的图像转换为 SVG 格式就足够了。

是的

问题 3：所以，一旦我创建了 SVG 图标，我就能够像应用在“font-awesome”图标上一样应用 CSS 样式。

您可以手动将其添加到 font-awesome 库中。另一方面，与其扯头发，不如使用在线工具来帮助您为图标创建自定义库。我过去曾成功使用过Icomoon 和flaticon。