木子素材 首页 大神 平面设计 查看内容

折纸风格的动物图标 SVG 格式

2016-2-18 00:00| 发布者: admin| 查看: 743| 评论: 0

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

扫一扫
官方手机版

AI创作助手小程序

扫一扫
AI创作程序

木子官方公众号

扫一扫
木子公众号

木子AI官方公众号

扫一扫
AI公众号

折纸是一门手工艺术,若将其应用到我们的网页设计或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="100%" height="100%" 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;
}

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

手机扫一扫,阅读下载更方便˃ʍ˂

@版权声明

1、本网站文章、帖子等仅代表作者本人的观点,与本站立场无关。
2、转载或引用本网版权所有之内容须注明“转自(或引自)网”字样,并标明本网网址。
3、本站所有图片和资源来源于用户上传和网络,仅用作展示,如有侵权请联系站长!QQ: 13671295。


路过

雷人

握手

鲜花

鸡蛋

最新评论

广告图片
悬浮图片
×