今天推荐的「」是一个国外免费图标搜索网站,目前收录超过 200 万个图标!图标素材超过 400+ 以上,涵盖 30 种不同风格类型,从矢量图到平面设计图示甚至是现代化插图应有尽有 。使用者可以从免费下载 72px 以下(包括 24px、32px、48px 和 64px)图标,而且不用注册登入帐户 。
另一个值得一提的是允许使用者直接在线上变化不同的配色风格,一般来说,寻找图标时必须受限于它的设计风格和颜色,但可以让使用者自定义颜色、大小或加入配件,使得图标看起来效果一致,也更能与你的网页相衬 。除此之外,也提供许多的免费图标集,开放让搜寻图标的开发者可以线上预览、免费下载!
STEP 1
开启网站后直接从首页上方搜寻框输入要查找的图标名称或关键字,如果不知道要输入什麽下方也有范例可供参考,顶部选单有社群网站、、iOS、 10 等特定风格(主题)的图标快速链接 。
STEP 2
例如下图是我开启「」也就是社群网站相关的图标库 。可以看到风格一致,预设情况下显示的预览图为 72px 大?。?纱幼蟛嘌∠畹髡?笮 ⒀丈?虮尘吧?。点击上方「Free Full Pack」可一次打包、下载所有图标,不过最多只有 72px PNG 图标可免费下载,不包含原始档,如果要取得所有尺寸大小及原始档必须付费购买「 Full Pack」 。
将鼠标移动到图标上方,会显示 PNG、SVG 两个按钮,不过 SVG 向量格式旁边有个锁头,必须升级付费会员才能下载,免费用户只能获取一般 PNG 格式 , 但有各种大小可以下载其实还算耐用 。若有特殊需求的话建议付费升级 。
STEP 3
点击进入图标页面,跟一般免费图库不太一样,可以让我们直接从浏览器线上自订,如果你不想修改,从右下角的「」就能选择各种图示尺寸,前面有提到:24px、32px、48px、64px 和 72px 这五种大小可以免费下载,如果要更大的尺寸或 SVG 格式必须付费升级 。
STEP 4
看到左侧的「Color」吗?如果你想要稍微调整一下图标配色风格完整网站开发步骤,可以从这里快速选择、套用 , 而且网站已经把各种颜色分类好,例如平面化颜色、简单风格、iOS、等等 , 当然也可以自己设定色值 。当选择颜色后右侧预览及上方图标库的颜色风格就会统一,也能够个性化更适合你网站或APP配色风格的免费图标 。
STEP 5
还有另一个有趣的玩法,从上方中间挑选「配件」来加入图标,让它在组合后成为一个全新的图标 。当然每一套图标可以加入的配件不同,稍微搭配几种发现组合起来效果很搭,不会有感觉突兀或不自然的状况,搭配上个步骤的配色工具,还能让这个新图标呈现出不同感觉 。
文章插图
文章插图
STEP 6
最前面介绍有提到 , 还有一些「免费图标库——Free Icons」可以下载,如果你比较不想自定义颜色或组合的图标,而是倾向寻找一整套图标的话,或许可从这个分类开始找起 。点选上方选单的「Free Icons」就能开始浏览 。
值得一试的三个理由:
「」是一款免费图标库,以收录程式语言、设计和开发工具为主,常见的技术相关标志图标都可在这个网站中找到 。提供两种使用方式:字体图标或 SVG 向量图格式,只要从网站上找到你要的图案,直接将产生的代码复制、贴上,就能快速取用图案 。
值得一提的是无论是使用哪种格式,都可通过 CSS 调整大小或显示方式,让它能使用于任何网页 。除此之外,字体图标也已经支持 CDN,开发者无须自行托管档案,节省流量开销 。如果你刚好需要取用这些图标,是个非常方便的选择 。
STEP 1
开启网站(目前版本为 2.0),右侧会列出所有图标,左侧有「超级」快速设定方法完整网站开发步骤,简单来说,选择你要的图标后 , 快速设定下方就会显示出对应的代码,将代码复制到网站适当位置就能够显示 。
STEP 2
也有提供的标志,点击后会发现图标字体有四种样式,SVG 版本有三种,看起来颜色不太一样 , 有些除了 Logo 外还会加入英文字体 。
STEP 3
我们把画面再拉近一点,字体版本的图标使用方式会多一行代码,主要是载入字型和 CSS , 必须把这段样式表链接放到你的网站部分;接着再把底下的那段代码加入网页里要显示图标的位置 , 重新整理页面就能看到效果 。
如果你只想单独取用一两个图标,可能 SVG 版本会更适合 , 至少不用载入完整字体及 CSS 样式表,在流量方面都能够大幅节省 。SVG 格式是直接以代码绘制,因此只要三行代码就能直接在网页内将图标绘制出来,非常强大 , 有兴趣的朋友可将产生的 SVG 代码复制到自己网站测试一下 。
【设计师都需要的图标网站,2000万个图标免费下载】本文到此结束,希望对大家有所帮助 。
- ?去美国读研究生需要考什么
- 有时需要翻脸不认人 ?翻脸不认人的意思
- 购车需要注意哪些事项
- 外地人在天津买车上牌需要什么条件
- 10岁孩子叛逆期都有哪些行为表现?又该如何解决?
- 孩子们为什么需要STEAM教育?
- 第 12 代英特尔酷睿处理器发布详解,这次牙膏都挤爆了
- iOS13升级后才有的功能,其他人都没告诉过你
- 苹果储存有诀窍,果农教你几招,天天都能吃到新鲜的苹果
- 婚庆需要准备的东西有哪些 婚庆用品去哪里购买