陌北默

折纸是一门手工艺术,若将其应用到我们的网页设计或UI设计上,一定也很棒。今天我们为大家分享一套折纸风格的动物图标:Origami Animals,动物图案可爱有趣,图标包含.jpg 和 SVG 两种图像格式。

081704lR7

若是用在 WEB 网站上,推荐大家使用 SVG 格式的图标,可以随意放大缩小而不失真,以及能用 CSS 来改变图标颜色。

081706HK1

如何使用 SVG

本文以下图图标为例,下载后得到「noun_301181_cc.svg」文件。

081707lqw

方法一:直接用<IMG>标签:

<img src="noun_301181_cc.svg">

方法二:内嵌 SVG 代码,这样可以通过 class 来改名图标的颜色了,SVG 代码在icomoon获取的。

<svg class="icon icon-noun_301181_cc"><use xlink:href="#icon-noun_301181_cc"></use></svg>

<svg style="position: absolute; width: 0; height: 0;" width="0" height="0" version="1.1" xmlns="http://www.ccopus.com/2000/svg" xmlns:xlink="http://www.ccopus.com/1999/xlink">
<defs>
<symbol id="icon-noun_301181_cc" viewBox="0 0 819 1024">
<title>noun_301181_cc</title>
<path>这段 path 代码太长,省略了...</path>
</symbol>
</defs>
</svg>

通过 class 改变 SVG 图标的大小和颜色

.icon {
fill:green; /*填充颜色*/
width:24px;
height:24px;
}

本套图标是免费个人和商业使用的,请放心使用,喜欢的可以先收藏起来。

图标名称:Origami Animals
原文地址:thenounproject
文章来源:设计达人

转载请注明:学UI网—UI设计师学习教程平台 » 折纸风格的动物图标 (SVG 格式)

登录收藏

学UI就上学UI网!越努力,越幸运!

“学UI网www.ccopus.com?”最值得关注的UI学习平台! 每天发布高质量的设计教程和分享设计经验,服务于20万UI设计师,帮助初学者快速转型。每周六晚上免费YY公开课(36013311),给大家提供更多免费学习的机会。想成为设计师的你快来关注吧!

【特色推荐】

APP截图站app.ccopus.com” 海量APP截图,让你灵感爆发!国内最好的APP截图站。

UI作业网 zuoye.ccopus.com” 每一个作业题都尽量配有教程,交作业就有大神免费帮你点评作业,爽歪歪!

UI设计导航站 hao.ccopus.com” 专为UI设计学习者打造的资源+学习,双用途的网址导航站。亲爱的,你收藏了吗?

【学UI网 原创文章 投稿邮箱:tougao@ccopus.com,也可以找各个群的管理】

 
你可能喜欢的:
大合集!最新版iPhone X 展示模板样机下载!大合集!最新版iPhone X 展示模板样机下载!
教你创建炫酷的星际文本效果【PS教程】教你创建炫酷的星际文本效果【PS教程】
最新版IOS 11设计规范,官方源文件下载!最新版IOS 11设计规范,官方源文件下载!
高达1440M!5套高质量UI KIT下载!高达1440M!5套高质量UI KIT下载!
5款漂亮的UI KIT合集PSD&SKETCH下载!5款漂亮的UI KIT合集PSD&SKETCH下载!
干货合集!5套精美的icon源文件免费下载!干货合集!5套精美的icon源文件免费下载!
干货合集!价值332美元5套ui kit!PS&SKETCH干货合集!价值332美元5套ui kit!PS&SKETCH
大理石与金属碰撞的文字效果[PS教程]大理石与金属碰撞的文字效果[PS教程]
用PS将插画转为像素风格用PS将插画转为像素风格
超高质量176个页面自由组合APP模板Sketch, PS & XD免费下载!超高质量176个页面自由组合APP模板Sketch, PS & XD免费下载!
?