Fontawesome in Suchleiste

Question

Ich versuche, die search icon from fontawesome anstelle einer background-image in meiner Suchleiste zu verwenden, die einen Übergang verwendet, um den Eingabebereich zu erweitern. Mit einem Klick auf dieses Symbol sollte der Bereich geöffnet werden.

Ich habe versucht, mit

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
<input type="text" name="eingabe" placeholder="Suche"> 
<i class="fa fa-search" aria-hidden="true"></i> 
</input> 

aber dann neben dem Eingang ist das Symbol, und ich kann auf sie nicht meinen Übergang zu verwenden, um die Breite meiner Eingabe zu löschen.

@Saurav fast meine Frage gelöst, aber ich kann nicht auf das Symbol klicken.

.search-bar { 
 
    position: relative; 
 
} 
 

 
.search-bar .icon { 
 
    position: absolute; 
 
    top: 47%; 
 
    left: 10px; 
 
    transform: translateY(-50%); 
 
} 
 

 
.search-bar .input-text { 
 
    width: 0px; 
 
    border: 0px; 
 
    background-color: #fff; 
 
    height: 20px; 
 
    padding: 8px 8px 8px 35px; 
 
    -webkit-transition: width 0.4s ease-in-out; 
 
    transition: width 0.4s ease-in-out; 
 
} 
 
.search-bar .input-text:focus { 
 
    width: 80%; 
 
    background-color: #ccc; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="search-bar"> 
 
    <i class="icon fa fa-search"></i> 
 
    <input class="input-text" type="text" name="eingabe" placeholder="Suche"> 
 
</div>

Answer 1

Sie können versuchen, eine div (wie .search-bar) Behälter mit in dessen Innerem wir ein Suchsymbol mit CSS-Positionierung können und Eingabe suchen und wickeln Sie es, es als Platzhalter zu suchen, wie:

<div class="search-bar"> 
    <i class="icon fa fa-search"></i> 
    <input class="input-text" type="text" name="eingabe" placeholder="Suche"> 
</div> 

Sie müssen auch ein wenig jQuery (nur für die Klassen Makeln) und unter Verwendung max-width statt Breite für .input-text wie:

JS (jQuery - für 'aktive' Klasse Makeln)

$('.search-bar .icon').on('click', function() { 
    $(this).parent().toggleClass('active'); 
}); 

CSS (wenn aktive Klasse umgeschaltet wird)

.search-bar.active .input-text { 
    max-width: 80%; 
    border: 1px solid #ccc; 
    background: #eee; 
} 

einen Blick auf die aktualisierte Snippet unten haben:

$('.search-bar .icon').on('click', function() { 
 
    $(this).parent().toggleClass('active'); 
 
});

.search-bar { 
 
    position: relative; 
 
} 
 

 
.search-bar.active .input-text { 
 
    max-width: 80%; 
 
    border: 1px solid #ccc; 
 
    background: #eee; 
 
} 
 

 
.search-bar .icon { 
 
    cursor: pointer; 
 
    position: absolute; 
 
    top: 47%; 
 
    left: 0; 
 
    transform: translateY(-50%); 
 
    padding: 13px 15px 13px 11px; 
 
} 
 

 
.search-bar .input-text { 
 
    max-width: 0; 
 
    border: 0; 
 
    border-color: #ccc; 
 
    height: 20px; 
 
    padding: 8px 6px 8px 35px; 
 
    -webkit-transition: all 0.4s ease-in-out; 
 
    transition: all 0.4s ease-in-out; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<div class="search-bar"> 
 
    <i class="icon fa fa-search"></i> 
 
    <input class="input-text" type="text" name="eingabe" placeholder="Suche"> 
 
</div>

Hoffe, das hilft!

Answer 2

Sie http://fontawesome.io/cheatsheet/ gehen müssen dort können Sie Unicode für die Symbole finden. Suchsymbol zum Beispiel für ist 

Answer 3

Wenn Ihre Anforderung über anklickbare font-awesome Symbol innerhalb input Textfeld ist, dann überprüfen Sie unten Schnipsel für einfache.

$('#mybutton').click(function() { 
 
    console.log('search icon clicked!'); 
 
});

.search-widget { 
 
    border: 1px solid #858585; 
 
    display: inline-block; 
 
    height: 35px; 
 
    float: left; 
 
} 
 

 
.search-widget input { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    background-color: transparent; 
 
    border: 0; 
 
    height: 35px; 
 
} 
 

 
.search-widget button { 
 
    background-color: transparent; 
 
    color: #1293D4; 
 
    border: 0; 
 
    height: 35px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<div class="search-widget"> 
 
    <input name="name" type="text" placeholder="search"> 
 
    <button id="mybutton"><i class="fa fa-search"></i></button> 
 
</div>

Answer 4

HTML

Was Sie tun müssen, ist ein Elternteil div um die input zu erstellen und verwenden div:before das Symbol hinzuzufügen content verwenden.

---

CSS

das Symbol zu erhalten, die Sie möchten, können Sie unter URL verweisen:

http://fontawesome.io/cheatsheet/

Nehmen Sie das erste Symbol zum Beispiel [] dieses Symbol zu erhalten, Wenn Sie in css auftauchen, benötigen Sie nur die letzten 4 Zeichen mit einem umgekehrten Schrägstrich wie \f26e

---

Javascript (JQuery)

Um das Symbol verschwinden zu lassen, wenn Sie die Eingabe konzentrieren müssen Sie einige Javascript:

$("input") 
    .focus(function() { 
    $(this).parent().addClass('active'); 
    }) 
    .blur(function() { 
    $(this).parent().removeClass('active'); 
    }); 

Dies wird die .active Klasse zu Ihrem Element hinzufügen/entfernen und Wenn es aktiv ist, überschreibt das CSS und stellt das Symbol auf diplay ein: Keines, wenn es verwischt, wird es wieder normal.

$("input") 
 
    .focus(function() { 
 
    $(this).parent().addClass('active'); 
 
    }) 
 
    .blur(function() { 
 
    $(this).parent().removeClass('active'); 
 
    });

div{ 
 
    position:relative; 
 
    
 
} 
 
div:before{ 
 
    content: "\f2b9"; 
 
    font-family: FontAwesome; 
 
    font-style: normal; 
 
    font-weight: normal; 
 
    position: absolute; 
 
    height: 16px; 
 
    margin: auto; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 10px; 
 
    color:grey; 
 
} 
 

 
input{ 
 
    padding: .5rem; 
 
    padding-left: 2rem; 
 
} 
 

 
.active{ 
 
    
 
} 
 

 
.active:before{ 
 
    display:none; 
 
} 
 

 
.active input{ 
 
    padding: .5rem; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<div> 
 
<input type="text" name="eingabe" placeholder="placeholder text"> 
 
</div>

Answer 5

zu diesem Link Gehen Sie einfach http://fontawesome.io/cheatsheet/ Und diesen Code & # xf002