Najnowsze tutoriale tworzenie stron internetowych
 

W3.CSS ikony


biblioteki Ikona

Z W3.CSS można użyć dowolnej biblioteki ikon, takich jak:

  • Font Niesamowite Ikony
  • Materiał Ikony Google
  • bootstrap Ikony

Korzystanie z ikony

Aby użyć ikony, wystarczy dodać nazwę ikony do klasy HTML <i> elementów.

Aby kontrolować wielkość ikony, zmień właściwość font-size ikony lub użyj klas wielkości w3-:

  • w3-tiny
  • w3-small
  • w3-large
  • w3-XXLarge
  • w3-xxxlarge

Font Niesamowite Ikony


fa fa-home

fa fa-bary

fa fa strzałki lewej

fa fa-strzałka w prawym

fa fa-search

fa fa-close

fa fa-refresh

fa fa-śmieci

fa fa-męskiej

fa fa-car

fa fa-truck

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="http://www.w3ii.com/lib/w3.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<body>

<i class="fa fa-cloud"></i>
<i class="fa fa-cloud w3-large"></i>
<i class="fa fa-cloud w3-xlarge"></i>
<i class="fa fa-cloud w3-xxlarge"></i>
<i class="fa fa-cloud w3-xxxlarge"></i>
<i class="fa fa-cloud w3-text-teal" style="font-size:64px"></i>

</body>
</html>
Spróbuj sam "

Uwaga Pełną listę ikon: Odwiedź odniesienie ikona


Google Materiał Ikony konstrukcyjne

Dom
Dom
menu
menu
arrow_back
arrow_back
arrow_forward
arrow_forward
szukanie
szukanie
blisko
blisko
odświeżać
odświeżać
kasować
kasować
osoba
osoba
directions_car
directions_car
local_shipping
local_shipping
local_airport
local_airport

Przykład

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3ii.com/lib/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<body>

<i class="material-icons">cloud</i>
<i class="material-icons w3-large">cloud</i>
<i class="material-icons w3-xlarge">cloud</i>
<i class="material-icons w3-xxlarge">cloud</i>
<i class="material-icons w3-xxxlarge">cloud</i>
<i class="material-icons w3-text-teal" style="font-size:64px">cloud</i>

</body>
</html>
Spróbuj sam "

bootstrap Ikony


Dom

menu hamburger

arrow_back

arrow_forward


szukanie

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="http://www.w3ii.com/lib/w3.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<body>

<i class="glyphicon glyphicon-cloud"></i>
<i class="glyphicon glyphicon-cloud w3-large"></i>
<i class="glyphicon glyphicon-cloud w3-xlarge"></i>
<i class="glyphicon glyphicon-cloud w3-xxlarge"></i>
<i class="glyphicon glyphicon-cloud w3-xxxlarge"></i>
<i class="glyphicon glyphicon-cloud w3-text-teal" style="font-size:64px"></i>

</body>
</html>
Spróbuj sam "