导语
前面六期，建站的主干已经齐了：写代码用 Notepad++（第一期），本地跑站用 phpStudy（第二期），看页面结构用 仿站扒皮（第三期），管内容用 迅睿CMS（第四期），做网站小图标用 比特虫（第五期），处理网页图片用 Fireworks（第六期）。页面搭起来后，导航、按钮、分类旁边总还缺一批小图标。一个个重画不现实，网上随便存几张又容易风格不统一。本期介绍 iconfont，一个专门找矢量小图标的网站。
软件介绍
iconfont（阿里巴巴矢量图标库） 是一个在线图标平台。你可以用中文关键词搜索图标，把选中的图标放进自己的项目，再按需要下载 SVG、PNG，或者生成一套字体图标。
它适合建站时补导航、按钮、分类、状态这些小图形。矢量图放大不会糊，也能统一改颜色和大小。比临时从网页上存图片更干净，也比每个图标单独打开设计软件重画省时间。
官网与使用方法
这是在线工具，打开官网搜索就能用。要把图标收进项目、批量下载或生成引用代码，需要登录：
使用步骤（照着走就行）：
先搜再筛选。用“电话”“购物车”“用户”这类具体词搜索，再按线性和面性筛选。一个页面里别混太多风格。
点进图标看版权。下载前看详情页的版权说明。标了可商用、CC0、MIT 等明确授权的再考虑用，空白或写着不可商用的别直接拿去上线。
加入项目。同一个网站用到的图标放进同一个项目，方便统一改颜色、大小和后续替换。
选下载方式。临时用几枚，下载 SVG 或 PNG；页面里图标多，再考虑生成字体或 Symbol 引用。
放到页面里。SVG 适合单独控制；PNG 适合不能改代码的旧模板；字体图标适合一批单色小图标统一调用。
主要特点
中文搜索方便。不用先想英文关键词，搜索结果也更贴近国内网站常用的图标。
格式比较全。可以下 SVG、PNG，也能生成字体图标，设计稿和网页都能接。
项目能统一管理。一个站用到的图标放在一起，改颜色、补图标、替换图标都不用重新找。
三种引用方式。Unicode 兼容老，Font class 类名直观，Symbol 支持多色和更灵活的 SVG 用法。
矢量缩放不糊。导航、按钮、高分屏上的小图标，用矢量比直接放大位图干净。
知也的几个使用提醒
工具好用，但最容易踩的不是操作，而是授权和用法：
1. 免费下载不等于都能商用。平台上的图标来源不统一，有的可商用，有的只允许个人使用，有的需要联系作者。企业站、带交易的页面，上线前要逐个看版权说明。
2. 同一个页面统一风格。线性、面性、卡通不要混在同一组导航里。先选定一套，再往项目里加，页面会整齐很多。
3. 图标少就别上整套字体。只有三五个图标时，直接用 SVG 更直接。图标多、颜色单一，再用 Font class 或 Symbol。
4. 不要依赖在线链接长期挂站。平台生成的在线引用适合开发和预览。正式站点更稳的做法，是把项目资源下载到自己的服务器，避免外部链接变化影响图标显示。
5. 颜色交给页面控制。单色图标尽量保留可改色的 SVG 或字体形式。先导出成固定颜色的 PNG，后面换主题色就要重新下载。
为啥不推荐别的
找图标也能用国外图标站，或者直接在设计软件里从零画。国外站点的英文搜索和访问速度不一定适合赶页面；从零画虽然可控，但建一个普通企业站不值得把时间花在几十个小图标上。
iconfont 胜在中文搜索、国内访问和项目管理。它不是“所有图标都能随便商用”的素材库，这个边界必须说清楚。把授权看完，它仍然是国内建站找小图标最顺手的入口之一。
小结
iconfont 是阿里巴巴矢量图标库，可以搜索、收藏、下载 SVG 和 PNG，也能把一批图标放进项目统一管理。建站时用它补导航和按钮图标很方便，但下载前一定要看每个图标的版权说明，不能默认全部免费商用。正式上线时，把要用的图标下载到自己的站点里更稳。
码字不易，多谢点赞支持！
SEO
GEO
建站与上线
工具
网站模板
网址导航
