articles

Home / DeveloperSection / Articles / Bootstrap Glyph icons

Bootstrap Glyph icons

Bootstrap Glyph icons

Anonymous User 14378 19-Aug-2014

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

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

After installing 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 a 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


Updated 23-Feb-2020
I am a content writter !

Leave Comment

Comments

Liked By