Значок Awesome шрифту всередині елемента введення тексту

Я намагаюся вставити значок користувача у поле введення імені користувача.

Я спробував одне з варіантів подібного питання, знаючи, що background-imageвластивість не працюватиме, оскільки шрифт Fow Awesome є шрифтом.

Далі йде мій підхід, і я не можу отримати дисплей піктограми.

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

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

У мене шрифт оголошено в шрифті за замовчуванням дивним css, тому я не був впевнений, чи правильно додавати сімейство шрифтів вище.

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

Ти маєш рацію. : до і: після того, як псевдо контент не призначений для роботи над заміненим контентом, як imgі inputелементами. Додавання елемента обгортки та оголошення сімейства шрифтів - одна з можливостей, як і використання фонового зображення. А може, текст заповнення html5 відповідає вашим потребам:

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

Браузери, які не підтримують атрибут заповнення, просто ігнорують його.

ОНОВЛЕННЯ

Перш , ніж селектор контенту вибирає вхід: input[type="text"]:before. Ви повинні вибрати обгортку: .wrapper:before. Дивіться http://jsfiddle.net/allcaps/gA4rx/ . Я також додав пропозицію про заповнення місця, де обгортка є зайвою.

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

Відступати

Шрифт Awesome використовує зону приватного використання Unicode (PUA) для зберігання значків. Інших символів немає, вони повертаються до стандартних налаштувань браузера. Це має бути таким же, як і будь-який інший вклад. Якщо ви визначаєте шрифт на елементах введення, тоді введіть той самий шрифт, що і резервний, у випадках, коли ми використовуємо піктограму. Подобається це:

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

Вихід:

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>

(Або)

Вихід:

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>

Ви можете використовувати обгортку. Всередині обгортки додайте шрифтовий дивовижний елемент i та inputелемент.

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

потім встановіть положення обгортки на відносне:

.wrapper { position: relative; }

а потім встановіть позицію iелемента в абсолютне значення та встановіть для нього правильне місце:

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

(Я знаю, це злом, але це робить роботу.)

Ця відповідь підійде для вас, якщо вам потрібні наступні умови (жодна з поточних відповідей не відповідала цим умовам):

1. Значок в текстовому полі
2. Піктограма не повинна зникати, коли текст вводиться на вхід, а введений текст йде праворуч від значка
3. Клацання піктограми повинно фокусувати основний вклад

Я вважаю, що 3 - це мінімальна кількість елементів HTML для задоволення цих умов:

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

Не потрібно багато кодувати ... просто виконайте наступні дії:

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

ви можете знайти посилання на Unicode ( приємний ) тут ...

Unicode FontAwesome для іконок

Прочитавши різні версії цього питання та обшукуючи, я придумав досить чисте рішення, що не містить js. Це схоже на рішення @allcaps, але дозволяє уникнути того, щоб питання введення шрифту не було змінено від основного шрифту документа.

Використовуйте ::input-placeholderатрибут для конкретного стилю тексту заповнення. Це дозволяє використовувати шрифт значка як шрифт заповнювача, а ваше тіло (або інший шрифт) як власне введений текст. Наразі вам потрібно вказати селекторів для конкретних постачальників.

Це добре працює, доки у вхідному елементі вам не потрібна комбінація значка та тексту. Якщо це зробити, вам потрібно буде помиритися з текстом-заповнювачем, як шрифтом браузера за замовчуванням (звичайна серіфа на моєму) для слів.

Наприклад
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';
}

Сперечиться з префіксами веб-переглядача: http://jsfiddle.net/gA4rx/78/

Зауважте, що вам потрібно визначити кожний селекторний веб-переглядач як окреме правило. Якщо ви поєднаєте їх, браузер проігнорує це.

Я знайшов найпростіший спосіб за допомогою 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>

Я цього домагався так

  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>

Результат виглядає приблизно так:

Бічна примітка

Зверніть увагу, що я використовую Ruby on Rails, тому мій отриманий код виглядає трохи підірваним. Код перегляду в тонкий насправді дуже стислий:

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

Для мене простий спосіб мати піктограму "всередині" введення тексту без необхідності намагатися використовувати псевдоелементи з дивовижним шрифтом unicode тощо - це введення тексту та піктограми в межах елемента обгортки, який ми розмістимо відносно, а потім розташуйте як введення пошуку, так і піктограму дивовижного шрифту в абсолюті.

Те саме, що ми робимо з фоновими зображеннями та текстом, як і ми. Я вважаю, що це добре і для початківців, оскільки позиціонування css - це те, що новачок повинен навчитися на початку своєї програми кодування, тому код легко зрозуміти та використовувати повторно.

    <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. Ось чудовий фоновий метод із найменшою кількістю 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";
}

Зробіть значок, що можна натискати, щоб сфокусувати всередині елемента введення тексту.

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>

Просто додайте потрібний значок у <i>тег із бібліотеки Font Awesome і насолоджуйтесь результатами.

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

чисто 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;
}

Моє рішення полягало в тому, щоб мати відносний контейнер навколо inputзначка для зберігання ікони. Цей зовнішній контейнер має ::afterпотрібний значок, розташований absoluteвсередині контейнера.

HTML:

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

Код 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;
    }
}

Моє рішення додати чудовий значок шрифту всередині вхідного елемента. Ось простий код для додавання значка всередині вхідного елемента. Просто скопіюйте код нижче та покладіть туди, де ви хочете додати. або якщо ви хочете змінити піктограму, тоді просто помістіть свій код іконки в <i> тег.

<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. Для версії 5 має бути 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;
}

Простий спосіб, але вам потрібна завантажувальна програма

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

Я спробував наведені нижче матеріали, і це дійсно добре працює 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>

Щоб вирішити цю проблему з юнікодом або fontawesome, ви повинні додати spanз , classяк показано нижче:

В HTML:

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

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