如何创建类似于Font Awesome的图标

10

我是新手开发人员。在我的样例项目中,为了获取图标,我已经包含了 font-awesome 插件 (http://fontawesome.io/icons/)。并且我可以选择所有可用的图标。但我有两三个项目特定的图片,比如 项目标志

问题1:我如何将项目特定的图片(png)转换为像 “font-awesome” 一样的图标?

问题2:我搜索了一下,然后发现它们只是带有 svg 扩展名的文件。因此,如果我将我已经拥有的图片转换为 SVG 格式,那么这是否足够?

问题3:那么,一旦我创建了 SVG 图标,我是否能像应用于“font-awesome”图标一样应用 CSS 样式。

我对所有这些都很陌生。请指导我。


1
您IP地址为143.198.54.68,由于运营成本限制,当前对于免费用户的使用频率限制为每个IP每72小时10次对话,如需解除限制,请点击左下角设置图标按钮(手机用户先点击左上角菜单按钮)。 - Unbreakable
1个回答

12

问题1:如何将项目中的特定图片(png)转换为像“font-awesome”一样的图标?

链接

PNG是一种位图图像风格,SVG是一种支持位图的基于矢量图形设计的格式,因此它不会将图像转换为矢量图形,只是将图像嵌入矢量图形格式中。您可以使用免费的Inkscape来完成这个任务。它将嵌入它,但它还有一个类似于引擎的实时跟踪功能,如果您愿意(使用potrace),它会尝试将其转换为路径。

问题2:我搜索了一下,然后发现它们只是具有svg扩展名的文件。那么,如果我将已经有的图像转换为SVG格式,这样就足够了吗?

是的

问题3:所以,一旦我创建SVG图标,我能像应用在“font-awesome”图标上一样应用CSS样式吗?

您可以手动将其添加到font-awesome库中。另一方面,您应该使用在线工具帮助您为图标创建自定义库,而不是挖空心思去做它。我过去使用过Icomoonflaticon都取得了成功。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接