Glyphicons are icon fonts which you can use in your web projects. Glyphicons Halflings are not free and require licensing, however their creator has made them available for Bootstrap projects free of cost. Bootstrap includes 200 Glyphicons. As opposed to previous sprite version these icons are available in font format for better usability and scalability.
How to Use Icons in Your Code:
To use the Bootstrap icons you will require an tag along with a base class glyphicon and an individual icon class glyphicon-*. The general syntax for using Bootstrap icons is:
Where "glyphicon-class-name" is the name of the particular icon class (e.g. glyphicon-search, glyphicon-user, glyphicon-star etc.) defined in bootstrap.css. For example, to use search icon you can place the following code just about anywhere:
Example: Try this Code:
— The output of the above example will look something like this:It is recommended, as a thank you, we ask you to include an optional link back to GLYPHICONS whenever practical.Since these Glyphicons are font based now you can create icons of any color just applying the CSS color property on the specific element.
How to Use Icons in Your Code:
To use the Bootstrap icons you will require an tag along with a base class glyphicon and an individual icon class glyphicon-*. The general syntax for using Bootstrap icons is:
<span class="glyphicon glyphicon-class-name"></span>
Where "glyphicon-class-name" is the name of the particular icon class (e.g. glyphicon-search, glyphicon-user, glyphicon-star etc.) defined in bootstrap.css. For example, to use search icon you can place the following code just about anywhere:
Example: Try this Code:
<button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span> Search</button> <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-search"></span> Search</button>
N.B: Bootstrap icons are provided by Glyphicons. However you are free to use these icons in your project but as a courtesy you can consider to include a link back to Glyphicons whenever practical.
Post a Comment