Значок Font Awesome внутри элемента ввода текста

136

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

Я попробовал одно из решений аналогичного вопроса, зная, что background-imageсвойство не будет работать, так как Font Awesome - это шрифт.

Следующее - мой подход, и я не могу получить отображение значка.

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

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

У меня есть шрифт face, объявленный в шрифте по умолчанию 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');
 }
Сон Ли
источник
Что ты хочешь узнать? В чем вопрос / ошибка?
allcaps
@allcaps Упс .. Я признаю, что нет способа определить ошибку, с которой я сталкиваюсь, просто просмотрев мой оригинальный пост. Я немного отредактировал.
Сонг Ли
Смотрите мой обновленный ответ.
allcaps

Ответы:

108

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

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

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

ОБНОВИТЬ

Прежде , чем селектор контента выбирает вход: 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 Private Use Area (PUA) для хранения иконок. Другие символы отсутствуют и возвращаются к браузеру по умолчанию. Это должно быть так же, как любой другой вход. Если вы определяете шрифт для элементов ввода, то предоставьте тот же шрифт, что и в качестве запасного, для ситуаций, когда мы используем значок. Как это:

input { font-family: 'FontAwesome', YourFont; }
allcaps
источник
4
Использование вашего метода заполнителя работает. Проблема в том, что обычный (не пиктограммный) текст не совпадает с шрифтом остальной части страницы и отображается в качестве браузера с засечками по умолчанию. Есть ли способ обойти это?
Harryg
6
Font Awesome использует Unicode Private Use Area (PUA) для хранения иконок. Другие символы отсутствуют и возвращаются к браузеру по умолчанию. Это должно быть так же, как любой другой вход. Если определить шрифт на элементы ввода где - нибудь, а затем поставить тот же шрифт , как запасной вариант для ситуаций , когда нам использовать значок: input { font-family: 'FontAwesome' YourFont; }. Это помогает? Вы всегда можете задать новый вопрос.
allcaps
1
@allcaps рекомендация использовать запасное семейство шрифтов для заменителей работает ЧУДЕСА !! Я не думал менять шрифт через запасной вариант. Можете ли вы обновить свой ответ, чтобы включить резервный шрифт для будущих пользователей? Спасибо!
ProfileTwist
1
где я могу найти список кода. я имею в виду пользователя fa & # 61447;
Эльор,
1
@Elyor: Вам не нужно использовать HTML-сущность. Если ваш проект UTF-8, вы можете просто скопировать и вставить шрифт Font awesome glyph. Вероятно, он будет отображаться как блок в вашем редакторе кода, но это нормально. Вы также можете использовать один из многих онлайн-конвертеров unicode-to-html-entity-converter.
allcaps
123

Вывод:

введите описание изображения здесь

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>
Palanikumar
источник
2
Это был отличный совет по использованию font-awesome с текстовым полем.
Сунил
Можно ли сделать этот значок кликабельным?
FrenkyB
5
@FrenkyB, да. <span class = "fa fa-info-circle errspan" onclick = 'YOUR_FUNCTION ()'> </ span>
Palanikumar
2
Настройка z-index: 1заставит основной ввод поймать фокус, когда вы нажмете на значок - что-то, что вам может понадобиться, например, при добавлении средства выбора даты.
Ромарикдригон
Работает нормально для меня, но я не использовал position: relative(отрицательные поля не нужны) и z-index(как только элемент отображается после ввода)
Pierre de LESPINAY
24

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

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

Меро
источник
2
Зачем нам нужен .wrapper там?
Ашфак Рифаи
Насколько я понимаю, абсолютные элементы располагаются относительно ближайшего «позиционированного» предка. Положение: относительный означает, что обертка «позиционирована» (она также может быть абсолютной, фиксированной или липкой). Если вы этого не сделаете, значок будет абсолютно позиционирован относительно некоторого другого элемента выше в dom (или, если позиционированные элементы не найдены, относительно области просмотра).
Jaqen H'ghar
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>

Skeets
источник
4
Лучший ответ на наличие значка внутри поля ввода, где значок остается видимым, пока пользователь печатает.
ObjectiveTC
top: calc (50% - 0.5em) предполагает, что ваш ярлык имеет высоту 1em
drichar
1
@drichar - я только что проверил, это все еще работает с любой высотой этикетки. До тех пор, пока вы не выровняете текст метки по вертикали внутри метки (что не является значением по умолчанию), поскольку по умолчанию он выравнивается по верху, метка повыше будет работать правильно. Я также проверил с различными размерами шрифта на этикетке и на входе. Кажется, работает во всех сценариях.
Скитс
@ SkeetsO'Reilly Я исправлюсь. Я путаю их и рем. 0.5em - это половина размера шрифта. Отличное решение, я использую его в проекте (просто использую пользовательский SVG, а не FA, у которого нет размера шрифта, что привело к моей проблеме с позиционированием и
некорректному
14

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

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

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

FontAwesome Unicode для иконок

Рашид Икбал
источник
Что если я уже использую другое семейство шрифтов для заполнителя? тогда это не сработает. Есть ли способ заставить текст "Поиск" в "& # xf002 Поиск" использовать собственный шрифт, а в Юникоде по-прежнему используется замечательный шрифт?
Сушмит Сагар
6

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

Ола Олушеси
источник
Привет, пожалуйста, приложите небольшое объяснение к вашему решению.
Адитья Тхакур
1
Этот ответ будет работать для вас, если вам нужно выполнить следующие условия (ни один из текущих ответов не выполнил эти условия): значок находится внутри текстового поля. Значок не должен исчезать при вводе текста во ввод, а ввод текста переходит к Право на иконку Нажатие на иконку должно сфокусировать исходный ввод. Я считаю, что 3 - это минимальное количество элементов HTML, удовлетворяющих условиям
Ola Olushesi
5

Прочитав различные версии этого вопроса и обыскав вокруг, я нашел довольно чистое решение без 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/

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

harryg
источник
Хотя это элегантное решение, оно не достигает ожидаемого поведения.
Оливье Рефало
Действительно, кажется, что браузеры Webkit - единственные, которые font-familyв настоящее время принимают этот селектор. Мы можем только надеяться на более широкое признание в будущем.
Гарриг
5

Я нашел самый простой способ, используя 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>
Генри О.
источник
2

Я добился этого так

  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, поэтому мой полученный код выглядит немного взорванным. Код представления в 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
Besi
источник
2

Для меня простой способ иметь значок «внутри» ввода текста, не пытаясь использовать псевдоэлементы с удивительным шрифтом 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;
    }
Gerard
источник
1

Опираясь на предложение 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

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

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 и наслаждайтесь результатами.

Armand
источник
0
<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>
Ричард Эмерт
источник
2
Для OP будет более полезным, если вы также опубликуете некоторое объяснение того, что делает этот блок кода!
Ким
0

чисто 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;
}
Рокки WEI
источник
1
Можете ли вы объяснить свой ответ, пожалуйста?
Э. Зейтинчи
0

Мое решение состояло в том, чтобы иметь относительный контейнер 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;
    }
}
Floris
источник
0

Мое решение, чтобы добавить удивительный шрифт значок внутри элемента ввода. Вот простой код для добавления значка внутри элемента ввода. Просто скопируйте код ниже и укажите, куда вы хотите добавить. или если вы хотите изменить значок, просто поместите свой код значка в <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>

Soft CodeOn
источник
2
Ответ полезен, но предложение, которое является спамом, не разрешено. Если вы хотите что-то подобное, вы можете поместить ссылку в своем профиле.
Макьен
Хотя этот фрагмент кода может решить вопрос, в том числе объяснение действительно помогает улучшить качество вашего сообщения. Помните, что вы отвечаете на вопрос читателей в будущем, и эти люди могут не знать причин, по которым вы предлагаете код.
Клийстерс
0

Иногда значок не отображается из-за версии 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;
}
claudios
источник
0

Простой способ, но вам нужен бутстрап

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

введите описание изображения здесь

Бакар Перейра
источник
-1
::-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">
nobjta_9x_tq
источник
-3

Я попробовал следующие вещи, и это действительно хорошо работает 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>

Sandid
источник
1
вопрос об использовании шрифта потрясающие иконки
gaitat
-5

Чтобы решить эту проблему с юникодом или 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;           
}
Веб-дизайнер и промоутер
источник
1
это не поместит иконку внутри ввода текста
Джанфранко П.
-9
<!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>
Анкит
источник