Bootstrap glyphicon with MVC

Question

Withour Razor syntax I can use glyphicon like that:

<div id="addIndirectCityBtn" class="btn btn-success btn-xs">
    <span class="glyphicon glyphicon-plus"></span> Add
</div>

And it works perfect, glyphicon with textbox using razor syntax as below

@Html.TextBoxFor(model => model.From.City, new { @id = "cityFrom", @class = "form-control", @placeholder = "City", @style = "margin-bottom: 10px;" })

Where should I use glyphicon to have it in textbox or next to textbox

What is your requirement. Do you want to show the glyphicon next to text Box? — user1672994, Dec 29 '15 at 16:19
Most solutions will involve either making the outer div appear to be the text box, or absolutely positioning the glyphicon within the parent div and applying a left or right padding to the input. Check out the answers on this one: http://stackoverflow.com/questions/18838964/add-bootstrap-glyphicon-to-input-box — Sam, Dec 29 '15 at 17:13

score 0 · Answer 1 · answered Dec 29 '15 at 17:55

You can use input group in bootstrap, form-control class will put the object 100% width of box, so you need to group them.

Here is an example

<div class="input-group">
    @Html.TextBoxFor(model => model.From.City, new { @id = "cityFrom", @class = "form-control", @placeholder = "City", @style = "margin-bottom: 10px;" }
    <span class="input-group-addon"><i class="glyphicon glyphicon-plus"></i> Add</span>
 </div>

score 0 · Answer 2 · answered Jul 21 '17 at 10:19

How To use Glyphicons in Mvc Using Model

for example :

Model

public class Menu
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Menuicon { get; set; }
    }

Controller

 [HttpPost]
        public ActionResult Index(Menu m)
        {
            ViewBag.Message = m.Menuicon;
            return View(m);
        }

Index View

@model projectname.Models.Menu

@using (Html.BeginForm("Index", "Home", FormMethod.Post))
{
    @Html.LabelFor(Model => Model.Name)<br />
        @Html.EditorFor(Model => Model.Name)<br />
        @Html.LabelFor(Model => Model.Menuicon)<br />
        @Html.EditorFor(Model => Model.Menuicon)<br />

        <input type="submit" value="Save">
}
<br />

<div>
    <span class="@ViewBag.Message"></span>
</div>

Result

Bootstrap glyphicon with MVC

2 Answers2