greatbody
/
freeCodeCamp
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
freeCodeCamp/guide/english/bootstrap/fontawesome-icons/index.md

60 lines
2.4 KiB
Markdown
Raw Normal View History

feat(guide): Import guide in to the client app
2018-10-04 13:47:55 +00:00
---
Changed fontawesome to Font Awesome in index.md (#22073)
2018-11-07 00:55:44 +00:00
title: Font Awesome Icons For Bootstrap
feat(guide): Import guide in to the client app
2018-10-04 13:47:55 +00:00
---
Changed fontawesome to Font Awesome in index.md (#22073)
2018-11-07 00:55:44 +00:00
## Font Awesome Icons For Bootstrap
feat(guide): Import guide in to the client app
2018-10-04 13:47:55 +00:00
Clarify language in article (#18379)
2018-10-13 19:00:43 +00:00
Bootstrap (from version 4 onwards) have dropped Glyphicon icons font in their latest release.
Changed fontawesome to Font Awesome in index.md (#22073)
2018-11-07 00:55:44 +00:00
Font Awesome Icons provide you with over 675 icons and they come in font format.
feat(guide): Import guide in to the client app
2018-10-04 13:47:55 +00:00
#### 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">
```
Added info about official FA CDN (#23070)
2018-11-23 04:21:02 +00:00
You can also use Font Awesome's own CDN.
```html
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/fontawesome.css" integrity="sha384-BzCy2fixOYd0HObpx3GMefNqdbA7Qjcc91RgYeDjrHTIEXqiF00jKvgQG0+zY/7I" crossorigin="anonymous">
```
Add info about changing icon sizing (#23103) Had intended to include a link to the official docs here https://fontawesome.com/how-to-use/on-the-web/styling/sizing-icons but they appear to be out of date.
2018-11-30 20:45:20 +00:00
Additionally, the Font Awesome CDN can supply the brand and regular logos independently.
Added info about official FA CDN (#23070)
2018-11-23 04:21:02 +00:00
```html
<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">
```
Changed fontawesome to Font Awesome in index.md (#22073)
2018-11-07 00:55:44 +00:00
Using Font Awesome is same as using Glyphicon.
feat(guide): Import guide in to the client app
2018-10-04 13:47:55 +00:00
Added info about official FA CDN (#23070)
2018-11-23 04:21:02 +00:00
feat(guide): Import guide in to the client app
2018-10-04 13:47:55 +00:00
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>
Add info about changing icon sizing (#23103) Had intended to include a link to the official docs here https://fontawesome.com/how-to-use/on-the-web/styling/sizing-icons but they appear to be out of date.
2018-11-30 20:45:20 +00:00
`<span class="fa fa-free-code-camp" aria-hidden="true"></span>`
feat(guide): Import guide in to the client app
2018-10-04 13:47:55 +00:00
Add info about changing icon sizing (#23103) Had intended to include a link to the official docs here https://fontawesome.com/how-to-use/on-the-web/styling/sizing-icons but they appear to be out of date.
2018-11-30 20:45:20 +00:00
<span class="fa fa-free-code-camp" aria-hidden="true"></span>
feat(guide): Import guide in to the client app
2018-10-04 13:47:55 +00:00
Add info about changing icon sizing (#23103) Had intended to include a link to the official docs here https://fontawesome.com/how-to-use/on-the-web/styling/sizing-icons but they appear to be out of date.
2018-11-30 20:45:20 +00:00
Icons inherit the `font-size` of their parent container by default, but sizing can be modified by adding `.fa-*` classes, where `*` is one of `xs, sm, md, lg or [1-5]x`.
#### Fontawesome Icon List:
Complete list of icons provided by fontawesome is available [here](http://fontawesome.io/cheatsheet/)
feat(guide): Import guide in to the client app
2018-10-04 13:47:55 +00:00
Changed fontawesome to Font Awesome in index.md (#22073)
2018-11-07 00:55:44 +00:00
`.fa fa-align-left` This is Font Awesome align left icon.
feat(guide): Import guide in to the client app
2018-10-04 13:47:55 +00:00
<span class="fa fa-align-left" aria-hidden="true"></span>
Changed fontawesome to Font Awesome in index.md (#22073)
2018-11-07 00:55:44 +00:00
`.fa fa-heart` This is Font Awesome heart icon.
feat(guide): Import guide in to the client app
2018-10-04 13:47:55 +00:00
<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._
Added info about official FA CDN (#23070)
2018-11-23 04:21:02 +00:00
#### More Information
[Font Awesome Cheatsheet](http://fontawesome.io/cheatsheet/)
feat(guide): Import guide in to the client app
2018-10-04 13:47:55 +00:00