Phông chữ Biểu tượng tuyệt vời bên trong yếu tố nhập văn bản

Tôi đang cố gắng chèn một biểu tượng người dùng trong trường nhập tên người dùng.

Tôi đã thử một trong những giải pháp từ câu hỏi tương tự khi biết rằng background-imagetài sản sẽ không hoạt động vì Font Awesome là một phông chữ.

Sau đây là cách tiếp cận của tôi và tôi không thể hiển thị biểu tượng.

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

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

Tôi có mặt phông chữ được khai báo trong phông chữ mặc định tuyệt vời css vì vậy tôi không chắc chắn nếu thêm họ phông chữ ở trên là cách tiếp cận đúng.

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

Bạn đúng. : trước và: sau nội dung giả không nhằm mục đích làm việc trên các phần tử imgvà nội dung được thay thế input. Thêm một yếu tố gói và khai báo một họ phông chữ là một trong những khả năng, như đang sử dụng một hình ảnh nền. Hoặc có thể văn bản giữ chỗ html5 phù hợp với nhu cầu của bạn:

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

Các trình duyệt không hỗ trợ thuộc tính giữ chỗ sẽ đơn giản bỏ qua nó.

CẬP NHẬT

Bộ chọn nội dung trước chọn đầu vào : input[type="text"]:before. Bạn nên chọn trình bao bọc : .wrapper:before. Xem http://jsfiddle.net/allcaps/gA4rx/ . Tôi cũng đã thêm đề xuất giữ chỗ trong đó trình bao bọc là dự phòng.

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

Dự phòng

Font Awesome sử dụng Vùng sử dụng riêng Unicode (PUA) để lưu trữ các biểu tượng. Các ký tự khác không có mặt và trở về mặc định của trình duyệt. Điều đó nên giống như bất kỳ đầu vào khác. Nếu bạn xác định một phông chữ trên các thành phần đầu vào, thì hãy cung cấp cùng một phông chữ như dự phòng cho các tình huống chúng ta sử dụng một biểu tượng. Như thế này:

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

Đầu ra:

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>

(Hoặc là)

Đầu ra:

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>

Bạn có thể sử dụng một trình bao bọc. Trong trình bao bọc, thêm phần tử phông chữ tuyệt vời i và inputphần tử.

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

sau đó đặt vị trí của trình bao bọc thành tương đối:

.wrapper { position: relative; }

và sau đó đặt ivị trí của phần tử thành tuyệt đối và đặt vị trí chính xác cho nó:

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

(Đó là một hack, tôi biết, nhưng nó hoàn thành công việc.)

Câu trả lời này sẽ phù hợp với bạn nếu bạn cần đáp ứng các điều kiện sau (không có câu trả lời nào hiện tại đáp ứng các điều kiện này):

1. Biểu tượng nằm trong hộp văn bản
2. Biểu tượng không nên biến mất khi văn bản được nhập vào đầu vào và văn bản được nhập ở bên phải biểu tượng
3. Nhấp vào biểu tượng sẽ đưa đầu vào cơ bản vào trọng tâm

Tôi tin rằng 3 là số lượng phần tử HTML tối thiểu để đáp ứng các điều kiện sau:

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

Không cần mã nhiều ... chỉ cần làm theo các bước sau:

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

bạn có thể tìm thấy các liên kết đến Unicode ( fontawgie ) tại đây ...

Phông chữ Unicode cho các biểu tượng

Đọc các phiên bản khác nhau của câu hỏi này và tìm kiếm xung quanh tôi đã đưa ra một giải pháp khá sạch sẽ, không có js. Nó tương tự như giải pháp @allcaps nhưng tránh vấn đề phông chữ đầu vào bị thay đổi so với phông chữ tài liệu chính.

Sử dụng ::input-placeholderthuộc tính để định kiểu cụ thể văn bản giữ chỗ. Điều này cho phép bạn sử dụng phông chữ biểu tượng của bạn làm phông chữ giữ chỗ và cơ thể của bạn (hoặc phông chữ khác) làm văn bản nhập thực tế. Hiện tại bạn cần chỉ định các bộ chọn dành riêng cho nhà cung cấp.

Điều này hoạt động tốt miễn là bạn không cần kết hợp biểu tượng và văn bản trong thành phần đầu vào của mình. Nếu bạn làm như vậy thì bạn sẽ cần phải đưa ra văn bản giữ chỗ là phông chữ trình duyệt mặc định (chữ thường của tôi) cho các từ.

Ví dụ:
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';
}

Fiddle với bộ chọn tiền tố trình duyệt: http://jsfiddle.net/gA4rx/78/

Lưu ý rằng bạn cần xác định từng bộ chọn dành riêng cho trình duyệt làm quy tắc riêng. Nếu bạn kết hợp chúng, trình duyệt sẽ bỏ qua nó.

Tôi tìm thấy cách dễ nhất bằng cách sử dụng 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>

Tôi đã đạt được điều này như vậy

  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>

Kết quả trông như thế này:

Lưu ý bên

Xin lưu ý rằng tôi đang sử dụng Ruby on Rails để mã kết quả của tôi trông hơi bị nổ tung. Mã xem trong slim thực sự rất súc tích:

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

Đối với tôi, một cách dễ dàng để có một biểu tượng "bên trong" một kiểu nhập văn bản mà không phải cố gắng sử dụng các phần tử giả với phông chữ unicode tuyệt vời, v.v., là để nhập văn bản và biểu tượng trong một phần tử trình bao mà chúng ta sẽ định vị tương đối, và sau đó định vị cả đầu vào tìm kiếm và biểu tượng tuyệt vời của phông chữ.

Giống như cách chúng ta làm với hình ảnh nền và văn bản, chúng ta sẽ làm ở đây. Tôi cảm thấy điều này cũng tốt cho người mới bắt đầu, vì định vị css là điều mà người mới bắt đầu nên học khi bắt đầu hành trình mã hóa của họ, vì vậy mã rất dễ hiểu và sử dụng lại.

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

Xây dựng trên đề nghị allcaps. Đây là phương pháp nền phông chữ tuyệt vời với số lượng HTML ít nhất:

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

Tạo biểu tượng có thể nhấp để tập trung bên trong thành phần nhập văn bả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>

Chỉ cần thêm bất kỳ biểu tượng nào bạn thích bên trong <i>thẻ, từ thư viện Font Awesome và tận hưởng kết quả.

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

hoàn toàn 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;
}

Giải pháp của tôi là có một thùng chứa tương đối xung quanh inputđể giữ biểu tượng. Container bên ngoài đó có một ::afterbiểu tượng mong muốn, được định vị absolutetrong container.

HTML:

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

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

Giải pháp của tôi để thêm một biểu tượng phông chữ tuyệt vời bên trong phần tử đầu vào. Đây là một mã đơn giản để thêm biểu tượng bên trong phần tử đầu vào. Chỉ cần sao chép mã dưới đây và đặt nơi bạn muốn thêm. hoặc nếu bạn muốn thay đổi biểu tượng thì chỉ cần đặt mã biểu tượng của bạn vào <i> thẻ.

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

Đôi khi biểu tượng sẽ không hiển thị do phiên bản Font Awesome. Đối với phiên bản 5, css phải là

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

Cách dễ dàng, nhưng bạn cần 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">

Tôi đã thử những thứ dưới đây và nó thực sự hoạt động tốt 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>

Để làm việc này với unicode hoặc fontawesome, bạn nên thêm một spanbằng classnhư dưới đây:

Trong HTML:

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

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