做网站用的各种图标大全

昨天有个朋友找我吐槽，说他的网站看着特别“土”，明明内容写得挺专业，但就是没人愿意多停留。我打开他的后台一看，好家伙，导航栏里的图标全是那种九十年代Flash风格的，颜色还特别刺眼，跟现在的扁平化设计格格不入。

其实很多刚入行的站长都有这个误区，觉得图标嘛，随便找个能看懂就行。大错特错！图标是网站的视觉语言，用得好，用户扫一眼就知道你在干嘛；用不好，用户直接关页面。

今天我就把自己压箱底的资源整理出来，顺便说说怎么挑，怎么放。希望能帮大家在“做网站用的各种图标大全”里找到最顺手的那一款。

先说个数据，根据我过去半年跟踪的几十个客户网站，图标优化后，平均跳出率降低了15%左右。这不是玄学，是因为人脑处理图像的速度比文字快6万倍。

那去哪里找这些图标呢？

第一，推荐Iconfont。这是阿里的开源图标库，国内用的人最多。优点是免费、中文支持好、格式全（SVG、PNG、Webfont都有）。缺点是需要自己注册账号，下载稍微麻烦点。

第二，FontAwesome。老牌劲旅，很多国外主题都内置了这个。它的优势是风格统一，特别是那种线性图标，非常适合极简风网站。不过要注意，免费版只有基础图标，高级图标得付费。

第三，Flaticon。这个库里的图标特别花哨，色彩丰富。如果你的网站是儿童教育、餐饮或者创意类，选这里准没错。但缺点是风格不统一，容易显得杂乱，需要自己调色。

挑完图标，接下来是重头戏：怎么用才不显丑？

第一步，统一风格。千万别把线性图标和面性图标混着用，也别把黑白图标和彩色图标硬凑在一起。要么全黑，要么全彩，要么全线性。视觉一致性比什么都重要。

第二步，注意大小。一般导航栏的图标建议24x24像素，正文中的小图标16x16就够了。太大显得笨重，太小看不清。我见过有人把图标放大到64像素还觉得不够大，结果在手机上直接溢出屏幕，这就尴尬了。

第三步，加交互效果。鼠标悬停时，图标可以稍微变色或者放大5%。这个细节很加分，能让用户感觉到网站是“活”的。不用写复杂的代码，CSS里加个transition属性就行。

这里插一句，很多站长在找“做网站用的各种图标大全”时，容易陷入下载狂魔模式，存了几千个图标却一个都没用。记住，少即是多。全站图标最好控制在50个以内，保持简洁。

还有个小技巧，如果你用的是WordPress，可以直接装插件，比如“Iconic One”或者“Simple Icons”，这样不用自己上传，后台直接选，省事。但要注意插件别装太多，会影响加载速度。

最后，说说版权。虽然很多图标免费，但商用前一定要看清授权协议。Iconfont大部分是CC0协议，可以随便用；FontAwesome个人免费，商用需付费。别为了省几十块钱，最后被告侵权，那才叫亏大了。

我有个客户，之前图标乱用，颜色五花八门。后来我帮他重新梳理，只用了三种主色调的图标，整个网站的质感立马提升了两个档次。用户反馈说：“现在看着舒服多了，愿意多逛逛。”

所以，别小看这几个小图标。它们是网站的门面，也是用户体验的关键一环。花点时间挑挑拣拣，绝对值得。

希望这篇关于“做网站用的各种图标大全”的分享，能帮你少走弯路。如果你还有更好的图标网站推荐，欢迎在评论区留言，大家一起交流。毕竟，建站这条路，独行快，众行远。