Fügen Sie das Twitter Bootstrap-Symbol zum Eingabefeld hinzu

Wie können wir hinzufügen, ein Twitter-Bootstrap-Symbol icon-search auf der rechten Seite ein text-input-element?

Den folgenden versuchen alle icons in das input-element, wie können wir es beschneiden, so dass es zeigt nur das Symbol für icon-search?

Aktuellen Versuch

Fügen Sie das Twitter Bootstrap-Symbol zum Eingabefeld hinzu

CSS

input.search-box {
    width: 180px;
    background: #333;
    background-image: url('/img/glyphicons-halflings-white.png');
    background-position: -48px 0;
    padding-left: 30px;
    margin-top: 45px;
    border: 0;
    float: right;
}

InformationsquelleAutor der Frage Nyxynyx | 2013-06-01

  1. 84

    Aktualisiert Bootstrap 3.x

    Können Sie die .input-group Klasse wie folgt aus:

    <div class="input-group">
    <input type="text" class="form-control"/>
    <span class="input-group-addon">
        <i class="fa fa-search"></i>
    </span>
</div>

    Arbeiten-Demo auf jsFiddle für 3.x

    Bootstrap 2.x

    Können Sie die .input-append Klasse wie folgt aus:

    <div class="input-append">
    <input class="span2" type="text">
    <button type="submit" class="btn">
        <i class="icon-search"></i>
    </button>
</div>

    Arbeiten-Demo auf jsFiddle für 2.x

    Beiden wird so Aussehen:

    Fügen Sie das Twitter Bootstrap-Symbol zum Eingabefeld hinzu

    Wenn Sie möchten, dass das Symbol innen die input-box, wie diese:

    Fügen Sie das Twitter Bootstrap-Symbol zum Eingabefeld hinzu

    Dann siehe meine Antwort auf Hinzufügen eines Bootstrap Glyphicon zum Eingabe-Feld

    InformationsquelleAutor der Antwort KyleMit

  2. 1

    Da die glyphicons Bild ist ein sprite, das kannst du wirklich nicht tun: grundsätzlich, was Sie wollen, ist die Begrenzung der Größe der hintergrund, aber es gibt keine Möglichkeit, festzulegen, wie groß der hintergrund ist. Entweder Sie schneiden Sie auf das gewünschte Symbol, die Größe nach unten, und verwenden Sie es, oder verwenden Sie so etwas wie das Eingabefeld prepend/append-option (http://twitter.github.io/bootstrap/base-css.html#forms und suchen Sie dann nach vorangestellt Eingänge).

    InformationsquelleAutor der Antwort Femi

  3. 0

    Für die bootstrap-4

            <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">

            <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
        <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
        <form class="form-inline my-2 my-lg-0">
                        <div class="input-group">
                            <input class="form-control" type="search" placeholder="Search">
                            <div class="input-group-append">
                                <div class="input-group-text"><i class="fa fa-search"></i></div>
                            </div>
                        </div>
                    </form>

    Demo

    InformationsquelleAutor der Antwort alhelal

Schreibe einen Kommentar