close
Blogtrottr
♣梅問題‧教學網【Minwt】♣
Photoshop教學|影像後製精修|商品攝影|美食攝影 |網頁設計教學 
網設必備－《Typicons》上百個網頁常用小圖示任你用
Sep 16th 2014, 00:00, by admin

梅問題－網設必備《Typicons》上百個網頁常用小圖示免費任你用
　　當今天在製作網頁時，為了讓網頁的區塊更直覺，都會在區塊中，加入一些圖示，除了讓版面看起來更生動外，也可讓使用者操作時更直覺，但有些既定印的圖示，其實倒不用都自已畫，網路上已有許多免費的資源可使用，且都還是向量檔，因此無論放大或縮小，都不用擔心影像會失真 ， 同時還可透過CSS來設定圖示的顏色， 而這些小圖示其實只是一個文字檔， 裡面的圖示相當的多元，從一般的指標、影音、社群、文件......一盡俱全，因此身為網頁設計人員，怎能錯過呢?現在就一塊來看看，怎麼下載與使用吧!
Typicons：
網站名稱：Typicons
網站網址：http://typicons.com/
進入Typicons網站後，點一下Typicons on GitHub選項。
梅問題－網設必備《Typicons》上百個網頁常用小圖示免費任你用
接著再點右下的Download ZIP鈕。
梅問題－網設必備《Typicons》上百個網頁常用小圖示免費任你用
下載解壓後，進到src/font的資料夾後，再雙響demo.html 。
梅問題－網設必備《Typicons》上百個網頁常用小圖示免費任你用
這時候就會看到，所有的小圖示。
梅問題－網設必備《Typicons》上百個網頁常用小圖示免費任你用
當要使用時，只要在前，引用css檔再把字型給載入。
梅問題－網設必備《Typicons》上百個網頁常用小圖示免費任你用
接著回到demo.html的頁面後，開啟網頁開發者工具，選取一下所要的圖示，再對著已選到的網頁標籤，按滑鼠右鍵，選擇Copy as HTML 。
梅問題－網設必備《Typicons》上百個網頁常用小圖示免費任你用
把剛的html貼回頁面中 。
梅問題－網設必備《Typicons》上百個網頁常用小圖示免費任你用
這樣就可看到啦!
梅問題－網設必備《Typicons》上百個網頁常用小圖示免費任你用
由於它是文字檔，因此當要改變大小時，則是用font-size與color來改變顏色，是不是超方便的呀!
梅問題－網設必備《Typicons》上百個網頁常用小圖示免費任你用
引用網址： ※如有發現掉圖或檔案無法下載，請由回應區留言告知，將會盡速處理！謝謝。
※本站採用CC授權請勿全文轉貼本站文章，歡迎「部份引用」與介紹，並註明出處，謝謝。
文章標籤：Typicons , ui css , web ui , 網頁必備

This entry passed through the Full-Text RSS service - if this is your content and you're reading it on someone else's site, please read the FAQ at fivefilters.org/content-only/faq.php#publishers.
Scottish readers: Undecided about the referendum? Please read Scottish Independence, Power And Propaganda.
You are receiving this email because you subscribed to this feed at blogtrottr.com.

If you no longer wish to receive these emails, you can unsubscribe from this feed, or manage all your subscriptions
arrow
arrow
    全站熱搜
    創作者介紹
    創作者 xals2q 的頭像
    xals2q

    2015花千骨線上看tv 2016花千骨 花千骨線上看drama q 花千骨線上看drama 仙俠奇緣之花千骨線上看 花千骨線上看tv543 電視劇花千骨線上看 花千骨線上看第一集

    xals2q 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄