45 lines
1.4 KiB
Markdown
45 lines
1.4 KiB
Markdown
|
---
|
||
|
|
title: Fontawesome Icons For Bootstrap
|
||
|
|
---
|
||
|
|
## Fontawesome Icons For Bootstrap
|
||
|
|
|
||
|
Bootstrap (from version 4 onwards) have dropped Glyphicon icons font in their latest release.
|
||
|
|
Fontawesome Icons provide you with over 675 icons and they come in font format.
|
||
|
|
|
||
|
|
#### How To Use:
|
||
|
|
|
||
|
|
In the `<head>` of your html include a reference to Font Awesome.
|
||
|
|
```html
|
||
|
|
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
|
||
|
|
```
|
||
|
|
Using fontawesome is same as using Glyphicon.
|
||
|
|
|
||
|
|
Simply create `<i>` or `<span>` tag and apply the CSS Prefix `fa` and the icon's name. A code example has been provided below.
|
||
|
|
|
||
|
|
**Code Example:**
|
||
|
|
|
||
|
|
`<i class="fa fa-twitter" aria-hidden="true"></i>`
|
||
|
|
|
||
|
|
<i class="fa fa-twitter" aria-hidden="true"></i>
|
||
|
|
|
||
|
|
`<span class="fa fa-freecodecamp" aria-hidden="true"></span>`
|
||
|
|
|
||
|
|
<span class="fa fa-freecodecamp" aria-hidden="true"></span>
|
||
|
|
|
||
|
|
#### Fontawesome Icon List:
|
||
|
|
Complete list of icons provided by fontawesome is available [here](http://fontawesome.io/cheatsheet/)
|
||
|
|
|
||
|
|
`.fa fa-align-left` This is fontawesome align left icon.
|
||
|
|
|
||
|
|
<span class="fa fa-align-left" aria-hidden="true"></span>
|
||
|
|
|
||
|
|
`.fa fa-heart` This is fontawesome heart icon.
|
||
|
|
|
||
|
|
<span class="fa fa-heart" 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._
|
||
|
|
|
||
|
|
#### More Information:
|
||
|
|
[Fontawesome Cheatsheet](http://fontawesome.io/cheatsheet/)
|
||
|
|
|