質問

テキストタイプの入力ボックスにグリフィコンを追加するにはどうすればよいですか？例えば、ユーザー名の入力ボックスに'icon-user'を表示させたいのですが、以下のような感じです。

解決方法は？

Bootstrapを使わないで。

Bootstrapについては後述しますが、これを自分で行うための基本的なCSSの考え方を説明します。 以下のように ヒゲの指摘 アイコンをinput要素の中に絶対配置することで、CSSでこれを行うことができます。 それから、テキストがアイコンに重ならないように、左右にパディングを追加します。

そこで、以下のようなHTMLの場合。

<div class="inner-addon left-addon">
    <i class="glyphicon glyphicon-user"></i>
    <input type="text" class="form-control" />
</div>

以下のCSSでグリフを左寄せ、右寄せにすることができます。

/* enable absolute positioning */
.inner-addon { 
    position: relative; 
}

/* style icon */
.inner-addon .glyphicon {
  position: absolute;
  padding: 10px;
  pointer-events: none;
}

/* align icon */
.left-addon .glyphicon  { left:  0px;}
.right-addon .glyphicon { right: 0px;}

/* add padding  */
.left-addon input  { padding-left:  30px; }
.right-addon input { padding-right: 30px; }

プランカーでのデモ

備考 : これは、あなたが グリフィコン でも同じように動作します。 フォントオーサム .
FA の場合は、次のように置き換えるだけです。 .glyphicon を .fa

Bootstrapで。

として バッファが指摘する を使用することで、Bootstrapの中でネイティブに実現することができます。 オプションのアイコンを使用したバリデーション状態 . これは .form-group 要素のクラスは .has-feedback のクラスで、アイコンは .form-control-feedback .

最も単純な例は、次のようなものです。

<div class="form-group has-feedback">
    <label class="control-label">Username</label>
    <input type="text" class="form-control" placeholder="Username" />
    <i class="glyphicon glyphicon-user form-control-feedback"></i>
</div>

プロフェッショナル :

• さまざまなフォームタイプ（Basic、Horizontal、Inline）をサポートします。
• 異なるコントロールサイズ（デフォルト、スモール、ラージ）をサポートします。

短所 :

• のサポートは含まれていません。 左 アイコンの整列

短所を克服するために、私はこのようにまとめました。 プルリクエスト と、左揃えのアイコンをサポートするための変更点です。 比較的大きな変更であるため、将来のリリースまで見送られましたが、これらの機能が必要な場合は 今日 簡単な実装ガイドがあります。

を含めるだけです。 これらのフォームの変更はcssで (また、下部の隠しスタックスニペットによってインライン化されます)
<サブ *LESS : あるいは、もしあなたが lessで構築 は、以下の通りです。 lessでフォームを変更する

そして、あとはクラス .has-feedback-left を持つ任意のグループ上で .has-feedback をクリックすると、アイコンが左揃えになります。

フォームの種類、コントロールのサイズ、アイコンのセット、ラベルの見え方など、さまざまなHTMLの構成が考えられるので、それぞれの順列に対して正しいHTMLを示すテストページと、ライブデモを作成しました。

Plunkerでのデモはこちらです。

追伸 friziさんからの提案 を追加することで pointer-events: none; は bootstrapに追加された

お探しのものは見つかりませんでした ? 似たような質問を試してみてください。

• 入力ボックスにTwitter Bootstrapのアイコンを追加する
• テキストボックスbootstrapの近くに検索アイコンを配置

左揃えのフィードバックアイコン用CSSの追加

.has-feedback .form-control {
  padding-right: 34px;
}
.has-feedback .form-control.input-sm,
.has-feedback.form-group-sm .form-control {
  padding-right: 30px;
}
.has-feedback .form-control.input-lg,
.has-feedback.form-group-lg .form-control {
  padding-right: 46px;
}
.has-feedback-left .form-control {
  padding-right: 12px;
  padding-left: 34px;
}
.has-feedback-left .form-control.input-sm,
.has-feedback-left.form-group-sm .form-control {
  padding-left: 30px;
}
.has-feedback-left .form-control.input-lg,
.has-feedback-left.form-group-lg .form-control {
  padding-left: 46px;
}
.has-feedback-left .form-control-feedback {
  left: 0;
}
.form-control-feedback {
  line-height: 34px !important;
}
.input-sm + .form-control-feedback,
.form-horizontal .form-group-sm .form-control-feedback {
  width: 30px;
  height: 30px;
  line-height: 30px !important;
}
.input-lg + .form-control-feedback,
.form-horizontal .form-group-lg .form-control-feedback {
  width: 46px;
  height: 46px;
  line-height: 46px !important;
}
.has-feedback label.sr-only ~ .form-control-feedback,
.has-feedback label.sr-only ~ div .form-control-feedback {
  top: 0;
}
@media (min-width: 768px) {
  .form-inline .inline-feedback {
    position: relative;
    display: inline-block;
  }
  .form-inline .has-feedback .form-control-feedback {
    top: 0;
  }
}
.form-horizontal .has-feedback-left .form-control-feedback {
  left: 15px;
}