Bootstrap Glyphiconを入力ボックスに追加


340

グリフィコンをテキストタイプの入力ボックスに追加するにはどうすればよいですか?たとえば、次のようなユーザー名入力に「icon-user」を含めたいと思います。

enter image description here


5
これは私の代替ソリューションです(2014の場合)JSFiddle [ jsfiddle.net/rcotrina94/cyCFS/272 ]
Richard Cotrina

パーティーに遅れますが、私の回答をチェックしてください。ブートストラップのみを使用してその効果を取得し、色と境界線を変更するために、2行のCSSを使用しています。回答セクションで説明された他の問題を解決しますstackoverflow.com/a/40945821/2914407
Dheeraj

回答:


755

ブートストラップなし:

すぐに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; }

プランカーでのデモ

CSSスクリーンショット

:これは、グリフィコンを使用していることを前提としていますが、font-awesomeでも同様に機能します。
FAの場合は、単に置き換える.glyphicon.fa


ブートストラップ付き:

バッファが指摘し、これは使用してブートストラップ内でネイティブに行うことができるオプションのアイコンと検証の状態を。これは、.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>

長所

  • さまざまなフォームタイプ(基本、水平、インライン)のサポートが含まれます
  • さまざまなコントロールサイズのサポートが含まれます(デフォルト、スモール、ラージ)

短所

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

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

ただ、含まCSSのこれらのフォームの変更(また、一番下に隠されたスタックスニペットを経てインライン化)
* LESSは別に、あなたがしている場合:以下を経由して構築し、ここだ以内にフォームの変更を

次に、アイコンを左揃えにするために.has-feedback-left、クラスを持つすべてのグループにクラスを含めるだけです.has-feedback

さまざまなフォームタイプ、さまざまなコントロールサイズ、さまざまなアイコンセット、さまざまなラベルの可視性について、可能なHTML設定が多数あるため、各順列の正しいHTMLセットとライブデモを示すテストページを作成しました。

ここにPlunkerのデモがあります

フィードバックのスクリーンショット

PS friziによる追加の提案ブートストラップに追加pointer-events: none;れました

お探しのものが見つかりませんでしたか?これらの同様の質問を試してください:

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


私の編集を参照してください。focusedInputのcssセレクターをより明示的にしました。そうしないと、.input-group-addonによって上書きされます。
ミシェル・ミューラー

@MichelMüller、私はあなたの提案された編集に値が表示されるかどうかわかりません。.focusedInputクラスは後に定義されている.input-group-addonので、時にスタイルシートカスケードダウン、後者のスタイルが優先されなければなりません。これが問題になる原因となったシナリオをより詳しく説明できますか?
KyleMit 2013年

2
「pointer-events:none;」を追加することをお勧めします。アイコンの場合、デフォルトでは入力のフォーカスに干渉するため。
Frizi、

1
@Leandro、確かにそうです!。それはFontAwesomeはあなたがからアップグレードする場合はバージョン4での重大な変更を導入しましたという理由だけだ3.xの4.xでは、あなたは変更する必要が<i class="icon-user"></i>します<i class="fa fa-user"></i>。外部ライブラリの更新を検討している場合は、必ずリリースノートと新しいドキュメントを読んで、アプリに互換性があるかどうか、またはアップグレードする必要があるかどうかを確認してください。
KyleMit 14年


62

公式の方法。カスタムCSSは不要:

<form class="form-inline" role="form">
  <div class="form-group has-success has-feedback">
    <label class="control-label" for="inputSuccess4"></label>
    <input type="text" class="form-control" id="inputSuccess4">
    <span class="glyphicon glyphicon-user form-control-feedback"></span>
  </div>
</form>

デモ:http : //jsfiddle.net/LS2Ek/1/

このデモは、Bootstrapドキュメントの例に基づいています。ここで「オプションのアイコンを使用」まで下にスクロールhttp://getbootstrap.com/css/#forms-control-validation

ここに画像の説明を入力してください


3
+1-ブートストラップに組み込まれたネイティブアプローチを使用できることは間違いありません。これは質問のように左揃えのアイコンでそれほどホットではありませんが、間違いなく良いアプローチです。
KyleMit 14年

1
{left:0}glyphiconクラスに追加すると、左揃えが処理されます。jsfiddle.net/LS2Ek/30。私はあなたのアウトライン+ボックスシャドウアプローチが好きです。きれいに見えます!
ユーザー

それももともと私が考えていたものですが、さまざまな状況でCSS作業の多くを再作成することになります。あなたがいる場合、ラベルを追加し、あなたが表示されますいくつかの問題を。インラインフォームでleft:0は、入力の開始を識別しなくなりました。また、入力の左側にパディングを追加し、右側でそれを削除する必要があります。それでも、非常に素晴らしく、クリーンなソリューションです。入力の左側を識別するのは難しい部分だと思います。この部分でラッパーposition:relativeが便利になります。
KyleMit 14

このパッチをブートストラップに追加する必要があります。これは、便利で頻繁に使用される機能です。
ユーザーの

43

これがCSSのみの代替案です。これを検索フィールドに設定して、Firefox(および他の100のアプリ)と同様の効果を得ます。

ここにフィドルがあります。

HTML

<div class="col-md-4">
  <input class="form-control" type="search" />
  <span class="glyphicon glyphicon-search"></span>
</div>

CSS

.form-control {
  padding-right: 30px;
}

.form-control + .glyphicon {
  position: absolute;
  right: 0;
  padding: 8px 27px;
}

+1の優れたソリューション。私はそれを左と右のユーティリティクラスに適合させましたが、間違いなく正しいアプローチです
KyleMit 2013年

ええ、とてもシンプルで完璧です
PeMa

11

これが、デフォルトのブートストラップCSS v3.3.1のみを使用して実行した方法です。

<div class="form-group">
    <label class="control-label">Start:</label>
    <div class="input-group">
        <input type="text" class="form-control" aria-describedby="start-date">
        <span class="input-group-addon" id="start-date"><span class="glyphicon glyphicon-calendar"></span></span>
    </div>
</div>

そして、これはどのように見えるかです:

ここに画像の説明を入力してください


8

この「チート」は、グリフィコンクラスが入力コントロールのフォントを変更するという副作用で機能します。

フィドル

<input class="form-control glyphicon" type="search" placeholder="&#57347;"/>

副作用を取り除きたい場合は、「glyphicon」クラスを削除して次のCSSを追加できます(プレースホルダーの疑似要素をスタイルするためのより良い方法があり、私はChromeでのみテストしました)。

フィドル

.form-control[type="search"]::-webkit-input-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control[type="search"]:-moz-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control[type="search"]::-moz-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control[type="search"]:-ms-input-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}

おそらくさらにクリーンなソリューション:

フィドル

CSS

.form-control.glyphicon {
    font-family:inherit;
}
.form-control.glyphicon::-webkit-input-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control.glyphicon:-moz-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control.glyphicon::-moz-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}
.form-control.glyphicon:-ms-input-placeholder:first-letter {
    font-family:"Glyphicons Halflings";
}

HTML

<input class="form-control glyphicon" type="search" placeholder="&#57347; search" />
<input class="form-control glyphicon" type="text"  placeholder="&#57352; username" />
<input class="form-control glyphicon" type="password"  placeholder="&#57395; password" />

8

カスタムCSSなしで、公式のブートストラップ3.xバージョンのクラスを使用して実行できます。

input-group-addoninputタグの前に使用し、内部にinput-groupグリフィコンのいずれかを使用します。ここにコードがあります

<form>
  <div class="form-group">
    <div class="col-xs-5">
      <div class="input-group">
          <span class="input-group-addon transparent"><span class="glyphicon glyphicon-user"></span></span>
          <input class="form-control left-border-none" placeholder="User Name" type="text" name="username">
      </div>
    </div>
  </div>
</form>

これが出力です

ここに画像の説明を入力してください

それをカスタマイズするには、独自のcustom.cssファイルにカスタムCSSの数行を追加します(必要に応じてパディングを調整します)

.transparent {
    background-color: transparent !important;
    box-shadow: inset 0px 1px 0 rgba(0,0,0,.075);
 }
 .left-border-none {
    border-left:none !important;
    box-shadow: inset 0px 1px 0 rgba(0,0,0,.075);
 }

背景をinput-group-addon透明にし、入力タグの左グラデーションをゼロにすると、入力はシームレスな外観になります。これはカスタマイズされた出力です

ここに画像の説明を入力してください

ここにjsbinの例があります

これは、ラベルとの重なり、使用中の配置input-lg、タブの問題に焦点を合わせるというカスタムのcss問題を解決します。


6

次に、base64 URIエンコーディングを使用してCSSにグリフィコンの画像表現を直接埋め込むことにより、マークアップをシンプルに保つブートストラップ以外のソリューションを示します。

input {
  border:solid 1px #ddd;
}
input.search {
	padding-left:20px;
	background-repeat: no-repeat;
	background-position-y: 1px;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAASCAYAAABb0P4QAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADbSURBVDhP5ZI9C4MwEIb7//+BEDgICA6C4OQgBJy6dRIEB6EgCNkEJ4e3iT2oHzH9wHbpAwfyJvfkJDnhYH4kHDVKlSAigSAQoCiBKjVGXvaxFXZnxBQYkSlBICII+22K4jM63rbHSthCSdsskVX9Y6KxR5XJSSpVy6GbpbBKp6aw0BzM0ShCe1iKihMXC6EuQtMQwukzPFu3fFd4+C+/cimUNxy6WQkNnmdzL3NYPfDmLVuhZf2wZYz80qDkKX1St3CXAfVMqq4cz3hTaGEpmctxDPmB0M/fCYEbAwZYyVKYcroAAAAASUVORK5CYII=);
}
<input class="search">



5

input {
  border:solid 1px #ddd;
}
input.search {
	padding-left:20px;
	background-repeat: no-repeat;
	background-position-y: 1px;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAASCAYAAABb0P4QAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADbSURBVDhP5ZI9C4MwEIb7//+BEDgICA6C4OQgBJy6dRIEB6EgCNkEJ4e3iT2oHzH9wHbpAwfyJvfkJDnhYH4kHDVKlSAigSAQoCiBKjVGXvaxFXZnxBQYkSlBICII+22K4jM63rbHSthCSdsskVX9Y6KxR5XJSSpVy6GbpbBKp6aw0BzM0ShCe1iKihMXC6EuQtMQwukzPFu3fFd4+C+/cimUNxy6WQkNnmdzL3NYPfDmLVuhZf2wZYz80qDkKX1St3CXAfVMqq4cz3hTaGEpmctxDPmB0M/fCYEbAwZYyVKYcroAAAAASUVORK5CYII=);
}
<input class="search">


素晴らしい "jugad"ですが、カスタムアイコンを設定するのにも役立ちます。ありがとうございます。
Dhruv Raval

4

:beforeCSSの疑似要素を使用してグリフィコンを配置する別の方法を次に示します。

jsFiddleのデモ

このHTMLの場合:

<form class="form form-horizontal col-xs-12">
    <div class="form-group">
        <div class="col-xs-7">
            <span class="usericon">
                <input class="form-control" id="name" placeholder="Username" />
            </span>
        </div>
    </div>
</form>

このCSSを使用します(Bootstrap 3.xおよびWebkitベースのブラウザーと互換性があります

.usericon input {
    padding-left:25px;
}
.usericon:before {
    height: 100%;
    width: 25px;
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
    position: absolute;
    content: "\e008";
    font-family: 'Glyphicons Halflings';
    pointer-events: none;
}

@Friziが言ったpointer-events: none;ように、カーソルが入力フォーカスに干渉しないように追加する必要があります。他のすべてのCSSルールは、適切な間隔を中央に配置して追加するためのものです。

結果:

スクリーンショット


2

Unicode HTMLを使用できます

したがって、ユーザーアイコンを追加&#xe008;するには、placeholder属性に追加するか、必要な場所に追加します。

このチートシートを確認してください。

例:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<input type="text" class="form-control" placeholder="&#xe008; placeholder..." style="font-family: 'Glyphicons Halflings', Arial">
<input type="text" class="form-control" value="&#xe008; value..." style="font-family: 'Glyphicons Halflings', Arial">
<input type="submit" class="btn btn-primary" value="&#xe008; submit-button" style="font-family: 'Glyphicons Halflings', Arial">

次のコードを使用して、入力のフォントをGlyphiconのフォントに設定することを忘れないでくださいfont-family: 'Glyphicons Halflings', Arial。ここで、 Arialは入力内の通常のテキストのフォントです。


1

また、Bootstrap 3.3.5でこのケースについて1つの決定を下しました。

<div class="col-sm-5">
    <label for="date">
       <input type="date" placeholder="Date" id="date" class="form-control">         
    </label>
    <i class="glyphicon glyphicon-calendar col-sm-pull-2"></i>
</div>

入力時に私はこのようなものを持っています: ここに画像の説明を入力してください


1

Bootstrap 4でテスト済み。

を受け取り、そのクラスにform-control追加is-validします。コントロールがどのように緑色に変わるか、さらに重要なことに、コントロールの右側にあるチェックマークアイコンに注意してください。これが私たちの望みです!

例:

.my-icon {
    padding-right: calc(1.5em + .75rem);
    background-image: url('https://use.fontawesome.com/releases/v5.8.2/svgs/regular/calendar-alt.svg');
    background-repeat: no-repeat;
    background-position: center right calc(.375em + .1875rem);
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="container">
  <div class="col-md-5">
	<input type="text" id="date" class="form-control my-icon" placeholder="Select...">
  </div>
</div>


0

最新のブラウザーのみを必要とするほど幸運である場合:css transform translateを試してください。これはラッパーを必要とせず、input [type = number]のスペースを広くして入力スピナーに対応したり、ハンドルの左側に移動したりできるようにカスタマイズできます。

    @import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");


.is-invalid {
  height: 30px;
  box-sizing: border-box;
}

.is-invalid-x {
  font-size:27px;
  vertical-align:middle;
  color: red;
  top: initial;
  transform: translateX(-100%);
}




 <h1>Tasty Field Validation Icons using only css transform</h1>
    <label>I am just a poor boy nobody loves me</label>
    <input class="is-invalid"><span class="glyphicon glyphicon-exclamation-sign is-invalid-x"></span>

http://codepen.io/anon/pen/RPRmNq?editors=110


0

既存のブートストラップクラスと少しのカスタムスタイリングでこれを行うことができるはずです。

<form>
    <div class="input-prepend">
        <span class="add-on">
            <i class="icon-user"></i>
        </span>
        <input class="span2" id="prependedInput" type="text" placeholder="Username" style="background-color: #eeeeee;border-left: #eeeeee;">
    </div>         

編集 アイコンはicon-userクラスを介して参照されます。この回答は、Bootstrapバージョン2の時点で記述されています。次のページで参照を確認できます。http//getbootstrap.com/2.3.2/base-css.html#images


この回答にブートストラップグリフィコンリファレンスが表示されない
Kirby

@Kirby、アイコンはicon-userクラスを介して参照されます。この回答は、Bootstrapバージョン2の時点で書かれています。次のページで参照を確認できます-getbootstrap.com/2.3.2/base-css.html#images
YOOOEE
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.