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

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

PaymentFontとは

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

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

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

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

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

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

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

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

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

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

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

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

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

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関数を用いてスタイルシートを呼び出した方が良いかもしれません。詳しい使い方は関数名で検索してください。

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

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

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

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

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

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

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

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

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

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

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

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