it-swarm.com.ru

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

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

Я попробовал одно из решений из аналогичного вопроса Зная, что свойство 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');
 }
107
Seong Lee

Ты прав. : 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; }
96
allcaps

Результат:

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>

(Или же)

Результат:

 enter image description here

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>
98
Palani Kumar

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

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

19
Mero

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

  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>

13
Skeets

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

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

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

FontAwesome Unicode для иконок

8
Rashid Iqbal

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

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

5
harryg

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

  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
Besi

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

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

Я нашел самый простой способ с помощью начальной загрузки 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
Henry O.

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

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

1
Armand
::-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">
0
nobjta_9x_tq
.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>
0
Ola Olushesi
<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
Richard Emert