卡卡網(wǎng)

矢量圖標(biāo)常常用在欄目和標(biāo)題的名稱前面，起到醒目突出的作用。通常情況下，大家會(huì)選擇用字體圖標(biāo)，如FontAwesome，因?yàn)檫@方面的資源比較多，使用起來比較方便。而對(duì)于SVG矢量圖標(biāo)，使用的人不是特別多，但我發(fā)現(xiàn)很多人用SVG來設(shè)計(jì)logo圖標(biāo)，還有一些欄目圖標(biāo)。

如果你正需要SVG矢量圖標(biāo)設(shè)計(jì)網(wǎng)頁，那么你來對(duì)了地方，本文給你介紹逾千個(gè)SVG(可生成PNG)矢量圖標(biāo)免費(fèi)下載使用。

網(wǎng)站地址及使用介紹

首先打開網(wǎng)頁：https://icomoon.io/app/#/select 。

點(diǎn)擊任何一個(gè)圖標(biāo)，然后點(diǎn)擊下面的“Generate SVG & More”。

這時(shí)進(jìn)入新的網(wǎng)頁，看到剛才自己選擇的圖標(biāo)。

直接獲得SVG圖標(biāo)的HTML代碼

把鼠標(biāo)移到圖標(biāo)上，會(huì)看到 <> Get Code 文字，點(diǎn)擊它，可看到SVG圖標(biāo)的HTML代碼。

下載SVG和PNG文件

點(diǎn)擊“Download”按鈕，可以直接下載SVG文件和PNG文件。（注！國內(nèi)網(wǎng)絡(luò)不一定能下載）

解壓縮下載的文件，得到PNG圖片和SVG圖標(biāo)的HTML文件。

總結(jié)

本文介紹了一個(gè)擁有逾千個(gè)SVG(可生成PNG)矢量圖標(biāo)免費(fèi)下載使用的網(wǎng)站，對(duì)一個(gè)網(wǎng)頁設(shè)計(jì)師來說，這是一個(gè)值得收藏的資料庫網(wǎng)站。

相關(guān)文章

• 純CSS偽元素創(chuàng)建的84個(gè)小圖標(biāo)
• 512個(gè)CSS圖標(biāo)形狀(icon shape)【收藏】
• 簡化svg文件中的對(duì)象可減小文件大小，6mb減到700kb
• 使用Inkscape優(yōu)化SVG，文件從1600kb減到16kb
• 減小SVG體積的5個(gè)技巧，網(wǎng)頁加載時(shí)間從10秒降到2秒
• 詳細(xì)介紹CSS+SVG創(chuàng)建圓圈/圓環(huán)動(dòng)畫

• [實(shí)例]純 CSS SVG 畫圓/圓環(huán)/圓弧動(dòng)畫
• 比較和了解何時(shí)使用SVG與何時(shí)使用Canvas
• 圖片SVG、PNG、JPEG、GIF有什么不同？
• SVG 與 Canvas 的 6 大區(qū)別比較表
• SVG 與 Canvas 的五大區(qū)別
• SVG圖片對(duì)比PNG、JPEG的5大優(yōu)點(diǎn)

• svg circle stroke屬性設(shè)置實(shí)線邊框/虛線邊框/無邊框
• CSS+SVG：畫圓并且文字寫在圓中間
• CSS+SVG實(shí)現(xiàn)環(huán)形/圓環(huán)文字效果【簡單實(shí)例】
• 純CSS實(shí)現(xiàn)環(huán)形文字效果
• 用表格(Table)數(shù)據(jù)創(chuàng)建SVG圖表【簡單實(shí)用】

標(biāo)簽: SVG  PNG  CSS圖標(biāo)