69 lines
2.4 KiB
Markdown
69 lines
2.4 KiB
Markdown
|
---
|
|||
|
|
title: Icons
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## Icons
|
|||
|
|
|
|||
|
|
The Bootstrap framework provides you Glyphicons for icon.
|
|||
|
|
Bootstrap doesn’t include an icon library by default, but it has a handful of recommendations for you to choose from. While most icon sets include multiple file formats, we prefer SVG implementations for their improved accessibility and vector support.
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
### How to use
|
|||
|
|
|
|||
|
|
To use Bootstrap icon create a span tag with base class `glyphicon` and individual icon class.
|
|||
|
|
Use it only on elements that contain no text content and have no child elements.
|
|||
|
|
|
|||
|
|
**Code Example:**
|
|||
|
|
|
|||
|
|
`<span class="glyphicon glyphicon-search" aria-hidden="true"></span>`
|
|||
|
|
|
|||
|
|
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
|
|||
|
|
|
|||
|
|
`<span class="glyphicon glyphicon-cog"></span>`
|
|||
|
|
|
|||
|
|
<span class="glyphicon glyphicon-cog"></span>
|
|||
|
|
|
|||
|
|
The Bootstrap framework provides you with over 250 icons called glyphs. They come in font format from the Glyphicon Halflings set.
|
|||
|
|
|
|||
|
|
### How To Use
|
|||
|
|
|
|||
|
|
To use bootstrap icons you simply create `<span>` tag and apply the applicable CSS class for the icon. A code example has been provided below.
|
|||
|
|
|
|||
|
|
**Code Example:**
|
|||
|
|
|
|||
|
|
`<span class="glyphicon glyphicon-search" aria-hidden="true"></span>`
|
|||
|
|
|
|||
|
|
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
|
|||
|
|
|
|||
|
|
### Bootstrap Glyphicon Class List
|
|||
|
|
|
|||
|
|
This is an example of the CSS classes that bootstrap provides for glyphicons. More of them is avalible <a href='https://getbootstrap.com/docs/3.3/components/#glyphicons' target='_blank' rel='nofollow'>here</a>
|
|||
|
|
|
|||
|
|
`.glyphicon glyphicon-plus` This is bootstrap's plus/add icon.
|
|||
|
|
|
|||
|
|
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
|
|||
|
|
|
|||
|
|
`.glyphicon glyphicon-trash` This is bootstrap's trash/delete icon.
|
|||
|
|
|
|||
|
|
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
|
|||
|
|
|
|||
|
|
_Note: Do not include the dot in the HTML Class Attribute, referring to the classes with a dot is only used when adjusting the classes in CSS._
|
|||
|
|
|
|||
|
|
### Bootstrap Icon in Buttons
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
<button type="button" class="btn btn-default" aria-label="Left Align">
|
|||
|
|
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
|
|||
|
|
</button>
|
|||
|
|
```
|
|||
|
|
<button type="button" class="btn btn-default" aria-label="Left Align">
|
|||
|
|
<span class="glyphicon glyphicon-align-left" aria-hidden="true"></span>
|
|||
|
|
</button>
|
|||
|
|
|
|||
|
|
_Note: Bootstrap's Glyphicons icon is not avalable on bootstrap V4_
|
|||
|
|
|
|||
|
|
### More Information:
|
|||
|
|
|
|||
|
|
- [Bootstrap Glyphicons Icons Doc](https://getbootstrap.com/docs/3.3/components/#glyphicons)
|