Schriftart Fantastisches Symbol im Texteingabeelement

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

Ich habe eine der Lösungen aus der ähnlichen Frage ausprobiert , weil ich das wusstebackground-image Eigenschaft nicht funktioniert, da Font Awesome eine Schriftart ist.

Das Folgende ist mein Ansatz und ich kann die Symbolanzeige nicht erhalten.

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

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

Ich habe Schriftarten in der Standardschrift CSS deklariert, daher war ich mir nicht sicher, ob das Hinzufügen der obigen 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');
 }

Du hast recht. : vor und: nach Pseudo-Inhalten ist nicht dazu gedacht, ersetzte Inhalte wie imgund inputElemente zu bearbeiten . Das Hinzufügen eines Umbruchelements und das Deklarieren einer Schriftfamilie ist eine der Möglichkeiten, ebenso wie die Verwendung eines Hintergrundbilds. Oder vielleicht passt ein HTML5-Platzhaltertext zu Ihren Anforderungen:

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

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

AKTUALISIEREN

Die Vorinhaltsauswahl 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 Platzhaltervorschlag hinzugefügt, bei dem der Wrapper redundant 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 Unicode Private Use Area (PUA) zum Speichern von Symbolen. Andere Zeichen sind nicht vorhanden und greifen auf die Standardeinstellung des Browsers zurück. Das sollte mit jeder anderen Eingabe identisch sein. Wenn Sie eine Schriftart für Eingabeelemente definieren, geben Sie dieselbe Schriftart wie Fallback für Situationen an, in denen wir ein Symbol verwenden. So was:

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

Ausgabe:

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:

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>

Sie könnten einen Wrapper verwenden. Fügen Sie im Wrapper i das inputElement font awesome und das 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 setzen Sie dann die iPosition des Elements auf absolut und stellen Sie die richtige Stelle dafür ein:

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

(Es ist ein Hack, ich weiß, aber es erledigt den Job.)

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

1. Das Symbol befindet sich im Textfeld
2. Das Symbol sollte nicht verschwinden, wenn Text in die Eingabe eingegeben wird. Der eingegebene Text befindet sich rechts neben dem Symbol
3. Durch Klicken auf das Symbol sollte die zugrunde liegende Eingabe scharfgestellt 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>

Sie müssen nicht viel codieren. Befolgen Sie einfach die folgenden Schritte:

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

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

FontAwesome Unicode für Symbole

Nachdem ich verschiedene Versionen dieser Frage gelesen und mich umgesehen habe, habe ich eine ziemlich saubere, js-freie Lösung gefunden. Es ähnelt der @ allcaps-Lösung, vermeidet jedoch das Problem, dass die Eingabeschrift von der Hauptdokumentschrift geändert wird.

Verwenden Sie das ::input-placeholderAttribut , um den Platzhaltertext spezifisch zu gestalten. Auf diese Weise können Sie Ihre Symbolschrift als Platzhalterschrift und Ihren Textkörper (oder eine andere Schriftart) als eigentlichen Eingabetext verwenden. Derzeit müssen Sie herstellerspezifische Selektoren angeben.

Dies funktioniert gut, solange Sie keine Kombination aus Symbol und Text in Ihrem Eingabeelement benötigen. Wenn Sie dies tun, müssen Sie sich damit abfinden, dass der Platzhaltertext die Standardbrowser-Schriftart (einfache Serife bei mir) für Wörter ist.

ZB
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';
}

Spielen Sie mit ausgewählten Browsern mit Browserpräfix: http://jsfiddle.net/gA4rx/78/

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

Ich habe den einfachsten Weg mit Bootstrap 4 gefunden.

<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>

Ich habe das so erreicht

  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 folgendermaßen aus:

Randnotiz

Bitte beachten Sie, dass ich Ruby on Rails verwende, damit mein resultierender Code etwas in die Luft gesprengt aussieht. Der Ansichtscode in schlank ist eigentlich sehr prägnant:

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

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

Genauso wie wir es mit Hintergrundbildern und Text 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;
    }

Aufbauend auf allcaps Vorschlag. 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";
}

Erstellen 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 <i>aus der Font Awesome-Bibliothek in das Tag ein und genießen Sie die Ergebnisse.

<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>

reines CSS

input[type=search] {
    min-width: 320px;
    height: 24px;
    border: 1px solid #E6E6E6;
    border-radius: 8px;
    margin-top: 6px;
    background-image: url('/img/search.png');
    background-size: 16px;
    background-position: 280px;
    background-repeat: no-repeat;
}

Meine Lösung bestand darin, einen relativen Container um inputdas Symbol zu haben. Dieser äußere Container hat ein ::afterSymbol mit dem gewünschten Symbol absoluteinnerhalb des Containers.

HTML:

<div class="button__outer">
    <input type="submit" class="button" value="Send"/>
</div>

SASS-Code:

.button {
 display: inline-block;
 width: auto;
 height: 60px;
 line-height: 60px;
}

.button__outer {
    position: relative;
    display: inline-block;
    width: auto;

    &::after {
       position: absolute;
       right: 0;
       top: 0;
       height: 60px;
       line-height: 60px;
       width: 60px;
       font-family: 'FontAwesome', sans-serif;
       content: "\f054";
       color: #fff;
       font-size: 27px;
       font-weight: 700;
    }
}

Meine Lösung zum Hinzufügen eines Schriftart-Symbols innerhalb des Eingabeelements. Hier ist ein einfacher Code zum Hinzufügen eines Symbols innerhalb des Eingabeelements. Kopieren Sie einfach den folgenden Code und platzieren Sie ihn dort, wo Sie ihn hinzufügen möchten. Wenn Sie das Symbol ändern möchten, geben Sie einfach Ihren Symbolcode in das <i> Tag ein.

<style>
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}
.soft-codeon {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  width: 50%;
  margin-bottom: 15px;
}

.icon {
  padding: 10px;
  background: linear-gradient(to right, #ec008c, #fc6767); 
  color: white;
  min-width: 20px;
  text-align: center;
}
.soft-field {
  width: 100%;
  padding: 10px;
  outline: none;
  border:2px solid #fc6767;
}
.soft-field:focus {
  border: 2px solid #ec008c;
}
</style>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <div class="soft-codeon">
    <i class="fa fa-user icon"></i>
    <input class="soft-field" type="text" placeholder="Username" name="usrnm">
  </div>
  <div class="soft-codeon">
    <i class="fa fa-envelope icon"></i>
    <input class="soft-field" type="text" placeholder="Email" name="email">
  </div>

Manchmal wird das Symbol aufgrund der Font Awesome-Version nicht angezeigt. Für Version 5 sollte das CSS sein

.dropdown-wrapper::after {
     content: "\f078";
     font-family: 'Font Awesome 5 Free';
     font-weight: 900;
     color: #000;
     position: absolute;
     right: 6px;
     top: 10px;
     z-index: 1;
     width: 10%;
     height: 100%;
     pointer-events: none;
}

Einfacher Weg, aber Sie brauchen Bootstrap

 <div class="input-group mb-3">
    <div class="input-group-prepend">
      <span class="input-group-text"><i class="fa fa-envelope"></i></span> <!-- icon envelope "class="fa fa-envelope""-->
    </div>
    <input type="email" id="senha_nova" placeholder="Email">
  </div><!-- input-group -->

::-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">

Ich habe die folgenden Sachen ausprobiert und es funktioniert wirklich gut HTML

input.hai {
    width: 450px;
    padding-left: 25px;
    margin: 15px;
    height: 25px;
    background-image: url('https://cdn4.iconfinder.com/data/icons/casual-events-and-opinions/256/User-512.png') ;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: left;
    background-color: grey;
}

<div >

    <input class="hai" placeholder="Search term">

</div>

Um dies mit Unicode oder Fontawesome zu tun, sollten Sie ein spanmit dem folgenden Namen hinzufügen class:

In HTML:

<span class="button1 search"></span>
<input name="username">

In CSS:

.button1 {
    background-color: #B9D5AD;
    border-radius: 0.2em 0 0 0.2em;
    box-shadow: 1px 0 0 rgba(0, 0, 0, 0.5), 2px 0 0 rgba(255, 255, 255, 0.5); 
    pointer-events: none;
    margin:1px 12px;    
    border-radius: 0.2em;    
    color: #333333;
    cursor: pointer;
    position: absolute;
    padding: 3px;
    text-decoration: none;           
}

<!doctype html>
<html>
  <head>
    ## Heading ##
    <meta charset="utf-8">
      <title>
        Untitled Document
      </title>
      </head>
      <style>
        li {
          display: block;
          width: auto;
        }
        ul li> ul li {
          float: left;
        }
        ul li> ul {
          display: none;
          position: absolute;
        }
        li:hover > ul {
          display: block;
          margin-left: 148px;
          display: inline;
          margin-top: -52px;
        }
        a {
          background: #f2f2ea;
          display: block;
          /*padding:10px 5px;
          */
          width: 186px;
          height: 50px;
          border: solid 2px #c2c2c2;
          border-bottom: none;
          text-decoration: none;
        }
        li:hover >a {
          background: #ffffff;
        }
        ul li>li:hover {
          margin: 12px auto 0px auto;
          padding-top: 10px;
          width: 0;
          height: 0;
          border-top: 8px solid #c2c2c2;
        }
        .bottom {
          border-bottom: solid 2px #c2c2c2;
        }
        .sub_m {
          border-bottom: solid 2px #c2c2c2;
        }
        .sub_m2 {
          border-left: none;
          border-right: none;
          border-bottom: solid 2px #c2c2c2;
        }
        li.selected {
          background: #6D0070;
        }
        #menu_content {
          /*float:left;
          */

        }
        .ca-main {
          padding-top: 18px;
          margin: 0;
          color: #34495e;
          font-size: 18px;
        }
        .ca-sub {
          padding-top: 18px;
          margin: 0px 20px;
          color: #34495e;
          font-size: 18px;
        }
        .submenu a {
          width: auto;
        }
        h2 {
          text-align: center;
        }
      </style>
      <body>
        <ul>
          <li>
            <a href="#">
              <div id="menu_content">
                <h2 class="ca-main">
                  Item 1
                </h2>
              </div>
            </a>
            <ul class="submenu" >
              <li>
                <a href="#" class="sub_m">
                  <div id="menu_content">
                    <h2 class="ca-sub">
                      Item 1_1
                    </h2>
                  </div>
                </a>
              </li>
              <li>

                <a href="#" class="sub_m2">
                  <div id="menu_content">
                    <h2 class="ca-sub">
                      Item 1_2
                    </h2>
                  </div>
                </a>
              </li>
              <li >

                <a href="#" class="sub_m">
                  <div id="menu_content">
                    <h2 class="ca-sub">
                      Item 1_3
                    </h2>
                  </div>
                </a>

              </li>
            </ul>
          </li>
          <li>

            <a href="#">
              <div id="menu_content">
                <h2 class="ca-main">
                  Item 2
                </h2>
              </div>
            </a>
          </li>
          <li>

            <a href="#">
              <div id="menu_content">
                <h2 class="ca-main">
                  Item 3
                </h2>
              </div>
            </a>

          </li>
          <li>

            <a href="#"  class="bottom">
              <div id="menu_content">
                <h2 class="ca-main">
                  Item 4
                </h2>
              </div>
            </a>

          </li>
        </ul>
      </body>
</html>