1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. 網頁設計
  6. »
  7. 「100+ ET-Line Icons」用膩了扁平圖示嗎?改用線稿圖示簡潔又具設計感

「100+ ET-Line Icons」用膩了扁平圖示嗎?改用線稿圖示簡潔又具設計感

2017/01/18

梅問題-「100+ ET-Line Icons」用膩了扁平圖示嗎?改用線型圖示簡潔又具設計感

  網路上有許多免費的UI圖示資源可用,但大部分都以扁平設計為主,最近梅干逛網時,無意間發現一款以線條為主的UI圖示,這不禁讓梅干想到以前在學校時,曾繪製過一筆畫的指示符號,雖然是以線條來呈現,不像色塊來的那麼的強眼,但每個圖示看起來卻相當的簡潔清爽,同時也讓畫面變得更有特色。


  而這款Et line Icon線型圖示,大約有100個左右,而每個圖示都是平時常會用到,因此用膩了扁平設計圖示的朋友,不妨也改用線稿的圖示設計吧!


Et line Icon

圖示名稱:100+ ET-Line Icons
下載連結:https://github.com/pprince/etlinefont-bower

Step1
進到github網站後,點右上的「Clone or download」鈕,就可將圖示給下載回來。
梅問題-「100+ ET-Line Icons」用膩了扁平圖示嗎?改用線型圖示簡潔又具設計感


Step2
下載回來解壓縮後,只需將「fonts資料夾」與「style.css」放到網頁的專案目錄下就可以了。
梅問題-「100+ ET-Line Icons」用膩了扁平圖示嗎?改用線型圖示簡潔又具設計感


Step3
接著打開index.html後,就會看到100+ ET-Line Icons所提供的圖示,而圖示後方就是該圖示的類別名稱。
梅問題-「100+ ET-Line Icons」用膩了扁平圖示嗎?改用線型圖示簡潔又具設計感


Step4
當要使用時,只需將「style.css」引用到網頁中,再將圖示的名稱複製,並貼到html標籤中的class類別裡,這樣就可正常的顯示啦!
梅問題-「100+ ET-Line Icons」用膩了扁平圖示嗎?改用線型圖示簡潔又具設計感


Step5
這時就會顯示,剛所使用的圖示樣式,是不是線稿圖示也,別有一番風味。
梅問題-「100+ ET-Line Icons」用膩了扁平圖示嗎?改用線型圖示簡潔又具設計感