Шрифт удивительный значок внутри элемента ввода текста

Я пытаюсь вставить значок пользователя в поле ввода имени пользователя.



Я пробовал одно из решений из аналогичного вопроса
зная это background-image свойство не будет работать с Шрифт Удивительным шрифт.



следующий мой подход, и я не могу получить значок дисплея.



.wrapper input[type="text"] {

    position: relative;

}



.wrapper input[type="text"]:before {

    font-family: 'FontAwesome';

    position: absolute;

    top: 0px;

    left: -5px;

    content: "f007";

}


у меня есть шрифт, объявленный в шрифте по умолчанию awesome css, поэтому я не был уверен, что добавление font-family выше было правильным подходом.



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

 }
742   14  

14 ответов:

вы правы. :до и после псевдоконтент не предназначен для работы с замененным контентом, таким как img и input элементы. Добавление элемента обертывания и объявление семейства шрифтов является одной из возможностей, как и использование фонового изображения. Или, может быть, html5 заполнитель текста соответствует вашим потребностям:

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

браузеры, которые не поддерживают атрибут-заполнитель, просто игнорируют его.

обновление

селектор содержимого before выбирает вход: 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>

откат

Font Awesome использует частную область использования Unicode (PUA) для хранения значков. Другие символы отсутствуют и возвращаются к браузеру по умолчанию. Это должно быть то же самое, что и любой другой вход. Если вы определяете шрифт для входных элементов, то укажите тот же шрифт, что и запасной вариант для ситуаций, когда мы используем значок. Вот так:

input { font-family: 'FontAwesome', YourFont; }
88  
2018-04-01 01:28:32

выход:

enter image description here

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>
88  
2017-08-04 00:47:16

вы могли бы использовать оболочку. Внутри обертки добавьте шрифт awesome element 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; }

(это хак, я знаю, но он выполняет свою работу.)

19  
2017-01-10 01:50:20

этот ответ будет работать для вас, если вам нужно выполнить следующие условия (ни один из текущих ответов не соответствует этим условиям):

  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>
9  
2017-05-03 20:46:13

прочитав различные версии этого вопроса и поиск вокруг я придумал довольно чистый, js-free, решение. Это похоже на решение @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/

обратите внимание, что вам нужно определить каждый конкретный селектор браузера как отдельное правило. Если вы объедините их браузер будет игнорировать его.

5  
2014-03-18 13:50:38

Не нужно много кода... просто выполните следующие действия:

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

вы можете найти ссылки на Unicode (fontawesome) здесь...

Unicode для FontAwesome иконки

5  
2017-06-28 15:57:49

Я сделал это так

  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>

результат выглядит так:

result

Примечание

обратите внимание, что я использую Ruby on Rails, поэтому мой полученный код выглядит немного взорванным. Код представления в slim на самом деле очень лаконичен:

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
2  
2016-05-20 14:03:06

основываясь на предложении 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";
}
1  
2015-06-29 17:11:12

Я нашел самый простой способ с помощью 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>
1  
2018-04-15 14:46:46

сделать кликабельный значок, чтобы сосредоточиться внутри элемента ввода текста.

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> тег, от шрифта удивительной библиотеки и наслаждаться результатами.

0  
2017-02-21 19:04:18 
<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>
0  
2018-08-08 07:53:04

Я пробовал ниже вещи, и это действительно работает хорошо 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>
-1  
2016-07-13 20:59:09

чтобы работать с unicode или 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;           
}
-4  
2014-10-15 10:43:07 
<!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>
-7  
2014-10-09 17:06:24

Comments

    Ничего не найдено.
Click here to cancel reply.