1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. 網頁設計
  6. »
  7. 《GitHub Octicons》200個可商業用免費ICON圖示下載

《GitHub Octicons》200個可商業用免費ICON圖示下載

2015/08/20

梅問題-《GitHub Octicons》可商業用免費ICON圖示下載

  之前己分享過幾款可商用且免費的ICON圖示下載,說到ICON圖示無論是網站還是APP幾乎不可或缺,好的ICON圖示除了可提升網站的質感外,甚至也可增加良好的使用經驗,而GitHub這平台大家應該不感陌生,最近也推出了近200個ICON圖示,供大家下載使用,同時也可應用於自己的專案中,由於GitHub本身擁有豐富的前端使用者經驗,因此整理出來的200個圖示都相當的實用,同時裡面的圖示梅干還蠻喜歡的,同時下載後,裡面包含了TTF、CSS、SVG…等檔案,因此可靈活的應用於網頁與APP中,同時使用方法也相當的簡單,現在也一塊來看看吧!


GitHub Octicons:

網站名稱:GitHub Octicons
網站連結:https://octicons.github.com/

Step1
首先,進到GitHub Octicons後,下方會看到所有的ICON圖示縮圖,接著點下方的下載鈕,先將素材給下載回來。
梅問題-《GitHub Octicons》可商業用免費ICON圖示下載


Step2
接著解壓縮後,就會看到以下的資料。
梅問題-《GitHub Octicons》可商業用免費ICON圖示下載


Step3
點進ICON縮圖後,就會看到該圖示的使用方法,同時GitHub Octicon分別有定義了一大一小的類別可使用,由於這些都是向量檔,因此大小也可自行設定。
梅問題-《GitHub Octicons》可商業用免費ICON圖示下載


Step4
接著開啟網頁,再將CSS引用到網頁中,並引用所需的ICON圖示名稱。
梅問題-《GitHub Octicons》可商業用免費ICON圖示下載


Step5
這樣就可看到剛所使用的ICON圖示啦!
梅問題-《GitHub Octicons》可商業用免費ICON圖示下載


Step6
由於是向量格式,因此可自行的定義所需的圖示大小、色彩。
梅問題-《GitHub Octicons》可商業用免費ICON圖示下載


Step7
由於是向量格式,因此任意的改變圖示大小,也不會失真,同時GitHub Octicon還蠻漂亮的,因此身為網設的你也趕快來下載囉!
梅問題-《GitHub Octicons》可商業用免費ICON圖示下載