it-swarm.com.de

Schriftart Awesome-Symbol innerhalb des Texteingabeelements

Ich versuche, ein Benutzersymbol in das Eingabefeld für den Benutzernamen einzufügen. 

Ich habe eine der Lösungen aus der ähnlichen Frage Ausprobiert, da ich weiß, dass die background-image-Eigenschaft nicht funktioniert, da Font Awesome eine Schriftart ist.

Das Folgende ist meine Herangehensweise und ich kann das Symbol nicht anzeigen.

.wrapper input[type="text"] {
    position: relative;
}

.wrapper input[type="text"]:before {
    font-family: 'FontAwesome';
    position: absolute;
    top: 0px;
    left: -5px;
    content: "\f007";
}

Ich habe die Schriftart in der Standardschriftart awesome css deklariert. Daher war ich mir nicht sicher, ob das Hinzufügen der Schriftfamilie der richtige Ansatz war.

 @font-face {
     font-family: 'FontAwesome';
     src: url('../Font/fontawesome-webfont.eot?v=3.2.1');
     src: url('../Font/fontawesome-webfont.eot?#iefix&v=3.2.1') format('embedded-opentype'), url('../Font/fontawesome-webfont.woff?v=3.2.1') format('woff'), url('../Font/fontawesome-webfont.ttf?v=3.2.1') format('truetype'), url('../Font/fontawesome-webfont.svg#fontawesomeregular?v=3.2.1') format('svg');
 }
107
Seong Lee

Du hast recht. : before und: after Pseudo-Inhalte sind nicht für ersetzte Inhalte wie img und input-Elemente geeignet. Das Hinzufügen eines Umbruchelements und das Deklarieren einer Schriftfamilie ist eine der Möglichkeiten, ebenso wie die Verwendung eines Hintergrundbildes. Oder vielleicht entspricht ein html5-Platzhaltertext Ihren Anforderungen:

<input name="username" placeholder="&#61447;">

Browser, die das Platzhalterattribut nicht unterstützen, werden es einfach ignorieren.

AKTUALISIEREN

Der vor Inhaltsauswahlschalter wählt die Eingabe aus: input[type="text"]:before. Sie sollten den Wrapper auswählen: .wrapper:before. Siehe http://jsfiddle.net/allcaps/gA4rx/ . Ich habe auch den Platzhalter-Vorschlag hinzugefügt, bei dem der Wrapper überflüssig ist. 

.wrapper input[type="text"] {
    position: relative; 
}

input { font-family: 'FontAwesome'; } /* This is for the placeholder */

.wrapper:before {
    font-family: 'FontAwesome';
    color:red;
    position: relative;
    left: -5px;
    content: "\f007";
}

<p class="wrapper"><input placeholder="&#61447; Username"></p>

Zurückfallen

Font Awesome verwendet den PUA-Bereich (Unicode Private Use Area) zum Speichern von Symbolen. Andere Zeichen sind nicht vorhanden und werden auf die Standardeinstellung des Browsers zurückgesetzt. Das sollte derselbe sein wie bei jeder anderen Eingabe. Wenn Sie für Eingabeelemente eine Schriftart definieren, geben Sie dieselbe Situation als Fallback für Situationen an, in denen ein Symbol verwendet wird. So was: 

input { font-family: 'FontAwesome', YourFont; }
96
allcaps

Ausgabe:

enter image description here

HTML:

<input name="txtName" id="txtName">

<span class="fa fa-info-circle errspan"></span>

CSS:

<style type="text/css">
    .errspan {
        float: right;
        margin-right: 6px;
        margin-top: -20px;
        position: relative;
        z-index: 2;
        color: red;
    }
</style>

(Oder)

Ausgabe:

 enter image description here

HTML:

<div class="input-wrapper">
     <input type="text" />
 </div>

CSS:

<style type="text/css">
    .input-wrapper {
        display:inline-block;
        position: relative
    }
    .input-wrapper:after {
        font-family: 'FontAwesome';
        content: '\f274';
        position: absolute;
        right: 6px;
    }
</style>
98
Palani Kumar

Sie könnten einen Wrapper verwenden. Fügen Sie im Wrapper das font awesome-Element i und das input-Element ..__ hinzu.

<div class="wrapper">
    <i class="fa fa-icon"></i>
    <input type="button">
</div>

setzen Sie dann die Position des Wrappers auf relativ:

.wrapper { position: relative; }

und dann die Position des i-Elements auf absolut setzen und die richtige Stelle dafür setzen:

i.fa-icon { position: absolute; top: 10px; left: 50px; }

(Es ist ein Hack, ich weiß, aber es erledigt die Arbeit.)

19
Mero

Diese Antwort funktioniert für Sie, wenn Sie die folgenden Bedingungen erfüllen müssen (keine der aktuellen Antworten erfüllt diese Bedingungen):

  1. Das Symbol ist innerhalb das Textfeld
  2. Das Symbol sollte nicht verschwinden, wenn Text in die Eingabe eingegeben wird. Der eingegebene Text wird rechts neben dem Symbol angezeigt
  3. Durch Klicken auf das Symbol sollte die zugrunde liegende Eingabe in den Fokus gerückt werden

Ich glaube, dass 3 die minimale Anzahl von HTML-Elementen ist, um diese Bedingungen zu erfüllen:

.input-icon{
  position: absolute;
  left: 3px;
  top: calc(50% - 0.5em); /* Keep icon in center of input, regardless of the input height */
}
input{
  padding-left: 17px;
}
.input-wrapper{
  position: relative;
}
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
<div class="input-wrapper">
  <input id="stuff">
  <label for="stuff" class="fa fa-user input-icon"></label>
</div>

13
Skeets

Keine Notwendigkeit, viel Code zu schreiben ... Folgen Sie einfach den folgenden Schritten:

<input id="input_search" type="text" class="fa" placeholder="&#xf002 Search">

die Links zum Unicode (fontawesome) finden Sie hier ...

FontAwesome Unicode für Symbole

8
Rashid Iqbal

Nachdem ich verschiedene Versionen dieser Frage gelesen und herumgesucht habe, habe ich eine ziemlich saubere, js-freie Lösung gefunden. Sie ähnelt der @allcaps-Lösung, vermeidet jedoch, dass die Eingabeschriftart von der Hauptschriftart des Dokuments abweicht.

Verwenden Sie das Attribut ::input-placeholder , um den Platzhaltertext speziell zu gestalten. Auf diese Weise können Sie Ihre Symbolschriftart als Platzhalterschriftart und Ihren Hauptteil (oder eine andere Schriftart) als tatsächlichen Eingabetext verwenden. Derzeit müssen Sie herstellerspezifische Selektoren angeben.

Dies funktioniert gut, solange Sie in Ihrem Eingabeelement keine Kombination aus Symbol und Text benötigen. Wenn Sie dies tun, müssen Sie den Platzhaltertext als Standardbrowser-Schriftart (einfache Serife) für Wörter akzeptieren.

Z.B.
HTML

<p class="wrapper">
    <input class="icon" type="text" placeholder="&#61442;" />
</p>

CSS

.wrapper {
    font-family:'arial', sans-serif;
}
input.icon::-webkit-input-placeholder {
    font-family:'FontAwesome';
}

Geige mit Browser-vorangestellten Selektoren: http://jsfiddle.net/gA4rx/78/

Beachten Sie, dass Sie jeden browserspezifischen Selektor als separate Regel definieren müssen. Wenn Sie sie kombinieren, wird der Browser dies ignorieren.

5
harryg

Ich habe das so gemacht

  form i {
    left: -25px;
    top: 23px;
    border: none;
    position: relative;
    padding: 0;
    margin: 0;
    float: left;
    color: #29a038;
  }
<form>

  <i class="fa fa-link"></i>

  <div class="form-group string optional profile_website">
    <input class="string optional form-control" placeholder="http://your-website.com" type="text" name="profile[website]" id="profile_website">
  </div>

  <i class="fa fa-facebook"></i>
  <div class="form-group url optional profile_facebook_url">
    <input class="string url optional form-control" placeholder="http://facebook.com/your-account" type="url" name="profile[facebook_url]" id="profile_facebook_url">
  </div>

  <i class="fa fa-Twitter"></i>
  <div class="form-group url optional profile_Twitter_url">
    <input class="string url optional form-control" placeholder="http://Twitter.com/your-account" type="url" name="profile[Twitter_url]" id="profile_Twitter_url">
  </div>

  <i class="fa fa-instagram"></i>
  <div class="form-group url optional profile_instagram_url">
    <input class="string url optional form-control" placeholder="http://instagram.com/your-account" type="url" name="profile[instagram_url]" id="profile_instagram_url">
  </div>

  <input type="submit" name="commit" value="Add profile">
</form>

Das Ergebnis sieht so aus:

 result

Randnotiz

Bitte beachten Sie, dass ich Ruby on Rails verwende, so dass mein Code etwas gesprengt aussieht. Der View-Code in Slim ist eigentlich sehr knapp:

i.fa.fa-link
= f.input :website, label: false

i.fa.fa-facebook
= f.input :facebook_url, label: false

i.fa.fa-Twitter
= f.input :Twitter_url, label: false

i.fa.fa-instagram
= f.input :instagram_url, label: false
2
Besi

Für mich ist eine einfache Möglichkeit, ein Symbol "innerhalb" einer Texteingabe zu haben, ohne versuchen zu müssen, Pseudoelemente mit großartigem Unicode usw. zu verwenden, die Texteingabe und das Symbol in einem Wrapper-Element zu haben, das wir relativ positionieren. und positioniere dann sowohl die Sucheingabe als auch das Schriftsymbol absolut.

Genauso wie wir es mit Hintergrundbildern und Texten machen, würden wir es hier tun. Ich bin der Meinung, dass dies auch für Anfänger gut ist, da CSS-Positionierung etwas ist, das Anfänger zu Beginn ihrer Codierungsreise lernen sollten, damit der Code leicht zu verstehen und wiederzuverwenden ist.

    <div class="searchbar-wrapper">
      <i class="fa fa-search searchbar-i" aria-hidden="true"></i>
      <input class="searchbar-input" type="search" placeholder="Search...">
    </div>

    .searchbar-wrapper{
      position:relative;
    }

    .searchbar-i{
      position:absolute;
      top: 50%;
      transform: translateY(-50%);
      padding: 0 .5rem;
    }

    .searchbar-input{
      padding-left: 2rem;
    }
2
Gerard

Auf Allcaps-Vorschlag aufbauen. Hier ist die font-awesome Hintergrundmethode mit der geringsten Menge an HTML:

<div class="wrapper"><input></div>

.wrapper {
    position: relative; 
}

input { padding-left: 20px; }

.wrapper:before {
    font-family: 'FontAwesome';
    position: absolute;
    top: 2px;
    left: 3px;
    content: "\f007";
}
1
Jonathan

Am einfachsten fand ich die Verwendung von Bootstrap 4.

<div class="input-group mb-3">
    <div class="input-group-prepend">
    <span class="input-group-text"><i class="fa fa-user"></i></span></div>
    <input type="text"/>
</div>
1
Henry O.

Machen Sie ein anklickbares Symbol, um innerhalb des Texteingabeelements zu fokussieren.

CSS

.myClass {
    font-size:20px;
    position:absolute; top:10px; left:10px;
}

HTML

<div>
    <label style="position:relative;">
         <i class="myClass fa fa-address-book-o"></i>
         <input class="w3-input" type="text" style="padding-left:40px;">
    </label>
</div>

Fügen Sie einfach das gewünschte Symbol im <i>-Tag aus der Font Awesome-Bibliothek hinzu und genießen Sie die Ergebnisse.

1
Armand
::-webkit-search-cancel-button {
        height: 10px;
        width: 10px;
        display: inline-block;
        /*background-color: #0e1d3033;*/
        content: "&#f00d;";
        font-family: FontAwesome;
        font-weight: 900;
        -webkit-appearance: searchfield-cancel-button !important;
    }
    input#searchInput {
        -webkit-appearance: searchfield !important;
    }

<input data-type="search" type="search" id="searchInput" class="form-control">
0
nobjta_9x_tq
.input-icon{
  position: absolute;
  left: 3px;
  top: calc(50% - 0.5em); /* Keep icon in center of input, regardless of the input height */
}
input{
  padding-left: 17px;
}
.input-wrapper{
  position: relative;
}
<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>
<div class="input-wrapper">
  <input id="stuff">
  <label for="stuff" class="fa fa-user input-icon"></label>
</div>
0
Ola Olushesi
<HTML>
<head>
<style>
.inp1{
color:#2E64FE;
width:350px;
height:35px;
border:solid;
font-size:20px;
text-align:left;
}
</style>
</head>

<body>

<div class="inp1">          
<a href="#" class=""><i class="fa fa-search"></i></a>
</div>
0
Richard Emert