
相信很多製作網站的人都會需要用到一些特殊的圖示,今天小的要來介紹的不是一般可愛的小圖示喔,而是在網站的製作時,會使用到的圖示。「Devicon」這裡提供了這多大家常常會需要用到的圖示供下載,但他有個很特別的地方,那就是可以直接複製圖示的程式碼來使用喔!!相信對於需要這項工具的朋友們來說,這裡應該很不錯的。如果需要的圖示不多,可以直接線上搜尋後,複雜程式碼來用,或者是一次將所有圖示全數下載來使用也是ok的喔,是不是很棒呢!!
Devicon有個很貼心的地方,除了提供圖示給大家免費使用外,針對每一種圖示,還提供了多種樣式供大家挑選喔,操作方法也真的超級簡單的,只要點選想使用的圖示之後,就會出現該圖示的程式碼,只要把程式碼複製後,放到網站上想放置的地方,就算完成囉。除此之外還提供一次全部的圖示打包下載帶走,真的很貼心,就讓我們來看一下怎麼把這些圖示帶回家吧。
Devicon
網站名稱:Devicon
網站連結:https://konpa.github.io/devicon/
網站連結:https://konpa.github.io/devicon/
Step1
進到網站後,會先看到許多的圖示在右邊喔。

Step2
點選想使用的圖示後,左邊就會出現該圖示可使用的選項,可能是配色不同或是框線不同供你選擇。

Step3
點選要下載的圖示,接著在圖示下方就會出現該圖示的程式碼。將程式碼複製後,放到自已網站上想擺放的位置就完成囉。

Step4
上述的方法是針對單一圖示的簡易操作。如果想將網站上的所有圖示都能使用的話,將左邊功能列下移,按下「DOWNLOAD」就可以將圖示全數下載到電腦去囉。

Step5
下圖就是下載完成的所有圖示資料夾喔。有興趣的朋友也快來試試吧。
