logo
当前位置:首 页 > 编程技术 >前端技术 > 查看文章

本文要推荐的「Maki Icons」是一款开放原始码并采用 CC0 授权的免费图标库,比较特别的是这套图标专为地图设计者所开发设计,因此在这里你可以找到许多具有代表性的标志。

为了让阅读者可以一目了然,这些图标并没有太多复杂的细节设计,即使没有细看也能有极高的辨识度,Maki Icons 为了让使用者能正确编辑、修改这些图标,还准备完整的设计指南(Design Guidelines),教你如何在编修图标后又不影响到原有的简洁和易读性。

整套 Maki Icons 大约有三百多个图案,可以从项目官方网站预览,下载后会有两种尺寸的 SVG 矢量图标:11px 和 15px ,你也能够使用矢量图软件来编辑成其他大小或颜色。因为是采 CC0 授权,没有任何版权或使用上的限制,作为商业用途也没问题。

Maki Icons

https://www.mapbox.com/maki-icons/

STEP 1

开启 Maki Icons 网站后可以预览 Maki 图标的所有图案,不过因为它是以地图设计师的需求而量身打造的,要放在地图里图标看起来都会比较小一些(应该也可以用在其他地方,不过我暂时还没想到)。

只要点击右上角的「Download Maki」按钮就能下载、获取所有图标 SVG 素材。

将鼠标移动到图标上方,也会显示每个图案的文件名称。下载后解压缩,就能在「icons」资料夹里找到对应的图标。

STEP 2

我认为 Maki Icons 最有价值的部份除了三百个图标,最重要的是「设计指南」相当用心,如果你想要修改图案设计,务必要仔细阅读这个页面,它有非常详细的 Maki 图标风格设计准则。

STEP 3

最后,再推荐一下 Maki Icons 网站提供的在线图标编辑器(https://www.mapbox.com/maki-icons/editor/),如果你想要先为 Maki 图标进行一些小幅度的编修,或许就能从在线编辑器来快速完成,不用自己抓下来手动编辑。

从 Maki Icons Editor 可以编辑包括颜色、背景颜色、中空效果、深色背景或加入圆角及方形外框等等,编辑后可实时预览,勾选你需要的图标然后点击右上角的「Download」打包下载。当然在在线编辑器可修改的范围较小,效果也不一定令所有人满意,有兴趣的朋友可以试试看。

值得一试的三个理由:

  • Maki Icons 收录超过 300 种图案,微小却易于辨识
  • 提供 11×11、15×15 两种尺寸大小的 SVG 矢量图
  • 收录设计指南教你如何在编辑后仍保留 Maki Icons 特色

Ionicons

http://ionicons.com/

Ionicons」是一款收录 700 多个高质量图案的免费图标集,它是为「Ionic Framework」开发框架设计的图标字体(Icon font),由 @benjsperry 设计,100% 免费且开放是它的特色。

Ionicons 目前已经有超过 700 种图标图案,除了使用者界面开发会用到的按钮图标外,它也收录几个常见的社群网站图标,例如:Facebook、Twitter 和 Google+ ,对于想加入社群按钮来说就很方便,不用再额外载入其他图标拖慢网页开启速度。

另一方面,Ionicons 也和 MaxCDN(现已被 StackPath 收购)合作提供免费 CDN 网址,各个地区的使用者在取用图标库时速度就会更快、更顺畅,当然也不会消耗自己的网站流量。

STEP 1

开启 Ionicons 图标集网站,点击「Download」就可取得这套完整图标。不过如果你是要使用于网站开发或在网页里使用,建议直接将 CDN 链结嵌入网站就能载入你要的图案(稍后说明)。

一般来说,我在决定要使用这套图标集以前,会先输入几个关键字来查询我需要的图案有没有被收录,或者图案设计上是不是符合我的网站风格。Ionicons 图标设计都比较精简一些,看起来很简洁,对于大部分设计来说应该都很适合。

STEP 2

点击网站上方的「CDN」或直接拖曳到 Ionicons 网页最下方,可以找到 MaxCDN 赞助的链结,这个链结也支援 SSL。如果你觉得这个托管服务不够快,也可以直接从 GitHub 将完整档案下载下来上传到自己的主机空间使用,两种方法基本上是相同的。

STEP 3

要如何在网页里调用某个图标呢?这部份可以参考 Ionicons 说明文件,里头会有一些基本使用范例。

再回到 Ionicons 网站点击你要的图标,就会出现该图标名称,将这名称作为样式就能载入图案,例如最简单的用法:<i class=”icon ion-social-facebook”></i>,照着样式名称做修改调整。

STEP 4

最后,我再推荐一下 Ionicons 提供的「Cheatsheet」也就是小抄页面,非常好用!这个页面里会有每个图标在不同大小的显示样式预览,以及样式名称(Classname)、HTML 和 CSS Content,对于开发者来说应该会用到。

值得一试的三个理由:

  • 免费顶级图标集,收录超过 700 种图标图案
  • 可直接使用 CDN 网址嵌入使用,无须下载任何素材
  • 图标轻巧,开启速度快,适用于任何大小的屏幕显示
一个有大大梦想但是没有支撑这梦想的技术的攻城狮,大家就当这个博客是你的技术工具箱吧,我会吧我工作中遇到的问题贴在这,大家需要的记得把我放到收藏夹哦! 百度输入“子傲代码”就可以了

—— 陈子傲

admin
你可能也喜欢Related Posts
众说纷纭Comments
大眼 可爱 大笑 坏笑 害羞 发怒 折磨 快哭了 大哭 白眼 晕 流汗 困 腼腆 惊讶 憨笑 色 得意 骷髅 囧 睡觉 眨眼 亲亲 疑问 闭嘴 难过 淡定 抗议 鄙视 猪头
小提示:直接粘贴图片到输入框试试
努力发送中...
  • 评论最多
  • 最新评论
  • 随机文章
footer logo
未经许可请勿自行使用、转载、修改、复制、发行、出售、发表或以其它方式利用本网站之内容
Copyright ©ziao design Studio All Rights Reserved.沪ICP备14052271号-3