Добавление значка в текстовое поле в mvc5

В настоящее время я пытаюсь добавить значок в текстовое поле в mvc5. Я довольно новичок в asp.net, и я не могу понять, как это сделать. Обычно я просто использовал <i class="fa fa-icon"></i>.Добавление значка в текстовое поле в mvc5

В области ввода, однако у меня есть:

@Html.TextboxFor(m=> m.EmailAddress, new {@placeholder = "Email Address"})

Любая помощь будет принята с благодарностью.

источник

2016-01-05 Damian Buttle

Помощник Html, который вы используете, просто генерирует поле ввода html и связывает его с полем вашей модели EmailAddress. То, что вы хотите достичь, не имеет ничего общего с ASP.NET или MVC; это просто CSS. Ваше поле ввода по умолчанию будет иметь атрибут id «EmailAddress». И вы можете просто использовать некоторые CSS как:

#EmailAddress{ 
    background: url(images/some-image.gif) no-repeat scroll 5px 5px; 
    padding-left:30px; 
}

просто для примера.

В качестве альтернативы, вы можете использовать помощник Html, чтобы дать поле ввода какой-то класс, как:

@Html.TextboxFor(m=> m.EmailAddress, new {@placeholder = "Email Address", 
       @class = "someClass"})

и стиль класса. Надеюсь, это поможет.

Edit: Если вы хотите добавить font-awesome значок вместо растрового изображение внутри поля ввода, вы можете также попробовать:

@Html.TextBoxFor(m => m.Email, new { @class = "someClass", 
    placeholder = HttpUtility.HtmlDecode("&#xf007; Email Address"), 
    style = "font-family:Arial, FontAwesome" })

Переключите шрифта удивительный код, как хотелось бы. Кроме того, вы можете сделать это снова с помощью CSS:

.someClass::-webkit-input-placeholder::before { font-family: 
      fontAwesome; content:'\f007 '; color: #69f }

источник

2016-01-05 23:44:51

Вы должны создать класс CSS или идентификатор, чтобы сделать это, и установить текстовое поле с этим классом или идентификатором. Например:

Css Файл

.txtWithImage{ 
    background-image:url('images/usericon.png') left center no-repeat; 
}

Asp.Net MVC Textbox

@Html.TextboxFor(m=> m.EmailAddress, new {@class="txtWithImage" @placeholder = "Email Address"})

источник

2016-01-05 23:47:52

Если вы используете загрузчик с ASP.Net MVC 5 (который по умолчанию части новое приложение MVC 5), то вы можете использовать класс bootstraps для достижения этого

<div class="form-group has-success has-feedback"> 
    @Html.TextboxFor(m=> m.EmailAddress, new {@class="form-control" @placeholder = "Email Address"}) 
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span> 
</div>

Этот код отображает значок успеха с текстовым полем. Ниже приведен снимок.

Для получения более подробной информации о документации по бутстраху смотрите here.

источник

2016-01-06 09:22:46

Добавление значка в текстовое поле в mvc5

ответ

Смежные вопросы