Font Awesome Icons With CSS

A CSS pseudo-element is a keyword added to a selector that lets us style a specific part of the selected element(s). Font Awesome has leveraged the ::before pseudo-element to add icons to a page since the very beginning. These icons are used throughout sayham.com.

Font Awesome 5.12.1

- RSS

1
2
3
font-family: "Font Awesome 5 Free";
content: "\f09e";
font-weight: 900;

- RSS Square

1
2
3
font-family: "Font Awesome 5 Free";
content: "\f143";
font-weight: 900;

- sayham.com

1
2
3
font-family: "Font Awesome 5 Free";
content: "\f011";
font-weight: 900;

- Twitter

1
2
3
font-family: "Font Awesome 5 Brands";
content: "\f099";
font-weight: 400;

- Twitter Square

1
2
3
font-family: "Font Awesome 5 Brands";
content: "\f081";
font-weight: 400;

- Github

1
2
3
font-family: "Font Awesome 5 Brands";
content: "\f09b";
font-weight: 400;

- Github Square

1
2
3
font-family: "Font Awesome 5 Brands";
content: "\f092";
font-weight: 400;

- Github Alt

1
2
3
font-family: "Font Awesome 5 Brands";
content: "\f113";
font-weight: 400;

- Facebook Square

1
2
3
font-family: "Font Awesome 5 Brands";
content: "\f082";
font-weight: 400;

- Linkedin Square

1
2
3
font-family: "Font Awesome 5 Brands";
content: "\f08c";
font-weight: 400;

- Instagram

1
2
3
font-family: "Font Awesome 5 Brands";
content: "\f16d";
font-weight: 400;

- Pinterest Square

1
2
3
font-family: "Font Awesome 5 Brands";
content: "\f0d3";
font-weight: 400;

- Tumblr Square

1
2
3
font-family: "Font Awesome 5 Brands";
content: "\f174";
font-weight: 400;

- Mix

1
2
3
font-family: "Font Awesome 5 Brands";
content: "\f3cb";
font-weight: 400;

- VK

1
2
3
font-family: "Font Awesome 5 Brands";
content: "\f189";
font-weight: 400;

- External-link-alt

1
2
3
font-family: "Font Awesome 5 Free";
content: "\f35d";
font-weight: 900;

- Star

1
2
3
font-family: "Font Awesome 5 Free";
content: "\f005";
font-weight: 400;

- Star Filled

1
2
3
font-family: "Font Awesome 5 Free";
content: "\f005";
font-weight: 900;

- Git

1
2
3
font-family: "Font Awesome 5 Brands";
content: "\f1d3";
font-weight: 400;

- Git Square

1
2
3
font-family: "Font Awesome 5 Brands";
content: "\f1d2";
font-weight: 400;

- Windows

1
2
3
font-family: "Font Awesome 5 Brands";
content: "\f17a";
font-weight: 400;

- Apple

1
2
3
font-family: "Font Awesome 5 Brands";
content: "\f179";
font-weight: 400;

- Sync Alt

1
2
3
font-family: "Font Awesome 5 Free";
content: "\f2f1";
font-weight: 900;

- Sync Alt Spin

1
2
3
4
5
font-family: "Font Awesome 5 Free";
content: "\f2f1";
font-weight: 900;
-webkit-animation: fa-spin 2s infinite linear;
animation: fa-spin 2s infinite linear;

- Spinner Pulse

1
2
3
4
5
font-family: "Font Awesome 5 Free";
content: "\f110";
font-weight: 900;
-webkit-animation: fa-spin 1s infinite steps(8);
animation: fa-spin 1s infinite steps(8);

- Link

1
2
3
font-family: "Font Awesome 5 Free";
content: "\f0c1";
font-weight: 900;

- Exclamation Triangle

1
2
3
font-family: "Font Awesome 5 Free";
content: "\f071";
font-weight: 900;

- Check Circle

1
2
3
font-family: "Font Awesome 5 Free";
content: "\f058";
font-weight: 900;

- Times Circle

1
2
3
font-family: "Font Awesome 5 Free";
content: "\f057";
font-weight: 900;

- Terminal

1
2
3
font-family: "Font Awesome 5 Free";
content: "\f120";
font-weight: 900;

- Keyboard

1
2
3
font-family: "Font Awesome 5 Free";
content: "\f11c";
font-weight: 400;

- Thermometer Half

1
2
3
font-family: "Font Awesome 5 Free";
content: "\f2c9";
font-weight: 900;

- Temperature Low

1
2
3
font-family: "Font Awesome 5 Free";
content: "\f76b";
font-weight: 900;

- Code

1
2
3
font-family: "Font Awesome 5 Free";
content: "\f121";
font-weight: 900;

- File Code

1
2
3
font-family: "Font Awesome 5 Free";
content: "\f1c9";
font-weight: 400;

- HTML5

1
2
3
font-family: "Font Awesome 5 Brands";
content: "\f13b";
font-weight: 400;

- Edit

1
2
3
font-family: "Font Awesome 5 Free";
content: "\f044";
font-weight: 900;

- Code Branch

1
2
3
font-family: "Font Awesome 5 Free";
content: "\f126";
font-weight: 900;

- Folder

1
2
3
font-family: "Font Awesome 5 Free";
content: "\f07b";
font-weight: 400;

- Desktop

1
2
3
font-family: "Font Awesome 5 Free";
content: "\f108";
font-weight: 900;

- Shield Alt

1
2
3
font-family: "Font Awesome 5 Free";
content: "\f3ed";
font-weight: 900;

- Sticky Note Filled

1
2
3
font-family: "Font Awesome 5 Free";
content: "\f249";
font-weight: 900;

- Sticky Note

1
2
3
font-family: "Font Awesome 5 Free";
content: "\f249";
font-weight: 400;

- Arrow Right

1
2
3
font-family: "Font Awesome 5 Free";
content: "\f061";
font-weight: 900;

- Level Down Alt

1
2
3
font-family: "Font Awesome 5 Free";
content: "\f3be";
font-weight: 900;