Bootstrap Glyphicon で入力ボックスのユーザビリティを向上させる

2024-04-23

Bootstrap Glyphicon を入力ボックスに追加する方法

方法

Glyphicon を入力ボックスに追加するには、以下の手順に従います。

入力ボックスに .form-group クラスを追加します。
Glyphicon に .glyphicon および Glyphicon クラス (例: .glyphicon-search) を追加します。
Glyphicon を入力ボックスの before または after 疑似要素に配置します。

例

以下のコードは、検索アイコン付きの入力ボックスを作成します。

<div class="form-group">
  <input type="text" class="form-control" placeholder="Search">
  <span class="glyphicon glyphicon-search form-control-feedback"></span>
</div>

説明

.form-group クラスは、入力ボックスとそのラベルをグループ化するために使用されます。
.glyphicon クラスは、Glyphicon アイコンを識別するために使用されます。
.glyphicon-search クラスは、検索アイコンを表します。
form-control-feedback クラスは、Glyphicon アイコンを適切に配置するために使用されます。

Glyphicon アイコンをボタン内に配置することもできます。
Glyphicon アイコンをカスタム CSS クラスを使用してスタイル設定することもできます。

注意事項

Bootstrap 4 では、Glyphicon は Font Awesome に置き換えられています。Font Awesome を使用するには、別途ライブラリをインストールする必要があります。

関連用語

CSS: カスケーディングスタイルシート
Twitter Bootstrap: Web サイトの開発を簡素化する CSS フレームワーク
Glyphicon: Bootstrap フレームワークに含まれるアイコンセット
Font Awesome: 無料のオープンソースアイコンライブラリ

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Glyphicon Example</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3JU61rBDZMXOzsFOz4TAoURy4DD+qYj5t/Kbpqyl/9wY2QjWqA+dwj3r7p" crossorigin="anonymous">
</head>
<body>
  <div class="container">
    <h1>Bootstrap Glyphicon Example</h1>
    <div class="form-group">
      <input type="text" class="form-control" placeholder="Search">
      <span class="glyphicon glyphicon-search form-control-feedback"></span>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXsvmniq5W0YkGC2qjsj6Y89dqQzQrotabb7079as4c20qRDz4oQIdRHBAqC+EX" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9PoPh+Q+gOTn8wR9Y7z6s7qU4p4Kq4qW8Q8AyJTZ2t8/k2p055DF3f1qX+CF2i" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-Fn+QzVLN6QfX69lQTTQ1F89f0zKV6Qkqy+V3oYvZt663b833bRFqU4b5cU7L96A" crossorigin="anonymous"></script>
</body>
</html>

CSS

/* カスタム CSS */

JavaScript

/* カスタム JavaScript */

このコードは、以下の要素を作成します。

Bootstrap グリッドコンテナー
見出し (<h1>)
入力グループ (div.form-group)
入力ボックス (input.form-control)
検索アイコン (span.glyphicon.glyphicon-search.form-control-feedback)

実行

このコードを HTML ファイルに保存し、Web ブラウザで開くと、以下のようになります。

入力ボックスの右側に検索アイコンが表示されます。

カスタマイズ

このコードは、ニーズに合わせてカスタマイズできます。

入力ボックスのプレースホルダーテキストを変更するには、placeholder 属性を変更します。
入力ボックスのサイズを変更するには、form-control クラスに input-sm または input-lg クラスを追加します。

その他のリソース

Bootstrap Glyphicon を入力ボックスに追加する方法: その他の方法

ボタンを使用すれば、入力ボックスの横に検索アイコンを表示することができます。

<div class="form-group">
  <input type="text" class="form-control" placeholder="Search">
  <button type="button" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
</div>

.btn {
  margin-left: -10px;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
}

.btn:hover {
  background-color: #e6e6e6;
}

検索アイコン付きボタン (button.btn.btn-default)

カスタム CSS を使用すれば、Glyphicon アイコンを直接入力ボックス内に配置することができます。

<div class="form-group">
  <input type="text" class="form-control" placeholder="Search">
</div>

.form-control {
  position: relative;
  padding-right: 35px;
}

.form-control::after {
  content: '\f002'; /* Glyphicon search icon (Unicode code point) */
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  font-size: 16px;
  pointer-events: none;
}

入力ボックスに右パディングを追加します。
Glyphicon アイコンを ::after 疑似要素を使用して追加します。
アイコンを適切な位置に配置します。

Font Awesome を使用する

<div class="form-group">
  <input type="text" class="form-control" placeholder="Search">
  <span class="fa fa-search form-control-feedback"></span>
</div>