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

梅問題-「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」用膩了扁平圖示嗎?改用線型圖示簡潔又具設計感

相關文章

「Dropbox Paper」不但支援網頁原始碼高亮模式,甚至還可加註解

「Dropbox Paper」不但支援網頁原始碼高亮模式,甚至還可加註解

「Kaboompics」可商用無驗證高畫質圖片素材免費下載

「Kaboompics」可商用無驗證高畫質圖片素材免費下載

免費下載!Apple推出五款年味十足的農曆新年桌布

免費下載!Apple推出五款年味十足的農曆新年桌布

網設必備!「lorempixel」免費網頁假圖線上隨機產生器

網設必備!「lorempixel」免費網頁假圖線上隨機產生器

「Templated」八百多個高質感可商用的網頁版型免費下載

「Templated」八百多個高質感可商用的網頁版型免費下載





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

近期講座

近期講座

更多講座