收录 5500 个免费矢量图标的 IcoMoon,快收藏起来!

网络上有不少提供免费图标的素材库可以使用,大部分都是以风格分类,可一次下载整套图标,再从图标集找出自己需要的图标设计,除了常见的 PNG 格式以外也会有 SVG 向量图文件,文件更小,也可自行设定要使用的尺寸大小或颜色等等,或是通过网页字型(Webfont)形式只要加载 CSS 样式表单,就能以程序代码加载特定图案。

本文要介绍「IcoMoon」是一个提供精致设计图标集网站,其中有个 IcoMoon App 功能非常方便好用,可以浏览超过 5500 个免费向量图标,选择自己需要的图案在线制作为优化的图标字型格式(Icon Fonts),亦可生成为 SVG 和 PNG 档案。

值得一提的是 IcoMoon App 允许用户上传自己的图标文件(仅限 SVG 格式),将图标在线转为 Icon Font 图标字型,转换后下载就能取得相关文件,包括 CSS 和示范页面都帮你直接生成,非常好用,依照说明网页将语法带入就能在特定位置加载图标。

IcoMoon App

网站链接:https://icomoon.io/app/

使用教学

开启 IcoMoon App 会看到默认的图标集,点选左上角「Import Icons」可汇入自己手边的 SVG 图标,再从 IcoMoon 选择需要的图案然后一起打包成图标字型。

收录 5500 个免费矢量图标的 IcoMoon,快收藏起来!

IcoMoon App 也有提供「Icon Library」图标库功能(从 Import Icons 右侧的图标库图案进入),会有需付费才能使用的图标或免费图标,分辨方式很简单,只要图标集下方显示的按钮为「Add」代表可直接加入选择,若是 Purchase 或 Go Premium 字样就必须要付费购买或升级才能使用。

收录 5500 个免费矢量图标的 IcoMoon,快收藏起来!

从 IcoMoon App 选择要使用的图标图案,如果在前一个步骤有加入其他图标集,往下滑动就会看到。

从图标集右上角按钮切换显示或隐藏,也能调整每个图标集要显示的位置,选好所有需要的图标后点选下方按钮来产生 SVG、PNG 压缩文件或产生字型。

收录 5500 个免费矢量图标的 IcoMoon,快收藏起来!

例如我点选「Generate SVG & More」会将我选取的图标产生为两种格式,接着点左下角「Download」下载并解压缩后就会取得 SVG 和 PNG,将光标移动到图标上方会点选取得代码会出现详细资料,像是 HTML、CSS 和 Symbol definition 语法,稍微研究一下就能将图标运用到网页或是应用程序。

收录 5500 个免费矢量图标的 IcoMoon,快收藏起来!

如果是点选「Generate Font」会出现类似画面,点选右下角「Download」也能取得制作产生后的图标字型相关档案,一样点选图标会显示相关信息,或是解压缩文件案、开启里头的 demo.html 会有示范和教学说明可以参阅。

收录 5500 个免费矢量图标的 IcoMoon,快收藏起来!

除此之外,IconMoon App 有个比较特别的功能是「Quick Usage」,直接产生 CSS 样式表单和相关档案,只要点选上方说明「Enable Quick Usage」开启这项功能就会出现网址,不过临时的网址只有 24 小时保存期限,仅供测试使用,其实只要将产生的文件下载回来自行托管就没有使用期限问题。

收录 5500 个免费矢量图标的 IcoMoon,快收藏起来!

值得一试的三个理由:

  •  收录超过 5000 个向量图标,选择需要的图案制作为图标字型
  • 将图标下载为 SVG、PNG 或产生为图标字型(Icon Font)
  • 用户可上传自己的图标文件并在在线转为图标字型

更多免费图标素材:

[link https://www.uisdc.com/iconic]

点赞 14
收藏 43
继续阅读相关文章

发表评论 已发布 1

还可以输入 800 个字
 
 
载入中....
1 收藏