決済関係の無料アイコンフォント集「PaymentFont」の使い方

決済関係ロゴの無料アイコンフォント集「PaymentFont」の紹介です。

スポンサーリンク
レクタングル(大)広告

PaymentFontとは

PaymentFont — A sleek Payment Webfont

PaymentFontは、クレジットカード決済や、決済代行サービスのロゴばかりを集めた無料で使えるアイコンフォント集です。

例えば、こんな感じの滑らかなロゴを表示させることができるWEBアイコンフォントです。

 

 

 

現在95種類の決済ロゴが利用できるようになっています。

PaymentFont(全種類)

PaymentFontの使い方

PaymentFontを利用するには、以下の手順で利用することができます。

  1. PaymentFontファイルのダウンロード
  2. PaymentFontファイルの設置
  3. PaymentFontファイルの呼び出し
  4. HTMLコードの記述

PaymentFontファイルのダウンロード

まずは、PaymentFontサイトから「Download」ボタンを押して必要なファイルをダウンロードします。

PaymentFontからファイルをダウンロード

ダウンロードを終えると「PaymentFont-master.zip」というファイルがダウンロードされるので、解凍(展開)しておきます。

PaymentFont-master.zip

PaymentFontファイルの設置

解凍(展開)を終えると「PaymentFont-master」というフォルダができます。

PaymentFont-master

僕の場合は、上記フォルダを「paymentfont」に変更してプロジェクトフォルダ内に設置します。

paymentfont

WordPressの場合だと、テーマフォルダか、子テーマフォルダ内にアップロードします。

PaymentFontファイルの呼び出し

次に、PaymentFontフォルダ内のCSSファイルを呼び出します。

<head></head>内に以下のように記述します。

<link rel="stylesheet" type="text/css" href="PATH_TO/paymentFont/css/paymentfont.min.css">

PATH_TO部分は、ディレクトリへのパスを入力してください。

WordPress子テーマの場合

WordPress子テーマ内で呼び出す場合は、header.phpあたりにある<head></head>内に以下のように記述してください。

<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/paymentfont/css/paymentfont.min.css">
親テーマをカスタマイズして利用する場合はget_stylesheet_directory_uri関数をget_template_directory_uriに変更してください。
WordPressの作法的に言えば、wp_enqueue_style関数を用いてスタイルシートを呼び出した方が良いかもしれません。詳しい使い方は関数名で検索してください。

HTMLコードの記述

最後に、決済ロゴを表示したい場所に以下のように記述すれば、アイコンフォントが表示されます。

<i class="pf pf-visa"></i>

<i class="pf pf-paypal"></i>

<i class="pf pf-amazon"></i>

決済ロゴ固有のクラス名を取得したい場合は、PaymentFontから、利用したいロゴをクリックします。

クラス名を取得したいロゴをクリック

すると、クリップボードにクラス名が貼り付けられます。

ロゴをクリックするとクラス名がクリップボードに貼り付けされる

動作確認

試しに、日本でもおなじみのロゴ(僕でも知っているロゴ)をいくつか貼り付けてみると以下のようになります。
 

 

 

 

 

 

 

 

 

 

 

 

サンプルはCSSで文字サイズを大きくしてあります。

他にも、border-radius等のCSSと組み合わせることで、このような表示方法も可能です。

PaymentFont Sample

まとめ

こんな感じで、PaymentFontを利用すれば、決済ロゴのアイコンフォントを、手軽にサイトに組み込むことができます。

ただ、実際使うとなっても、画像でも良い気もしますし、それほど使いどころはないかもしれません。

ただ、Eコマースサイトを作るときなどで、「どうしてもWEBアイコンフォントを使いたい」とか「決済ロゴをCSSで自由に変化させたい」なんてことがあるとすれば便利かもしれません。