Home > DeveloperSection > Articles > Bootstrap Glyph icons

Bootstrap Glyph icons


Bootstrap Bootstrap 
Ratings:
1 Comment(s)
 4388  View(s)
Rate this:

Bootstrap Glyph icons

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="width50%;">

    <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


How Add Icon to the project Asp.Net MVC with Bootstrap

By Candido Reyes on   2 months ago



<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>

Don't want to miss updates? Please click the below button!

Follow MindStick