Metin giriş öğesinin içindeki Font Awesome simgesi

Kullanıcı adı giriş alanına bir kullanıcı simgesi eklemeye çalışıyorum.

Font Awesome bir yazı tipi olduğu için bu özellik çalışmaz bilerek benzer soru çözüm birini denedim .background-image

Benim yaklaşımım ve simge görüntüsünü alamıyorum.

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

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

Varsayılan yazı tipi awesome css yazı tipi yüzü ilan var, bu yüzden yukarıdaki font-family eklemenin doğru yaklaşım olup olmadığından emin değildim.

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

Haklısın. : before ve: after sözde içerik gibi öğeler imgve inputöğeler üzerinde değiştirilmek üzere tasarlanmamıştır . Bir kaydırma öğesi eklemek ve bir font ailesi bildirmek, arka plan görüntüsü kullanmak gibi olasılıklardan biridir. Veya belki bir html5 yer tutucu metni ihtiyaçlarınızı karşılar:

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

Yer tutucu özelliğini desteklemeyen tarayıcılar basitçe yok sayar.

GÜNCELLEME

Önce içerik seçici girişini seçer: input[type="text"]:before. Sen sarmalayıcı seçmelisiniz: .wrapper:before. Bkz. Http://jsfiddle.net/allcaps/gA4rx/ . Sargıcının yedeklendiği yer tutucu önerisini de ekledim.

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

Geri çekil

Font Awesome, simgeleri saklamak için Unicode Özel Kullanım Alanını (PUA) kullanır. Diğer karakterler mevcut değildir ve tarayıcı varsayılanına geri döner. Bu diğer girdilerle aynı olmalıdır. Giriş öğelerinde bir yazı tipi tanımlarsanız, bir simge kullandığımız durumlar için yedekle aynı yazı tipini sağlayın. Bunun gibi:

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

Çıktı:

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>

(Veya)

Çıktı:

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>

Bir sargı kullanabilirsiniz. Sarma makinesinin içine harika yazı tipi öğesini i ve öğesini ekleyin input.

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

ardından sargının konumunu göreceli olarak ayarlayın:

.wrapper { position: relative; }

ve daha sonra belirlenen imutlak Ayrıca elementin pozisyonunu ve bunun için doğru yeri ayarlayın:

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

(Bu bir saldırı, biliyorum, ama işi hallediyor.)

Aşağıdaki koşulların karşılanması gerekiyorsa bu yanıt sizin için işe yarayacaktır (mevcut yanıtların hiçbiri bu koşulları karşılamamaktadır):

1. Simge içeride metin kutusuna
2. Girişe metin girildiğinde simge kaybolmamalıdır ve girilen metin simgenin sağına gider
3. Simgeyi tıklatmak, temel alınan girdiyi odaklanmalı

3 Bu koşulları karşılamak için en az sayıda HTML öğeleri olduğuna inanıyorum:

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

Çok fazla kodlamaya gerek yok ... sadece aşağıdaki adımları izleyin:

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

Unicode ( fontawesome ) için bağlantıları burada bulabilirsiniz ...

Simgeler için FontAwesome Unicode

Bu sorunun çeşitli sürümlerini okuduktan ve etrafa baktığımda, oldukça temiz, js içermeyen bir çözüm buldum. @Allcaps çözümüne benzer, ancak giriş yazı tipinin ana belge yazı tipinden değiştirilmesinden kaçınılır.

Özelliği kullanın::input-placeholderÖzellikle yer tutucu metne stil uygulamak . Bu, simge yazı tipinizi yer tutucu yazı tipi ve vücudunuzu (veya başka bir yazı tipi) gerçek giriş metni olarak kullanmanızı sağlar. Şu anda satıcıya özgü seçiciler belirtmeniz gerekiyor.

Bu, giriş öğenizde simge ve metin kombinasyonuna ihtiyacınız olmadığı sürece iyi çalışır. Bunu yaparsanız, yer tutucu metnin kelimeler için varsayılan tarayıcı yazı tipi (benimki üzerinde düz serif) olması gerekir.

Örn.
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';
}

Tarayıcı ön eki seçicileriyle uğraş: uğraş http://jsfiddle.net/gA4rx/78/

Tarayıcıya özgü her bir seçiciyi ayrı bir kural olarak tanımlamanız gerektiğini unutmayın. Bunları birleştirirseniz tarayıcı yok sayar.

Bootstrap 4 kullanarak en kolay yolu buldum.

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

Bunu böyle başardım

  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>

Sonuç şuna benzer:

Kenar notu

Ortaya çıkan kodum biraz patlamış görünüyor bu yüzden Ruby on Rails kullandığımı lütfen unutmayın. İnce görünüm kodu aslında çok özlü:

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

Benim için, harika unicode vb. Yazı tipiyle sözde öğeleri kullanmaya çalışmak zorunda kalmadan bir metin girişinin içinde "bir simge" bulundurmanın kolay bir yolu, metin girişinin ve simgenin, bir sarmalayıcı öğesinin içinde, göreceli olarak konumlandıracağımız, ve hem arama girişini hem de harika yazı tipi simgesini mutlak olarak konumlandırın.

Arka plan resimleri ve metinlerle aynı şekilde yaparız. Bu yeni başlayanlar için de iyi hissediyorum, çünkü css konumlandırma yeni başlayanlar kodlama yolculuklarının başında öğrenmesi gereken bir şey, bu yüzden kodu anlamak ve yeniden kullanmak kolaydır.

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

Allcaps önerisi üzerine inşa. En az miktarda HTML içeren font-awesome arka plan yöntemi:

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

Metin giriş öğesinin içine odaklanmak için tıklanabilir simgeyi yapın.

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>

Sadece <i>Font Awesome kitaplığından etiketin içine istediğiniz simgeyi ekleyin ve sonuçların keyfini çıkarın.

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

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

Benim çözümüminput simgesini tutmak için etrafında göreli bir kapsayıcı olmasıydı . Bu dış konteynerin, ::afteristenen simgeye sahip,absolute .

HTML:

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

SASS kodu:

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

Giriş Çözümümün içine yazı tipi mükemmel bir simge eklemek için Çözüm. İşte girdi öğesinin içine simge eklemek için basit bir kod. Aşağıdaki kodu kopyalayın ve eklemek istediğiniz yere koyun. veya simgeyi değiştirmek istiyorsanız simge kodunuzu <i> etikete koymanız yeterlidir.

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

Font Awesome sürümü nedeniyle bazen simge görünmez. Sürüm 5 için css,

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

Kolay yol, ama bootstrap'a ihtiyacınız var

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

Aşağıdaki şeyleri denedim ve gerçekten iyi çalışıyor 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>

Bunu unicode veya fontawesome ile çalışmak için aşağıdaki gibi bir spanile eklemeniz gerekir class:

HTML'de:

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

CSS'de:

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