網設必備-《Typicons》上百個網頁常用小圖示任你用

梅問題-網設必備《Typicons》上百個網頁常用小圖示免費任你用
  當今天在製作網頁時,為了讓網頁的區塊更直覺,都會在區塊中,加入一些圖示,除了讓版面看起來更生動外,也可讓使用者操作時更直覺,但有些既定印的圖示,其實倒不用都自已畫,網路上已有許多免費的資源可使用,且都還是向量檔,因此無論放大或縮小,都不用擔心影像會失真 , 同時還可透過CSS來設定圖示的顏色, 而這些小圖示其實只是一個文字檔, 裡面的圖示相當的多元,從一般的指標、影音、社群、文件......一盡俱全,因此身為網頁設計人員,怎能錯過呢?現在就一塊來看看,怎麼下載與使用吧!

Typicons:
網站名稱:Typicons
網站網址:http://typicons.com/

進入Typicons網站後,點一下Typicons on GitHub選項。
梅問題-網設必備《Typicons》上百個網頁常用小圖示免費任你用
接著再點右下的Download ZIP鈕。
梅問題-網設必備《Typicons》上百個網頁常用小圖示免費任你用
下載解壓後,進到src/font的資料夾後,再雙響demo.html
梅問題-網設必備《Typicons》上百個網頁常用小圖示免費任你用
這時候就會看到,所有的小圖示。
梅問題-網設必備《Typicons》上百個網頁常用小圖示免費任你用
當要使用時,只要在</head>前,引用css檔再把字型給載入。
梅問題-網設必備《Typicons》上百個網頁常用小圖示免費任你用
接著回到demo.html的頁面後,開啟網頁開發者工具,選取一下所要的圖示,再對著已選到的網頁標籤,按滑鼠右鍵,選擇Copy as HTML
梅問題-網設必備《Typicons》上百個網頁常用小圖示免費任你用
把剛的html貼回頁面中 。
梅問題-網設必備《Typicons》上百個網頁常用小圖示免費任你用
這樣就可看到啦!
梅問題-網設必備《Typicons》上百個網頁常用小圖示免費任你用
由於它是文字檔,因此當要改變大小時,則是用font-size與color來改變顏色,是不是超方便的呀!
梅問題-網設必備《Typicons》上百個網頁常用小圖示免費任你用

相關文章

「HTML5 UP」高品質、可商用的RWD自適應網頁版型免費下載

「HTML5 UP」高品質、可商用的RWD自適應網頁版型免費下載

「Bestofthemes」RWD自適應網頁版型大集合,一塊來挖寶吧!

「Bestofthemes」RWD自適應網頁版型大集合,一塊來挖寶吧!

「The Noun Project」免費向量圖示搜尋器,可將圖示拖曳到繪圖軟體中

「The Noun Project」免費向量圖示搜尋器,可將圖示拖曳到繪圖軟體中

「Convertio」線上萬用一鍵轉檔平台,支援「文件、影音、圖片」

「Convertio」線上萬用一鍵轉檔平台,支援「文件、影音、圖片」

「DaVinci Resolve 達文西」國內外電影公司最愛的專業剪輯軟體免費下載

「DaVinci Resolve 達文西」國內外電影公司最愛的專業剪輯軟體免費下載





回應本篇 »

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

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

共 3 梅留言