Font Awesomeで「目のマーク」を使ったパスワード表示切り替え機能の実装

プロコム開発チーム

Contents

1 はじめに
2 📦 事前準備：Font Awesomeの読み込み
3 🧩 HTMLのマークアップ
4 🎨 CSSで見た目を調整
5 ⚙ JavaScriptで表示切り替え処理
6 ✅ 完成形のまとめ
7 🚀 おわりに

はじめに

ログインや新規登録画面でよく見かける「👁 パスワード表示/非表示切り替えアイコン」。
今回は、Font Awesome 6.4.0を使って、スタイリッシュにこの機能を導入する方法を紹介します。

📦 事前準備：Font Awesomeの読み込み

HTMLファイルの<head>内に以下を追加してください：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

これで fa-eye や fa-eye-slash などのアイコンが使えるようになります。

🧩 HTMLのマークアップ

<div class="password-wrapper">
  <input type="password" id="passwordInput" placeholder="パスワードを入力" />
  <i class="fa-solid fa-eye" id="togglePassword"></i>
</div>

ここでは、

input type="password" で非表示の入力欄を作成
iタグにFont Awesomeの fa-eye クラスを付けて、目のアイコンを表示します

🎨 CSSで見た目を調整

.password-wrapper {
  position: relative;
  max-width: 300px;
}

.password-wrapper input {
  width: 100%;
  padding: 10px;
  padding-right: 40px;
  font-size: 1rem;
}

.password-wrapper i {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #666;
}

このCSSで、目のアイコンをパスワード入力欄の右端に重ねて表示します。

⚙ JavaScriptで表示切り替え処理

const passwordInput = document.getElementById('passwordInput');
const togglePassword = document.getElementById('togglePassword');

togglePassword.addEventListener('click', () => {
  const isHidden = passwordInput.type === 'password';
  passwordInput.type = isHidden ? 'text' : 'password';

  // アイコンの切り替え
  togglePassword.classList.toggle('fa-eye');
  togglePassword.classList.toggle('fa-eye-slash');
});

ポイント：

type="password" → type="text" に変更
fa-eye ↔ fa-eye-slash でアイコンを切り替え

✅ 完成形のまとめ

HTML：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

<div class="password-wrapper">
  <input type="password" id="passwordInput" placeholder="パスワードを入力" />
  <i class="fa-solid fa-eye" id="togglePassword"></i>
</div>

CSS：

.password-wrapper {
  position: relative;
  max-width: 300px;
}

.password-wrapper input {
  width: 100%;
  padding: 10px;
  padding-right: 40px;
}

.password-wrapper i {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

JavaScript：

const passwordInput = document.getElementById('passwordInput');
const togglePassword = document.getElementById('togglePassword');

togglePassword.addEventListener('click', () => {
  const isHidden = passwordInput.type === 'password';
  passwordInput.type = isHidden ? 'text' : 'password';
  togglePassword.classList.toggle('fa-eye');
  togglePassword.classList.toggle('fa-eye-slash');
});