未来已来

个人签名

124篇博客

最新博客

最新资源下载

编辑推荐

网易数帆开源API网关与容器云项目，让云原生生产落地“多快好网易汪源：统一负载与多云环境的“开放姿态”，才是云原生网易数帆如何用 Kubernetes“原语”搞定云原生中间件快手打新挤爆券商系统，网易数帆推出券商稳定性保障方案探索智慧校园新模式，网易有数在教育行业的实践分享金融行业大数据治理之路——数据模型篇

[收集 & 整理] 我和图标有个约会

未来已来2018-09-12 09:00

作者：马宝


作为收集癖重度症候群患者，从2014年开始到现在，粗略估计一年间我已经收集整理了36800多个图标，不包括之前的散落在各大移动硬盘中的找不到的、在源文件中未整理的那些，她们大体可以分为SVG、eps、fonticons、PNG、PSD等，很多都是批量下载而来，其中字体图标、svg居多因为平常使用频繁，可编辑性强；后宫佳丽 3万看我如何与她们相处的……（图标的收集、整理和使用）。

阶段一：暗恋期，初识图标

在设计中广泛应用的图标，是一种具有明确指示意义的图形，她可以是形状或者线条，其中介绍一下最洋气的icon font字体图标 、SVG格式的矢量图标；她们有着共性

  • “身材”很好，她们文件大小比起臃肿的PNG、JPG等位图格式的图标文件苗条多了；
  • “脾气”很好，她们善解人意，因为是矢量的原因可以满足你的任何放大缩小再编辑的需求

Icon font 就是将一套图标集以字体文件的形式封装，并通过 CSS 3 的 @font-face 作为 Web Font 调用。

通常一套 icon font 的数目不多，所以字体文件的体积亦会较小。同时因 icon font 中的图标为矢量，所以应对缩放也更为便利。并且 @font-face 属性甚至被 IE 6 支持，所以在尚需要考虑 IE 6 兼容性的时候，用于显示透明背景的单色图标，便不需要采取针对 .png 的 hack.

现在越来越多浏览器支持 SVG ，SVG或许是网页中使用矢量图标（SVG 甚至支持多颜色、渐变）更好的解决方案。

阶段二：交往磨合，面临冲突

无论是web平台类还是无线端的产品都会大量的使用图标，以往的CSS Image sprites方式已经心力憔悴，以我参与的平台项目为例，作为易信公众平台的设计师，我设计图标生成SVG，并用 https://icomoon.io/app/ 在线生成的方式完成字体图标的设计，前端引用CSS；


问题来啦 

在设计的过程中，你有没有遇到过看似简单的图标如果你来勾画的要费时费力，效果又不佳？

一时半会，找不到相匹配的图标来表示原型传达的意义？

理想的设计状态应该是这样 

解决方案：首先你要有一套图标库大而全，可以方便搜索；其次界面直观可视使用高效简洁，拖拽到位；


阶段三：热恋，丧心病狂的收集下载


批量下载，不做没有效率的事情；平常上最多的图标网站大概有这么几个，有些网站直接提供免费的字体图标，有些很有良心的会给你SVG，有些给你很可怜的PNG吊吊胃口，这是一个动脑子的时代，你是否愿意花大价钱买一堆无用的图标，或者照着PNG 吭哧吭哧一顿描；答案是NO，那么请往这边看


https://thenounproject.com
http://fortawesome.github.io/Font-Awesome
https://fonticons.com
https://www.iconfinder.com
http://ionicons.com

--> 我是这么干的，推荐thenounproject.com 全球最大的图标平台，无数多优秀的设计师会上传自己设计的图标；保守估计这个平台的图标应该有16W之多，你问我怎么知道的？因为我“数过”；我翻看过这个平台提供的API文档及URL，找到两个有用的线索。


  • 线索一：该网站会提供 PNG200*200 的缩略图，PNG格式，-84 表示 84X84，-200即表示 200X200 px的PNG，当然这个平台还提供600、1200px的大图下载（存在数据库里我爬不到），200px对于普通需求早已足够，设想一下1到16W的图片批量下载


感谢雨森同学写的批处理，我只是改一下


import os

prefix = 'https://d30y9cdsu7xlg0.cloudfront.net/png/%01d-200.png'

for i in range(1, 160000):
    cmd = 'wget ' + (prefix % i) 
    print cmd
    print os.popen(cmd).read()
  • 线索二：PNG不能满足我的需求，我希望能够下载到SVG矢量格式的图标，重点来啦，怎么样批量下载SVG呢？

https://d30y9cdsu7xlg0.cloudfront.net/noun-svg/19986.svg?Expires=1435125673&Signature=iZswOL3uEPywkeoQC5AuO1-fhghNnJ2rDyuysehR9qL9ccjymNHdp6aeWYQ8vcq4d2JeSNqoss2xUSOgoOR29vdOjrce7HfnbA-4mcgNWMt45HtmyiAQIApoeoouTl~dmM~DgdRWFPwyLzQruRzGXltuFE1VGhyhobZdDyECSKQ_&Key-Pair-Id=APKAI5ZVHAXN65CHVU2Q

先来看一下 他的路径，noun-svg/*.svg?Expires=14351256...，.svg?后面一长串 就是我们想要的SVG啦，他做的比较变态加密了而且有些还超过255字符，用wget -i大法不一定好使；

第一步取得 批量下载地址，打开thenounproject.com，搜索关键词，比方说admin回车，然后将下面代码贴到网络检查器 控制器中，chrome >developer tool >console ，贴进去后回车，你就会看到啪啪啪的地址栏在变   

(function() {
    var arr = [];
    var urlReg = /url\((.*?)\)/;
    $('.Grid-cell').each(function() {
        this.click();
        var url = urlReg.exec($('.hero-icon').attr('style'))[1];
        arr.push({
            url: url
        });
    });
    document.write(JSON.stringify(arr));
})()

第二步，用我本土自制的 auto app 自动帮你解决，下载 “批量下载”，鉴于公司的网络，我写了几个测试地址让你们爽歪歪一下

批量下载.zip

看一下批量下载的全过程，图大看这里

阶段四：痛并快乐着

当你要管理的图标超过一定量级的时候，你会很苦恼那么多图标该怎么解决？这里推荐 iconjar 管理app 和 icons8 收集app

毫不犹豫的选择 iconjar，虽然是内测版免费的，功能简洁，界面清爽，支持导入 SVG、TTF、OTF、PNG、GIF；标签管理，系统无遗漏；其中优缺大家自行品鉴

阶段五：新的起点，如何制作自己的fonticons

当有了一堆图标时，我想如何制作自己的字体图标，在线生成是一个低成本方法，但是公司网络的不确定性让我一直很没安全感，所以我就想能不能有一个方法可以本地化快速执行，增删改查又很给力呢；让我在github上找到了 fontcustom，简单的命令 就可以完成SVG to fonticons，但是需要安装 Ruby 1.9.2+,装这个费了我不少功夫，最后在井诚的帮助下顺利完成安装

https://github.com/FontCustom/fontcustom

安装Requires Ruby 1.9.2+, FontForge with Python scripting.

# On Mac
brew install fontforge --with-python
brew install eot-utils
gem install fontcustom

# On Linux
sudo apt-get install fontforge
wget http://people.mozilla.com/~jkew/woff/woff-code-latest.zip
unzip woff-code-latest.zip -d sfnt2woff && cd sfnt2woff && make && sudo mv sfnt2woff /usr/local/bin/
gem install fontcustom

快速使用

fontcustom compile my/vectors  # Compiles icons into `fontcustom/`
fontcustom watch my/vectors    # Compiles when vectors are changed/added/removed
fontcustom compile             # Uses options from `./fontcustom.yml` or `config/fontcustom.yml`
fontcustom config              # Generate a blank a config file
fontcustom help                # See all options

别以为有N多图标库就万事大吉了，有一位程序员哥哥（我不会告诉你这个人就是波神）跟我说，每天要临摹3个图标，我吓坏了回应到：要不我每天抄5段代码好了！时刻都不要停止学习和思考，简单的事情其实并不简单；

前人栽树后人乘凉，吃水不忘挖井人……

  • 感谢 雨森同学写的批处理代码
  • 感谢 井诚同学帮我安装Ruby
  • 感谢 诸多设计师们为视觉项目所付出
  • 可爱的小芳芳 写的易信公众平台改版之字体图标 

本文来自网易实践者社区，经作者马宝授权发布 

推荐博客