
網路上有許多免費的UI圖示資源可用,但大部分都以扁平設計為主,最近梅干逛網時,無意間發現一款以線條為主的UI圖示,這不禁讓梅干想到以前在學校時,曾繪製過一筆畫的指示符號,雖然是以線條來呈現,不像色塊來的那麼的強眼,但每個圖示看起來卻相當的簡潔清爽,同時也讓畫面變得更有特色。
而這款Et line Icon線型圖示,大約有100個左右,而每個圖示都是平時常會用到,因此用膩了扁平設計圖示的朋友,不妨也改用線稿的圖示設計吧!
Et line Icon
圖示名稱:100+ ET-Line Icons
下載連結:https://github.com/pprince/etlinefont-bower
下載連結:https://github.com/pprince/etlinefont-bower
Step1
進到github網站後,點右上的「Clone or download」鈕,就可將圖示給下載回來。

Step2
下載回來解壓縮後,只需將「fonts資料夾」與「style.css」放到網頁的專案目錄下就可以了。

Step3
接著打開index.html後,就會看到100+ ET-Line Icons所提供的圖示,而圖示後方就是該圖示的類別名稱。

Step4
當要使用時,只需將「style.css」引用到網頁中,再將圖示的名稱複製,並貼到html標籤中的class類別裡,這樣就可正常的顯示啦!

Step5
這時就會顯示,剛所使用的圖示樣式,是不是線稿圖示也,別有一番風味。