Font Awesome のアイコンを使ってカードデザインを作る方法

Font Awesomeのアイコンを活用して、見やすく印象的な「選ばれる理由」カードデザインを作成する方法を紹介します。アイコン＋見出し＋説明文の組み合わせで、信頼感のあるデザインを誰でも簡単に実装できます。

1 実装のポイント

Font Awesomeを読み込んで、カード型のレイアウトを作ります。各カードはアイコン・タイトル・テキストで構成され、Flexboxで整列。影や角丸で立体感を出します。

2 HTMLを埋め込む

<section class="reason-section">
  <h2>選ばれる理由</h2>
  <div class="reason-grid">
    <div class="reason-item">
      <i class="fa-solid fa-user-tie"></i>
      <h3>豊富な営業経験</h3>
      <p>大学卒業後に20年間の営業経験を生かした地に足の着いた信頼の実績</p>
    </div>
    <div class="reason-item">
      <i class="fa-solid fa-file-contract"></i>
      <h3>料金体系</h3>
      <p>事前見積もり制で安心。お客様に納得いただける明朗価格をお約束します。</p>
    </div>
    <div class="reason-item">
      <i class="fa-solid fa-handshake"></i>
      <h3>相談無料</h3>
      <p>どんな些細なことでもお気軽にご相談ください。相談は無料です。</p>
    </div>
  </div>
</section>
    

3 functions.php にコードを追加

Font Awesomeを読み込むため、以下をfunctions.phpに追加します。

//-------------------------------------------
// Font Awesomeを読み込むためのコード
//-------------------------------------------
function add_fontawesome_cdn() {
  wp_enqueue_style( 'fontawesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css', array(), '6.5.0' );
}
add_action( 'wp_enqueue_scripts', 'add_fontawesome_cdn' );
    

4 汎用CSS

/* ------------------------------------------------
 * Font Awesomeを使ったカード
 * ---------------------------------------------- */

/* --- 選ばれる理由セクション --- */
.reason-section { /* 全体の余白設定 */
  padding: 80px 20px; /* 上下80px・左右20pxの余白 */
  text-align: center; /* テキスト中央寄せ */
  background: linear-gradient(180deg, #b3e5ff 0%, #ffffff 100%); /* 水色→白のグラデーション背景 */
}

.reason-grid { /* カード群を横並びに配置 */
  display: flex; /* Flexbox使用 */
  flex-wrap: wrap; /* 折り返し許可 */
  gap: 30px; /* カード間の隙間 */
  justify-content: center; /* 中央寄せ配置 */
  margin-top: 40px; /* 上余白 */
}

.reason-item { /* 各カードの基本スタイル */
  width: 280px; /* カード幅 */
  background: #fff; /* 背景色（白） */
  border-radius: 10px; /* 角丸 */
  box-shadow: 0 2px 6px rgba(0,0,0,0.1); /* ふんわりした影 */
  padding: 30px 20px; /* 内側余白 */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* ホバー時のアニメーション */
}

.reason-item:hover { /* ホバー時の動き */
  transform: translateY(-5px); /* 少し上に浮く */
  box-shadow: 0 6px 12px rgba(0,0,0,0.15); /* 影を強調 */
}

.reason-item i { /* Font Awesomeアイコンの見た目 */
  font-size: 36px; /* アイコンサイズ */
  color: #0073aa; /* メインカラー（青） */
  margin-bottom: 10px; /* 下余白 */
}

.reason-item h3 { /* 各項目タイトル */
  color: #004c80; /* 信頼感ある青 */
  font-size: 1.2em; /* 少し大きめ文字 */
  margin-bottom: 8px; /* 下余白 */
}

.reason-item p { /* 説明テキスト */
  font-size: 0.95em; /* やや小さめ文字 */
  color: #333; /* 標準文字色 */
  line-height: 1.6; /* 行間を広めに */
}

/* --- レスポンシブ対応 --- */
@media (max-width: 768px) { /* スマホ・タブレット向け */
  .reason-grid {
    flex-direction: column; /* 縦並びに変更 */
    align-items: center; /* 中央寄せ */
  }
  .reason-item {
    width: 100%; /* カード幅100% */
    max-width: 400px; /* 最大幅400px */
  }
}
    

5 完成イメージ

▶ Font Awesome のアイコンを使ってカードデザインを作る方法

6 代用プラグイン

Font Awesomeを個別で読み込みたくない場合は、以下のプラグインでも対応可能です。

• 「Font Awesome」公式プラグイン
• 「Simple Custom CSS and JS」：HTMLとCSSをページ単位で追加可能

7 まとめ

カード型デザインは、サイトの信頼性を高める視覚的な要素として効果的です。Font Awesomeのアイコンを活用すれば、シンプルながら印象的なレイアウトが実現できます。