81 lines
3.0 KiB
Markdown
81 lines
3.0 KiB
Markdown
---
|
||
title: Icons
|
||
---
|
||
|
||
## Icons
|
||
|
||
The Bootstrap framework provides you with Glyphicons for icons.
|
||
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 icons, 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 a `<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 are 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 are not available on bootstrap V4_
|
||
|
||
### Things to keep in mind
|
||
|
||
**Don't mix with other components**
|
||
|
||
Icon classes cannot be directly combined with other components. They should not be used along with other classes on the same element. Instead, add a nested `<span>` and apply the icon classes to the `<span>`.
|
||
|
||
**Only use icons on empty elements**
|
||
|
||
Icon classes should only be used on elements that contain no text content and have no child elements.
|
||
|
||
_Note: Bootstrap's Glyphicons icon is not avalable on bootstrap V4. However, it still works with V3.3.7 which is avaialble at the link provided below_.
|
||
|
||
#### More Information:
|
||
|
||
- [Bootstrap Glyphicons Icons Doc](https://getbootstrap.com/docs/3.3/components/#glyphicons)
|