Perfect Icons 超棒社交網站按鈕產生器！三步驟快速加入圖示、CSS 語法教學 - telegram 下載

Perfect Icons 最棒社交網站按鈕產生器！三步驟快速加入圖示和 CSS 語法教學 — （Copyright: art1o1 / 123RF Stock Photo）

不知道大家有沒有發現免費資源網路社群開啟速度變快了呢？最近除了尋找新的網站空間外，我們也針對一些網頁技術進行細部調整，目標是讓每位讀者都能以最快速度開啟網頁並獲得理想的瀏覽效果。我想藉這篇文章介紹目前使用的分享按鈕，它兼具輕量、速度且透過 CSS 語法即可產生等特性，如果你也是網站經營者，或許這些按鈕可以為你帶來更好的速度及效能。

無論你是不是使用 WordPress 架站，我想現今網站都與社群平台脫離不了連結，每個網站管理者盡可能經營其他社群平台，例如 Facebook、Twitter 並設法把流量引導回網站上。為了讓更多人發現你，通常我們也會在網站上放入各種社交網路按鈕或相關鏈結，有興趣的讀者能透過其他管道找到你或你所經營的網站品牌。

雖然網路上有不少的社群網路分享按鈕服務，但根據我的實際測試經驗，這些聚合式按鈕多半很笨重，用 js 載入方式雖然看起來很方便，卻拖慢網站整體速度和網頁大小（可利用 Pingdom Tools 或 GTmetrix 進行測試），同時載入了許多或許用不到的資源，實在不必要因為幾個按鈕而多裝一個外掛功能。

在我測試後，終於找到了最好的解決辦法，那就是 Perfect Icons！

早先大家會選擇用圖片方式來呈現這些按鈕，但有個問題：如果有七個按鈕，那就必須分別載入七張圖片，效益很差，進階方法是利用 CSS Image Sprites，將圖片全部組合成同一張，再透過 CSS 圖形大小、位置等設定方式，把需要的部分單獨顯示，這麼做就只要對伺服器發出一次請求，大幅減少伺服器的負擔並提升開啟速度。

本文要介紹的 Perfect Icons 就是利用這個原理來產生社交網站按鈕，不同的是它已將這些圖示給開發為 eot、woff、ttf 和 svg 格式，檔案大小更精簡，而且能依照使用者的需要來調整圖示尺寸而不會影響解析度（因此也就不用針對不同的按鈕大小來設計出不一樣的圖片尺寸）。

網站名稱：Perfect Icons
網站鏈結：https://perfecticons.com/

使用教學

STEP 1

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

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