學承電腦中壢分校

小編:快來發揮你的想像力吧!

還記得嗎？GitHub 之前將網站前端 CSS 設計框架開放原始碼釋出為 Primer 專案，為廣大開發者提供了更大的靈活性，而最近更把 GitHub 使用的圖示一併整理後釋出，推出完全免費、可自由下載使用的 Octicons。讓我想起前段時間 Google 也釋出數百個向量圖示，並放到 GitHub 網站上供開發者自由下載，這些圖示的設計都相當簡潔，而且辨識度高，很適合用於應用程式或網站開發。

GitHub 釋出的 Octicons 圖示集收錄 150 個以上常用標誌，同時也是 GitHub 網站使用的圖示，如果需要，可以免費下載、並將它們自由套用到自己的專案開發。

Octicons 提供包括 TTF、CSS 檔在內等多種檔案格式，若要在自己的電腦上使用圖示，可以選擇把 TTF 字型檔安裝進去，若要用於網頁或應用程式開發，只要載入 Octicons 的樣式檔（CSS），以調用方式把圖示的特定名稱寫進去，即可產生特定圖示。

根據網站上的說明，Octicons 在 16px 大小的倍數上可獲得最佳的效果。

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

使用教學

STEP 1

開啟 Octicons 網站後，可以從首頁預覽這套圖示的呈現效果，點選上方的「Download Octicons」按鈕來下載完整圖示包。

STEP 2

如果不知道怎麼載入圖示，可以先參考 Usage 頁面說明，簡單來說，若你要在網頁內使用某個圖示，先把下載的 Octicons 相關檔案（包括 CSS 檔）上傳、由原始碼載入，然後把該圖示頁面的程式碼範例複製下來，貼到網站裡就能夠使用。

這是最基本的用法，當然還有更多的用法，總之檔案都在圖示包裡面，下載後就能運用。

STEP 3

GitHub Octicons 的使用方法（Usage）頁面還頗詳細的，若你要在自己的電腦上使用這套圖示的話，只要下載、解壓縮，把 TTF 字型檔安裝到系統內即可。如果是在你的開發專案上使用，則可以把 CSS 樣式表載入、使用 HTML 語法來調用特定圖示。