決済関係の無料アイコンフォント集「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>内に以下のように記述します。

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

WordPress子テーマの場合

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

親テーマをカスタマイズして利用する場合はget_stylesheet_directory_uri関数をget_template_directory_uriに変更してください。
WordPressの作法的に言えば、wp_enqueue_style関数を用いてスタイルシートを呼び出した方が良いかもしれません。詳しい使い方は関数名で検索してください。

HTMLコードの記述

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

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

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

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

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

動作確認

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

 

 

 

 

 

 

 

 

 

 

 

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

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

PaymentFont Sample

まとめ

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

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

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