Используйте шрифт Awesome Icon в Placeholder

Question

Можно ли использовать Font Awesome Icon в Placeholder? Я читаю, где HTML не разрешен в заполнителе. Есть ли обходной путь?

placeholder="<i class='icon-search'></i>" 

Answer 1

Вы не можете добавить иконку и текст, потому что вы не можете применить другой шрифт часть заполнителя, однако, если вы удовлетворены только иконку, то он может работать. Значки FontAwesome - это просто символы с пользовательским шрифтом (вы можете посмотреть на FontAwesome.css для экранированного символа Unicode в правиле content. В меньшем исходном коде он найден в variables.less. Задача заключалась бы в замене шрифтов, когда вход не пуст . Объедините его с JQuery как this

<form role="form"> 
    <div class="form-group"> 
    <input type="text" class="form-control empty" id="iconified" placeholder="&#xF002;"/> 
    </div> 
</form> 

с помощью этого CSS:.

input.empty { 
    font-family: FontAwesome; 
    font-style: normal; 
    font-weight: normal; 
    text-decoration: inherit; 
} 

И это (простой) JQuery

$('#iconified').on('keyup', function() { 
    var input = $(this); 
    if(input.val().length === 0) { 
     input.addClass('empty'); 
    } else { 
     input.removeClass('empty'); 
    } 
}); 

Однако переход между шрифтами не будет гладким.

Answer 2

Где поддерживается, вы можете использовать псевдоселектор ::input-placeholder в сочетании с ::before.

Смотрите пример на:

http://codepen.io/JonFabritius/pen/nHeJg

Я просто работал над этим и наткнулся на эту статью, из которой я модифицированном этот материал:

http://davidwalsh.name/html5-placeholder-css

Answer 3

Если вы с использованием FontAwesome этого должно быть достаточно:

<input type="text" placeholder="&#xF002;" style="font-family:Arial, FontAwesome" /> 

Список шестнадцатеричных кодов можно найти в Font Awesome cheatsheet.

Answer 4

Я использую Ember (версия 1.7.1), и мне нужно было как привязать значение ввода, так и иметь местозаполнитель, который был значком FontAwesome. Единственный способ привязать значение в Ember (что я знаю) - использовать встроенный помощник. Но это приводит к тому, что заполнитель может быть экранирован, «& # xF002» просто появляется именно так, текст.

Если вы используете Ember или нет, вам нужно установить CSS заполнитель для ввода шрифта для семейства шрифтов FontAwesome. Это SCSS (с использованием Bourbon for the placeholder styling):

input { 
     width:96%; 
     margin:5px 2%; 
     padding:0 8px; 
     border:1px solid #444; 
     border-radius: 14px; 
     background: #fff; 
     @include placeholder { 
     font-family: 'FontAwesome', $gotham; 
     } 
    } 

Если вы используете только рули, как уже упоминалось ранее, вы можете просто установить HTML объект как заполнитель:

<input id="listFilter" placeholder="&#xF002;" type="text"> 

Если вы используете Ember привяжите местозаполнитель к свойству контроллера, имеющему значение unicode.

в шаблоне:

{{text-field 
    id="listFilter" 
    placeholder=listFilterPlaceholder 
    value=listFilter}} 

на контроллере:

listFilter: null, 
listFilterPlaceholder: "\uf002" 

И ценность переплетные работы отлично!

Answer 5

Я решил с помощью этого метода:

В CSS я использовал этот код для fontAwesome класса:

.fontAwesome { 
    font-family: 'Helvetica', FontAwesome, sans-serif; 
} 

В HTML у меня есть добавлен fontawesome class и fontawesome код значок внутри заполнителем:

<input type="text" class="fontAwesome" name="emailAddress" placeholder="&#xf0e0; insert email address ..." value=""> 

Вы можете увидеть в CodePen.

Answer 6

Существует небольшая задержка и jank, поскольку шрифт изменяется в ответе, предоставленном Джейсоном. Использование события «change» вместо «keyup» разрешает эту проблему.

$('#iconified').on('change', function() { 
    var input = $(this); 
    if(input.val().length === 0) { 
     input.addClass('empty'); 
    } else { 
     input.removeClass('empty'); 
    } 
}); 

Answer 7

Я делаю это, добавив fa-placeholder класс для ввода текста:

<input type="text" name="search" class="form-control" placeholder="&#xF002;" />

так, в CSS просто добавьте это:

.fa-placholder { font-family: "FontAwesome"; }

Это хорошо работает для меня.

Update:

Чтобы изменить шрифт, а тип пользователя в вашем вводе текста, просто добавьте свой шрифт после шрифта удивительного

.fa-placholder { font-family: "FontAwesome", "Source Sans Pro"; }

Answer 8

Использования placeholder="" в вашем входе. Вы можете найти unicode на странице FontAwesome http://fontawesome.io/icons/. Но вы должны обязательно добавить style="font-family: FontAwesome;" на свой вход.

Answer 9

Игнорирование jQuery может быть выполнено с использованием ::placeholder входного элемента.

<form role="form"> 
    <div class="form-group"> 
    <input type="text" class="form-control name" placeholder="&#xF002;"/> 
    </div> 
</form> 

устанавливаемой сотовая часть

input.name::placeholder{ font-family:fontAwesome; font-size:[size needed]; color:[placeholder color needed] } 

input.name{ font-family:[font family you want to specify] } 

ЛУЧШЕЙ ЧАСТИ: Вы можете иметь различное семейство шрифтов для заполнителя и текста