W3.CSS Ikony
Biblioteki ikon
Dzięki W3.CSS możesz korzystać z biblioteki ikon, którą lubisz, takich jak:
- Niesamowite ikony czcionek
- Ikony Google Material Design
- Ikony Bootstrap
Korzystanie z biblioteki ikon
Aby wstawić ikonę:
- Uwzględnij bibliotekę ikon z sieci CDN (Sieć dostarczania treści) w sekcji <head>.
- Dodaj nazwę klasy ikony do dowolnego wbudowanego elementu HTML.
Wskazówka: elementy <i> i <span> są powszechnie używane do dodawania ikon.
Aby kontrolować rozmiar ikony, zmień właściwość font-size ikony lub użyj jednej z klas rozmiarów w3 :
- w3-malutki
- w3-małe
- w3-duży
- w3-xxlarge
- w3-xxxduża
- w3-jumbo
Niektóre niesamowite ikony czcionek
fa fa-dom
fa-bary
fa fa-strzałka-w lewo
fa fa-strzałka-w prawo
fa fa-search
fa fa-zamknij
fa fa odświeżenie
fa fa-śmieci
boli
fa fa-samochód
fa fa-ciężarówka
fa fa-plane
Przykład
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<i class="fa fa-home"></i>
<i class="fa fa-search"></i>
<i class="fa fa-cloud"></i>
<i class="fa fa-trash"></i>
</body>
</html>
Pełną listę ikon: Odwiedź nasz odnośnik do ikon
Niektóre ikony projektowania materiałów Google
Dom
Dom
Dom
menu
menu
menu
arrow_back
arrow_back
arrow_back
arrow_forward
arrow_forward
arrow_forward
Szukaj
Szukaj
Szukaj
blisko
blisko
blisko
odświeżać
odświeżać
odświeżać
kasować
kasować
kasować
osoba
osoba
osoba
kierunki_samochód
kierunki_samochód
kierunki_samochód
lokalna_wysyłka
lokalna_wysyłka
lokalna_wysyłka
lokalne_lotnisko
lokalne_lotnisko
lokalne_lotnisko
Przykład
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<body>
<i class="material-icons">home</i>
<i class="material-icons">search</i>
<i class="material-icons">cloud</i>
<i class="material-icons">delete</i>
</body>
</html>
Niektóre ikony Bootstrap
Dom
hamburger z menu
arrow_back
arrow_forward
Szukaj
usunąć
odświeżać
śmieci
użytkownik
plik
wydrukować
samolot
Przykład
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<body>
<i class="glyphicon glyphicon-home"></i>
<i class="glyphicon glyphicon-search"></i>
<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-trash"></i>
</body>
</html>