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

Post on:2014年5月13日

sponsors

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

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

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

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

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

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

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

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

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

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

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