在需要付費的網站中,通常會在購物車或網頁底部放上付款圖示,代表這裡支援信用卡或其他線上支付管道,例如 PayPal 或 Stripe 等等,當然這些圖案都能在網路找到,而且有著各式各樣的設計風格,透過圖片編輯軟體自行調整一下馬上符合你的網站,但如果你不想東湊西湊又要花時間修改,直接選用已經準備好的向量圖示集就更簡單了!若你有需要這些支付相關圖示請繼續閱讀下去。
本文要推薦的「PaymentFont」是一款非常實用的免費圖示字型,一共收錄 116 個常見支付相關圖示,例如常見的信用卡 Visa、MasterCard、JCB、American Express,線上金流服務 PayPal、Stripe 或是手機支付例如 Apple Pay、比特幣 Bitcoin 等等,這套圖案不僅完全免費、開放原始碼,還能透過 CSS 語法快速調整大小和顏色。
相關檔案已經全部打包放在 PaymentFont 網站,下載、解壓縮後將 /css
和 /font
兩個資料夾及 paymentfont.min.css
檔案上傳到網站主機就能載入,透過 CSS 樣式來載入你需要的圖示,所有樣式已經放在網站上,可供預覽複製。
網站名稱:PaymentFont
網站鏈結:https://paymentfont.com/
使用教學
STEP 1
開啟 PaymentFont 網站後,點選「Download」可下載這個專案的完整檔案,包括 CSS、字型(.ttf
、.eot
、.svg
和 .woff
)等等相關檔案。
STEP 2
從 PaymentFont 網站首頁可以預覽這些圖示,總數約有 116 個,包括各種常見信用卡、線上支付平台、加密貨幣和行動支付,每個圖案下方的名稱是載入圖案使用的類別名稱,點選圖示可快速複製。
依照 PaymentFont 網站上方說明,只要複製、上傳 /css
和 /font
資料夾,然後在網頁中載入 paymentfont.min.css
樣式表就能使用你需要的支付圖示,例如以 <i>
標籤加入對應的類別名稱來載入對應的圖示。
值得一試的三個理由:
- 免費開源圖示集,收錄 116 種常用付款方式圖案
- 載入 CSS 和字型檔案就能透過原始碼載入特定圖示
- 可以在樣式表中調整大小、顏色等相關設定