Ikon Font Awesome di dalam elemen input teks

Saya mencoba memasukkan ikon pengguna di dalam bidang masukan nama pengguna.

Saya telah mencoba salah satu solusi dari pertanyaan serupa karena mengetahui bahwa background-imageproperti tidak akan berfungsi karena Font Awesome adalah font.

Berikut ini adalah pendekatan saya dan saya tidak bisa mendapatkan tampilan ikon.

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

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

Saya memiliki font face yang dinyatakan dalam font default awesome css jadi saya tidak yakin apakah menambahkan font-family di atas adalah pendekatan yang tepat.

 @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');
 }

Kamu benar. : sebelum dan: setelah konten semu tidak dimaksudkan untuk bekerja pada konten imgdan inputelemen yang diganti . Menambahkan elemen pembungkus dan mendeklarasikan font-family adalah salah satu kemungkinannya, seperti halnya menggunakan gambar latar belakang. Atau mungkin teks placeholder html5 sesuai dengan kebutuhan Anda:

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

Browser yang tidak mendukung atribut placeholder akan mengabaikannya begitu saja.

MEMPERBARUI

Sebelum pemilih konten memilih input: input[type="text"]:before. Anda harus memilih bungkusnya: .wrapper:before. Lihat http://jsfiddle.net/allcaps/gA4rx/ . Saya juga menambahkan saran placeholder di mana pembungkusnya berlebihan.

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

Fallback

Font Awesome menggunakan Unicode Private Use Area (PUA) untuk menyimpan ikon. Karakter lain tidak ada dan kembali ke default browser. Itu harus sama dengan masukan lainnya. Jika Anda mendefinisikan font pada elemen input, maka berikan font yang sama sebagai fallback untuk situasi di mana kita menggunakan ikon. Seperti ini:

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

Keluaran:

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>

(Atau)

Keluaran:

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>

Anda bisa menggunakan pembungkus. Di dalam bungkusnya, tambahkan elemen font awesome i dan inputelemen.

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

kemudian atur posisi pembungkus ke relative:

.wrapper { position: relative; }

lalu setel posisi ielemen ke absolut, dan setel tempat yang benar untuk itu:

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

(Ini peretasan, saya tahu, tetapi itu menyelesaikan pekerjaan.)

Jawaban ini akan bekerja untuk Anda jika Anda perlu memenuhi ketentuan berikut (tidak ada jawaban saat ini yang memenuhi ketentuan ini):

1. Ikonnya ada di dalam kotak teks
2. Ikon tidak boleh hilang saat teks dimasukkan ke input, dan teks yang dimasukkan berada di sebelah kanan ikon
3. Mengklik ikon akan membuat input yang mendasari menjadi fokus

Saya percaya bahwa 3 adalah jumlah minimal elemen HTML untuk memenuhi ketentuan ini:

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

Tidak perlu banyak kode ... cukup ikuti langkah-langkah berikut:

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

Anda dapat menemukan tautan ke Unicode ( fontawesome ) di sini ...

FontAwesome Unicode untuk ikon

Setelah membaca berbagai versi dari pertanyaan ini dan mencari-cari, saya menemukan solusi yang cukup bersih, bebas js,. Ini mirip dengan solusi @allcaps tetapi menghindari masalah font input diubah dari font dokumen utama.

Gunakan ::input-placeholderatribut untuk memberi gaya khusus pada teks placeholder. Ini memungkinkan Anda untuk menggunakan font ikon Anda sebagai font placeholder dan isi Anda (atau font lain) sebagai teks input yang sebenarnya. Saat ini Anda perlu menentukan pemilih khusus vendor.

Ini berfungsi dengan baik selama Anda tidak memerlukan kombinasi ikon dan teks dalam elemen masukan Anda. Jika Anda melakukannya maka Anda harus siap dengan teks placeholder menjadi font browser default (serif biasa pada saya) untuk kata-kata.

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

Bermain-main dengan pemilih berawalan browser: http://jsfiddle.net/gA4rx/78/

Perhatikan bahwa Anda perlu menentukan setiap pemilih khusus browser sebagai aturan terpisah. Jika Anda menggabungkannya, browser akan mengabaikannya.

Saya menemukan cara termudah menggunakan 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>

Saya mencapai ini seperti itu

  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>

Hasilnya terlihat seperti ini:

Catatan samping

Harap dicatat bahwa saya menggunakan Ruby on Rails sehingga kode yang saya hasilkan terlihat sedikit berlebihan. Kode tampilan dalam slim sebenarnya sangat ringkas:

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

Bagi saya, cara mudah untuk memiliki ikon "di dalam" input teks tanpa harus mencoba menggunakan pseudo-elements dengan font awesome unicode dll, adalah dengan memiliki input teks dan ikon di dalam elemen pembungkus yang akan kita posisikan secara relatif, dan kemudian posisikan input pencarian dan ikon font mengagumkan secara absolut.

Cara yang sama kita lakukan dengan gambar latar belakang dan teks, kita lakukan di sini. Saya rasa ini bagus untuk pemula juga, karena pemosisian css adalah sesuatu yang harus dipelajari oleh pemula di awal perjalanan pengkodean mereka, sehingga kodenya mudah dipahami dan digunakan kembali.

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

Membangun di atas saran allcaps. Berikut adalah metode latar belakang font-mengagumkan dengan jumlah HTML paling sedikit:

<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";
}

Buat ikon yang dapat diklik untuk fokus di dalam elemen input teks.

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>

Cukup tambahkan ikon mana saja yang Anda suka di dalam <i>tag, dari perpustakaan Font Awesome dan nikmati hasilnya.

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

murni 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;
}

Solusi saya adalah memiliki wadah relatif di sekitar inputuntuk memegang ikon. Kontainer luar itu memiliki ::afterikon yang diinginkan, ditempatkan absolutedi dalam wadah.

HTML:

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

Kode SASS:

.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;
    }
}

Solusi Saya untuk menambahkan ikon font-mengagumkan di dalam elemen input. Berikut adalah kode sederhana untuk menambahkan ikon di dalam elemen input. Cukup salin kode di bawah ini dan taruh di tempat yang ingin Anda tambahkan. atau jika Anda ingin mengubah ikon maka cukup masukkan kode ikon Anda di <i> tag.

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

Terkadang ikon tidak muncul karena versi Font Awesome. Untuk versi 5, css harus

.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;
}

Caranya mudah, tetapi Anda membutuhkan 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 -->

Solusi sederhana di bawah ini berhasil untuk saya.

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

Gunakan filter ini untuk mengimplementasikan pencarian: https://www.npmjs.com/package/ng2-search-filter

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

Saya mencoba hal-hal di bawah ini dan itu benar-benar berfungsi dengan baik 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>

Untuk mengerjakan ini dengan unicode atau fontawesome, Anda harus menambahkan spandengan classseperti di bawah ini:

Dalam HTML:

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

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