In this article, I’m explaining about Bootstrap Glyph icons

Firstly install Bootstrap package from Manage NuGet Packages in your project.

After install Bootstrap package use these three files in your project

<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>

 

How to Use Glyph icons:-


All glyph icons require base class and separate icon class here is a lot of icons class

these icons class are meaning full. Be sure to leave a space between the icon and

text.

Example
<div class="container" style="width: 50%;">
    <div class="well">
        <div class="row">
            <div class="col-md-4">
                <label>First Name</label>
            </div>
            <div class="col-md-8">
                <input type="text" />
            </div>
        </div>
        <br />
        <div class="row">
            <div class="col-md-4">
                <label>Last Name</label>
            </div>
            <div class="col-md-8">
                <input type="text" />
            </div>
        </div>
        <br />
        <div class="row">
            <div class="col-md-4">
                <label>Email ID</label>
            </div>
            <div class="col-md-8">
                <input type="text" />
            </div>
        </div>
        <br />
        <div class="row">
            <div class="col-md-4">
                <label>Country</label>
            </div>
            <div class="col-md-8">
                <select>
                    <option>India</option>
                    <option>USA</option>
                    <option>South Africa</option>
                </select>
            </div>
        </div>
        <br />
        <div class="row">
            <div class="col-md-offset-4 col-md-8 text-right">
                <button type="button" class="btn btn-success">
                    <span class="glyphicon glyphicon-saved"></span>Save
                </button>
                <button type="button" class="btn btn-danger">
                    <span class="glyphicon glyphicon-trash"></span>Delete
                </button>
                <button type="button" class="btn btn-primary">
                    <span class="glyphicon glyphicon-remove-sign"></span>Clear
                </button>
            </div>
        </div>
    </div>
</div>

 

Here is glyph icons base class glyphicon and seprate icon class glyphicon-

savedwhole syntax for make glyph icons <span class="glyphicon glyphicon-

remove-sign"></span>.

Output

Bootstrap Glyph icons

 

 If you want to full implementation of bootstrap components  click here

  Modified On Nov-30-2017 02:26:18 AM



  1. <td>
                @Html.ActionLink("Modificar", "Edit", new { id = item.EmpleadoID }, new { @class = "btn btn-primary btn-sm" })
                @Html.ActionLink("Detalles", "Details", new { id = item.EmpleadoID }, new { @class = "btn btn-warning btn-sm" })
                @Html.ActionLink("Eliminar", "Delete", new { id = item.EmpleadoID }, new { @class = "btn btn-danger btn-sm" })
            </td>

Leave Comment