如何创建像 font awesome 这样的图标

How to create icons like font awesome

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

问题 1:如何将项目特定图像 (png) 转换为类似 "font-awesome"

的图标

问题2:我搜索了一下,发现都是svg扩展名的文件。因此,如果我将已有的图像转换为 SVG 格式就足够了。

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

我对这一切都是陌生的。请指导我。

问题 1:如何将项目特定图像 (png) 转换为类似 "font-awesome"

的图标

link

A png is a bitmap image style and an SVG is a vector-based graphics design which supports bitmaps so it's not as if it would convert the image to vectors, just an image embedded in a vector-based format. You could do this using http://www.inkscape.org/ which is free. It would embed it, however it also has a Live Trace like engine which will try to convert it to paths if you wish (using potrace).

问题2:查了一下,发现都是svg扩展名的文件。因此,如果我将已有的图像转换为 SVG 格式就足够了。

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

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