起航学习网

前言： 折纸是一门手工艺术，若将其应用到我们的网页设计或UI设计上，一定也很棒。今天我们为大家分享一套折纸风格的

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

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

如何使用 SVG

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

方法一：直接用<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.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/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 文章来源：设计达人

转载请注明：起航学习网 » 折纸风格的动物图标 （SVG 格式）

文章出自：http://qh.itpxw.cn/peixun/ui/201615457.html

文章标题：折纸风格的动物图标 （SVG 格式）



免责声明：本站文章均由入驻起航学习网的会员所发或者网络转载，所述观点仅代表作者本人，不代表起航学习网立场。如有侵权或者其他问题，请联系举报，必删。侵权投诉

---

---

(责任编辑：深圳学历教育网)