locked
How insert icon inside input text mvc 5 RRS feed

  • Question

  • User795102932 posted
           <div class="form-group">
                @Html.LabelFor(model => model.StudentName, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.StudentName, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.StudentName, "", new { @class = "text-danger" })
                </div>
            </div>
    
            <div class="form-group">
                @Html.LabelFor(model => model.Age, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Age, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Age, "", new { @class = "text-danger"< })
                </div>
            </div>

    How insert an icon in this example

    Sunday, July 14, 2019 5:04 PM

Answers

  • User1520731567 posted

    Hi Irnel,

    What I want is to put an icon inside an input text. ...My problem is to do that same using Razor with the example I put before into Html helpers etc.

    If you want to put an icon inside an input text with html helper.

    I make a simple demo with some css and bootstrap glyphicon,you could refer to:

    View:

    <style>
    
            /* style glyph */
            .inner-addon .glyphicon {
                ;
                padding: 10px;
                pointer-events: none;
            }
    
    
        /* add padding  */
        .left-addon input {
            padding-left: 30px;
        }
    
    </style>
    
    
    <div class="form-group">
        @Html.Label("bbb", htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10 inner-addon left-addon">
            <i class="glyphicon glyphicon-user"></i>
            @Html.Editor("bbb", new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessage("bbb", "", new { @class = "text-danger" })
        </div>
    </div>
    
    

    More details,you could refer to:

    https://stackoverflow.com/questions/18838964/add-bootstrap-glyphicon-to-input-box

    In addition,You could also put icon inside button.

    Best Regards.

    Yuki Tao

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, July 17, 2019 6:29 AM

All replies

  • User409696431 posted

    Insert an icon where, in that example?

    Sunday, July 14, 2019 7:49 PM
  • User-474980206 posted

    as you are using bootstrap the most common way is via an input group:

       https://getbootstrap.com/docs/4.3/components/input-group/

    or plain CSS

      https://www.w3schools.com/howto/howto_css_search_button.asp

    Sunday, July 14, 2019 10:31 PM
  • User1520731567 posted

    Hi Irnel,

                    @Html.ValidationMessageFor(model => model.Age, "", new { @class = "text-danger"< })
    

    Do you want to add less than icon?

    If so,you could refer to Font Awesome Directional Icons, and take this demo as a reference.

    and do not forget to add css link:

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    

    Best Regards.

    Yuki Tao

    Monday, July 15, 2019 3:00 AM
  • User795102932 posted

    Hi all I think that I do not explain myself well.

    What I want is to put an icon inside an input text. I can do that using only pure html with bootstrap (fontawesome) without any problem.

    https://getbootstrap.com/docs/4.3/components/input-group/

    <div class="input-group flex-nowrap">
      <div class="input-group-prepend">
        <span class="input-group-text" id="addon-wrapping"><i class="fa fa-user"></i></span>
      </div>
      <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="addon-wrapping">
    </div>

    My problem is to do that same using Razor with the example I put before into Html helpers etc.

    Tuesday, July 16, 2019 10:46 PM
  • User409696431 posted

    Just to clarify, your example is not putting an icon inside the text input.  It is prepending the icon (or text) in front of the text input.

    You can do the same in MVC, just be aware of what the styles you are applying to the form inputs are doing.

    <div class="form-group">
                @Html.LabelFor(model => model.Age, htmlAttributes: new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.Age, new { htmlAttributes = new { @class = "form-control" } })
                    @Html.ValidationMessageFor(model => model.Age, "", new { @class = "text-danger"< })
                </div>
            </div>

    Class "form-control" has, among other attributes, display: block.  that means what you put in front of it will be on a different line.  You can specifically override that for inputs you want to prepend something in front of.  So put a <span> with your icon in front of the EditorFor, and add a style to its htmlAttributes:

    <div class="form-group">
          @Html.LabelFor(model => model.Age, htmlAttributes: new { @class = "control-label col-md-2" })
          <div class="col-md-10">
             <span>icon</span>@Html.EditorFor(model => model.Age, new { htmlAttributes = new { @class = "form-control", @style = "display:inline-block;" } })
              @Html.ValidationMessageFor(model => model.Age, "", new { @class = "text-danger"< })
         </div>
    </div>

    Replace my <span>icon</span> with <span>whatever element and styles create your icon</span>

    Tuesday, July 16, 2019 11:59 PM
  • User1520731567 posted

    Hi Irnel,

    What I want is to put an icon inside an input text. ...My problem is to do that same using Razor with the example I put before into Html helpers etc.

    If you want to put an icon inside an input text with html helper.

    I make a simple demo with some css and bootstrap glyphicon,you could refer to:

    View:

    <style>
    
            /* style glyph */
            .inner-addon .glyphicon {
                ;
                padding: 10px;
                pointer-events: none;
            }
    
    
        /* add padding  */
        .left-addon input {
            padding-left: 30px;
        }
    
    </style>
    
    
    <div class="form-group">
        @Html.Label("bbb", htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10 inner-addon left-addon">
            <i class="glyphicon glyphicon-user"></i>
            @Html.Editor("bbb", new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessage("bbb", "", new { @class = "text-danger" })
        </div>
    </div>
    
    

    More details,you could refer to:

    https://stackoverflow.com/questions/18838964/add-bootstrap-glyphicon-to-input-box

    In addition,You could also put icon inside button.

    Best Regards.

    Yuki Tao

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, July 17, 2019 6:29 AM
  • User795102932 posted

    Something like that is really what I needed. Thanks Yuki Tao

    Saturday, July 20, 2019 9:46 PM