2.2 KiB
| title |
|---|
| Font Awesome Icons For Bootstrap |
Font Awesome Icons For Bootstrap
Bootstrap (from version 4 onwards) have dropped Glyphicon icons font in their latest release. Font Awesome 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.
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
You can also use Font Awesome's own CDN.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/fontawesome.css" integrity="sha384-BzCy2fixOYd0HObpx3GMefNqdbA7Qjcc91RgYeDjrHTIEXqiF00jKvgQG0+zY/7I" crossorigin="anonymous">
Additionaly, the Font Awesome CDN can supply the brand and regular logos independently.
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/brands.css" integrity="sha384-Px1uYmw7+bCkOsNAiAV5nxGKJ0Ixn5nChyW8lCK1Li1ic9nbO5pC/iXaq27X5ENt" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/fontawesome.css" integrity="sha384-BzCy2fixOYd0HObpx3GMefNqdbA7Qjcc91RgYeDjrHTIEXqiF00jKvgQG0+zY/7I" crossorigin="anonymous">
Using Font Awesome 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>
<span class="fa fa-freecodecamp" aria-hidden="true"></span>
Font Awesome Icon List:
Complete list of icons provided by Font Awesome is available here
.fa fa-align-left This is Font Awesome align left icon.
.fa fa-heart This is Font Awesome heart icon.
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.