What is the process for inserting a font-awesome icon into @Html.TextBoxFor?

I'm having a particular issue: How do I go about inserting a fa-user icon into my textbox?

Here is the code in question:

@Html.AntiForgeryToken()
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="row">
     <div class="container col-md-12">
          <i class="fa fa-user col-md-12" aria-hidden="true"></i>
          @Html.TextBoxFor(m => m.UserName, new { @class = "form-control" })
          @Html.ValidationMessageFor(m => m.UserName, "", new { @class = "text-danger" })
     </div>
</div>

The "i" element doesn't seem to be appearing on my website when viewed in a browser. Is it not possible to include this icon on my site?

htmlcss.netasp.net-mvcfont-awesome

Answer №1

If you're trying to figure out how to add icons to your MVC-generated HTML, compare the code snippet below with the generated HTML:

<div class="input-group">
    <div class="input-group-addon">
        <i class="fa fa-envelope"></i>
    </div>
    @Html.TextBoxFor(m => m, new { @class = "form-control", @placeholder = "Email Address" })
</div>

Don't forget to mark this as the answer if it helped you!

Answer №3

   <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text"><i class="fa fa-user"></i></span>
      </div>
       @Html.TextBox(Model.UserName, GetHtmlAttributes(Model, "form-control"))
    </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Accordion feature exclusively toggles the initial item

I am having an issue with the code in my index.php file. Only the first item in the accordion menu is showing up correctly. When I click on "Status" or "Repeated", I expect to see the sub-menu of the clicked item, but instead, I am getting the result from ...

javascripthtmlnode.jsreactjs

The color of the progress bar in JS is not displaying properly

My work involves using jQuery to manipulate progress bars. The issue I am facing is defining standard colors that should be displayed on the progress bar based on the value received. Here is my code: var defaultSegmentColors = ['#FF6363', &ap ...

javascripthtmlcss

Ways to assign values to HTML table cells

I am facing an issue with two table cells where one span is located outside the td tag and the other is wrapped around td. <tr height="30"> <span data-name="toDD1" class="sstNumber"> </span> <td>Y</td> <span d ...

javascripthtml

Is there a way to create a Twitter Bootstrap panel with consistent padding and margins on all sides

I'm currently working on a webpage that involves using a background image with an inset opaque panel. My goal is to have the panel stretch all the way down to the bottom of the page, with some padding at the bottom for spacing. Additionally, I want ...

htmlcsstwitter-bootstrap

How can specific tags be removed from an XHTML document while preserving their content?

I am in search of a quick and efficient method to remove tags from an XHTML document. I believe there must be a simple solution among options like XSLT, XPath, XQuery, or custom C# programming using the .NET XML namespace. However, I am open to exploring o ...

c#.netxsltxpathxquery

Encountering an unexpected token error while attempting to incorporate JQuery into a React JS project

I am currently diving into the world of React.js and attempting to incorporate a side navigation bar on my homepage. However, I encountered an eslint error when trying to implement the sidebar using jQuery code. Below you will find the code snippet for the ...

javascripthtmljquerycssreactjs

Set up a mouseover function for a <datalist> tag

Currently, I am delving into the world of javascript/jquery and I have set up an input field with a datalist. However, I am encountering a slight hurdle - I am unable to trigger an event when hovering over the datalist once it appears. Although I have man ...

javascriptjqueryhtml

AngularJS mistakenly deletes the incorrect item when using the indexOf method

For the purpose of honing my skills in AngularJS and Rails, I am currently developing a note-taking application which functions similar to a blog. Terms like post equate to note in this context. The left sidebar (controlled by Sidebar.js) fetches all item ...

javascripthtmlangularjs

What is the best way to add an image within a div without affecting the layout of the subsequent div?

I have created an HTML form with 4 inputs and a text area using bootstrap. I am looking to add an image to the right of two divs without pushing one of them down. I want it to look like the first image attached, but currently, it looks like the second ima ...

jqueryhtmltwitter-bootstrap

Storing data locally with Localstorage and manipulating it with Jquery

I'm experiencing an issue with localstorage that I need help with. Context I am currently working on a web application for quotes that requires a bookmark system to save users' favorite quotes. To address this issue, I have created a jQuery scri ...

jquerycsshtmllocal-storage

Is there a way to bypass cells within an html table?

Creating an online board game and looking to have the cells go around the board. Wondering if anyone knows a way to skip the cells in the middle? Attempted using   but it doesn't seem to be effective. Here is a snippet of the code: #board { ...

htmlcsshtml-table

Forward users according to "?ref=XXX" at the end of the URL

I've been searching high and low without success for JavaScript code that can handle the following situation: When visitors arrive at http://example.com, I don't want any action to be taken. However, if they enter through a URL like http://exam ...

javascripthtmlurlhttp-redirect

Here is a unique rewrite of the text:"Implementing a feature to upload an image in PHP and AJAX without

Although it may seem repetitive, I have yet to find a solution that perfectly fits my requirements. I am looking to upload an image to a designated folder by simply selecting a file in the file browser, without the use of a submit button (which I have acco ...

javascriptphpjqueryhtmlajax

Ways to access input fields in a form without knowing the specific name

I am facing a challenge with a dynamically generated form using jQuery Ajax, where the input field names and values are also dynamic. I need to figure out how to update these fields using PHP. One issue I encounter is that upon form submission, I am unsur ...

phpjqueryhtml

How can I use CSS in Next.js to style a child element when its parent is being hovered over?

Here is the CSS code that specifically targets the child element "#overlay" when its parent, ".collection", is being hovered over: .collection { position: relative; overflow: hidden; } .collection:hover #overlay { position: absolute; opa ...

cssreactjsnext.js

Creating a dynamic process for assigning unique identifiers to objects in JavaScript

Struggling with JavaScript while working on a project in .Net. I am looking for a way to trigger a click on the 'generate' button that extracts data from the dropdown menu after the click event. I have a button named 'btn', which, whe ...

javascripthtml.netweb-applications

Encountering a snag during SVN commit with an error notification

Recently, I made some changes to a file and now I am facing an error while trying to commit it to the repository. Here is the stack trace of the error: Error: Commit failed (details follow) Error: MERGE request failed on '/qr/QR_MAVEN/quickres/branch ...

.netsvntortoisesvnrepository

Achieving the perfect button using a combination of material-ui and styled-components

Utilizing the ToggleButton and ToggleButtonGroup components from material-ui, starting with material-ui's gatsby template. To prevent common material-ui errors with production builds, I am attempting to incorporate styled-components as well. The foll ...

cssreactjsmaterial-uigatsbystyled-components

The ng-repeat directive in a row is malfunctioning

Just starting out with angularjs and facing an issue with getting data using ng-repeat within a div that is part of a row. I have implemented filtering and pagination from a dropdown, but it doesn't seem to be working as expected. Any assistance would ...

htmlmysqlangularjsangularjs-ng-repeat

The find() method in jQuery is struggling to locate an element

I have a couple of questions. ONE) I am attempting to retrieve the text from the first table, first row, first cell. It seems like the code for the first and second lines is the same, but the second line isn't returning any text. Any idea w ...

jqueryajaxhtml