Level up #2 - Font Awesome

(c) Erenae

Hejka! W dzisiejszym poście pokażę wam łatwy sposób na wstawienie ikonek, do tytułów gadżetów. Jeśli bylibyście ciekawi jak wstawić takie ikonki FA, zamiast np. "Autor:..." w poście, zapraszam zatem na >Instruktażowo<.  Agata bardzo fajnie tłumaczy jak wklejać Font Awesome do kodu HTML. Ja zajmę się tym od strony CSSa. Więc zapraszam...

Przykłady wykorzystania Font Awesome:

*ustawcie na 0.5x, dla poprawnego ustawienia efektów*

I. Wstawienie Font Awesome

Font Awesome przed wpisywaniem w CSS wstawiamy do HTML. Wchodzisz na strone fontawesome.com i klikasz Start. Tworzysz swój kit FA i link:

<script src="https://kit.fontawesome.com(......).js"></script> 

wklejasz w pokazany sposób na stronie, która wyświetli ci się po utworzeniu twojego kitu.

Font Awesome wstawiamy do CSS w podany poniżej sposób:

  .selektor:before {

  content:"\f129";

  font-family: 'Font Awesome 5 Free';

  font-weight: 900;

  color: #fff;

}

Musi być to z atrybutem :before lub :after.

Wersja 1

1. Ustawiamy wygląd całościowy dla h2.

#Text1 h2 {

  background: #f8f8f8;

  color: #2196F3;

  font-family: arial;

  font-weight: normal;

  text-transform: uppercase;

  font-size: 18px;

  text-align: left;

  margin-left: 10px;

  padding: 10px 0 10px 25px;

  border-radius: 10px;

  border: 1px solid #2196F3;

}

2. Teraz kod dla Font Awesome:

#Text1 h2:before {
  content:"\f129";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  color: #f8f8f8;
  font-size: 14px;
  text-align: center;
  position: absolute;
  background: #2196F3;
  top: 43px;
  left: 24px;
  width: 22px;
  height: 22px;
  border-radius: 10px;
  padding: 5px 3px 0 3px;
  text-shadow: -3px -2px 0 #1976D2, 3px 2px 0 #1976D2;
}

Wersja 2

1. Wygląd h2

#LinkList1 h2 {
  background: #f8f8f8;
  color: #E91E63;
  font-family: arial;
  font-weight: normal;
  text-transform: uppercase;
  font-size: 18px;
  text-align: left;
  margin-left: 35px;
  padding: 10px 0 10px 15px;
  border-radius: 0 10px 10px 0;
  border: 1px solid #E91E63;
}

2. Wygląd Font Awesome

#LinkList1 h2:before {
  content:"\f039";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  color: #f8f8f8;
  font-size: 14px;
  text-align: center;
  position: absolute;
  background: #E91E63;
  top: 254px;
  left: 20px;
  width: 35px;
  height: 29px;
  border-radius: 10px 0 0 10px;
  padding: 14px 3px 0 3px;
  text-shadow: 1px 1px 0 rgb(255, 255, 255, .3)
}

Wersja 3

1. Wygląd h2

#Text2 h2 {
  background: #f8f8f8;
  color: #2196F3;
  font-family: arial;
  font-weight: normal;
  text-transform: uppercase;
  font-size: 18px;
  text-align: left;
  padding: 10px 0 10px 45px;
  border-radius: 10px;
  border: 1px solid #2196F3;
}

2. Wygląd Font Awesome

#Text2 h2:before {
  content:"\f12a";
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  color: #2196F3;
  font-size: 14px;
  text-align: center;
  position: absolute;
  background: #f8f8f8;
  border-right: 1px solid #2196F3;
  top: 439.5px;
  left: 26px;
  width: 28.5px;
  height: 28.5px;
  border-radius: 10px 0 0 10px;
  padding: 12px 3px 0 3px;
  text-shadow: 7px 0 0 #BBDEFB, -7px 0 0 #BBDEFB;
}

Tak więc to wygląda. Jeśli mielibyście jakieś pytania, z chęcią na nie odpowiem ^^