陌北默

折紙是一門手工藝術,若將其應用到我們的網頁設計或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.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
文章來源:設計達人

轉載請注明:學UI網 » 折紙風格的動物圖標 (SVG 格式)

登錄收藏
 
你可能喜歡的:
福利|贈送10個Dribbble精美且免費UI-KIT福利|贈送10個Dribbble精美且免費UI-KIT
5個網頁及移動端設計中最常用的英文字體5個網頁及移動端設計中最常用的英文字體
找不到素材?這份免費APP UI Kit資源大禮包送給你!找不到素材?這份免費APP UI Kit資源大禮包送給你!
Design Whitelist_設計白名單(附字體下載包)Design Whitelist_設計白名單(附字體下載包)
【史上最全】設計師必備的83個設計資源網站【史上最全】設計師必備的83個設計資源網站
Vera Block極品全套模板【干貨下載】Vera Block極品全套模板【干貨下載】
人物與場景自主切換的插圖設計庫——humaaans人物與場景自主切換的插圖設計庫——humaaans
干貨!最全優秀搜索框設計案例干貨!最全優秀搜索框設計案例
找不到免費矢量圖標資源?-10個最佳圖標資源分享找不到免費矢量圖標資源?-10個最佳圖標資源分享
源文件 | Web、iOS和Android三端元件庫下載源文件 | Web、iOS和Android三端元件庫下載
?
类似钱咖的高额赚钱 重庆幸运农场是真的吗 平煤股份股票 甘肃十一选五一定牛走势图 江苏7位数玩法 辽宁11选5任5走势图 股票分析最权威的网站 pk10精准实用6码公式 福彩20快乐十分20选八走势图 河南今天11选5走势表 五分赛车猜前一冠军