クレジットカードや決済システムなど、ショッピングサイト用のWebフォント素材 -Payment Webfont

クレジットカードや決済システムのアイコン素材はよく見かけますが、ベクターで手軽に扱えるちょっと珍しいWebフォント素材を紹介します。

Mastercard, VISAをはじめ、Amazon, Google Wallet, Paypalも揃ってます。あと、JCBもあるのは嬉しいですね。

サイトのキャプチャ

Payment Webfont
Payment Webfont- GitHub

フォントはベクターなので、サイズやカラーなど自由に変更して表示できます。

サイトのキャプチャ

アイコンは全部で36種類、Mastercard, VISA, Amex, JCBなどのクレジットカードをはじめ、Amazon, Google Wallet, Paypalなどのウェブ決済も揃っています。

  • Mastercard
  • Maestro
  • Visa
  • Visa Electron
  • American Express
  • Postepay
  • Cartasì
  • Diners Club
  • Discover
  • Union Pay
  • Electronic Cash
  • TrustE
  • Amazon
  • JCB
  • Google Wallet
  • Stripe
  • Square
  • Ogone
  • VeriSign
  • Bitcoin (2 glyphs)
  • Ripple
  • Sofortüberweisung
  • Gittip
  • Flattr
  • Skrill Moneybookers
  • Cartes Bancaires CB
  • Western Union
  • Clickandbuy
  • Paypal (old and new logo)
  • iDeal
  • Paysafecard
  • Braintree

使い方は簡単です。
Webフォントをスタイルシートでセットします。

<head>
  
  <style>
  @font-face {
    font-family: 'payment-webfont';
    src: url('fonts/payment-webfont.eot');
  }
  </style>
</head>

フォーマットは4種類、fontsからダウンロードできます。

  • .eot
  • .svg
  • .ttf
  • .woff

各フォントは、i要素やspan要素にclassを指定して配置します。

<!-- Mastercard -->
<i class="pw pw-mastercard"></i>

<!-- VISA -->
<i class="pw pw-visa"></i>

ライセンスはCC0 1.0で、個人でも商用でも無料で利用できます。詳しくはライセンスをご覧ください。

top of page

©2017 coliss