發表新文章

. . . . . . . . . . . . . . . .

Perfect Icons 社群網站分享按鈕產生器

876天 18小時 56分鐘前

來源: 原創

本文同時發佈到:Perfect Icons Perfect Icons圖片 Perfect Icons是什麽 Perfect Icons圖示 Perfect Icons教學 即時通訊





Perfect Icons 社群網站分享按鈕產生器
Perfect Icons 超棒社交網站按鈕產生器!三步驟快速加入圖示、CSS 語法教學
Perfect Icons 這個網站來產生像是 Twitter、Facebook、Google+、Pinterest、Linkedin...等等在內的社群網站分享按鈕,不僅可以自己調整按鈕的大小、圓角、距離、顏色,還可即時預覽、自動產生語法,讓你輕鬆地連結到自己的網站上。
Perfect Icons教學:

STEP 1
Perfect Icons 不是一個圖示包,更精確地說它應該是「社交網站按鈕產生器」,畢竟這些按鈕在製作成多種字型和向量圖格式後,要利用程式碼來寫進網站,並不是每個人都知道該怎麼做。利用 Perfect Icons 在網頁內把相關設定調整好,即時預覽,沒問題後將產生的程式碼加入自己的網站就可以加入圖示。

開啟 Perfect Icons 後,可以發現它有兩部分,左側是設定項目、右側為產生程式碼。

STEP 2
先在設定項目調整按鈕大小、圓角、距離、顏色等等,比較酷的是還能利用 CSS3 來加入動態效果(Hover Effects),這些都不用我們自己寫程式碼,棒吧?

記得把底下的社交網站鏈結設定進去,預設有 Facebook、Twitter、Google+ 等常見的社群網路服務,你可以依照需要來調整排序,或將用不到的刪除。

STEP 3
Perfect Icons 不只有提供這六種社交網路按鈕,從底下點開可以找到更多,如果你想顯示的按鈕比較特殊,可以在這裡找找看有沒有你需要的。點選後它就會被加入上面,前面步驟已經教過大家怎麼調整順序、設定鏈結。

STEP 4
設定完後,找到「Usage」的使用說明,其實不會太難使用,別被它嚇到了!首先依照第一個步驟把 Socicon.zip 這個檔案下載下來解壓縮,可以取得 eot、woff、ttf 和 svg 等所需檔案,在設定時把檔案先上傳到你的主機上。

然後將第二步驟產生的 CSS 檔加入你網站的 CSS 檔裡,這裡有個要注意的地方,就是程式碼裡 src: url(‘PATH_TO/ 路徑要改成你剛才上傳檔案的路徑。

最後,把第三步驟的 HTML 代碼放入網站內要顯示社交網站按鈕的位置,如果你剛才的 CSS 路徑沒有設定錯誤的話,就能看到美麗的 Perfect Icons 了!是不是很精簡呢?

值得一試的三個理由:

直接從網站上設定按鈕,即可產生 HTML 和 CSS 程式碼
圖示已設計為 eot、woff、ttf 和 svg 等格式
利用 CSS3 來產生按鈕動態效果(Hover Effects)
網站名稱:Perfect Icons
網站鏈結:http://perfecticons.com/


即時通訊
對不起,您所在的分組沒有發表評論的權限!