tutorial pengembangan web terbaru
 

W3.CSS ikon


Perpustakaan icon

Dengan W3.CSS Anda dapat menggunakan icon perpustakaan seperti:

  • Keren Ikon Font
  • Ikon Bahan Google
  • bootstrap Ikon

menggunakan Ikon

Untuk menggunakan ikon, hanya menambahkan nama dari ikon untuk kelas HTML <i> elemen.

Untuk mengontrol ukuran ikon, mengubah properti font-ukuran ikon, atau gunakan kelas ukuran w3-:

  • w3-kecil
  • w3-kecil
  • w3-besar
  • w3-xxlarge
  • w3-xxxlarge

Keren Ikon Font


fa fa-rumah

fa fa-bar

fa fa-panah kiri

fa fa-panah kanan

fa fa-search

fa fa-dekat

fa fa-penyegaran

fa fa-sampah

fa fa-laki

fa fa-mobil

fa fa-truk

fa fa-pesawat

Contoh

<!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>
Cobalah sendiri "

Catatan Untuk daftar lengkap dari ikon: Kunjungi referensi ikon kami


Desain Ikon Bahan Google

rumah
rumah
menu
menu
arrow_back
arrow_back
arrow_forward
arrow_forward
pencarian
pencarian
dekat
dekat
menyegarkan
menyegarkan
menghapus
menghapus
orang
orang
directions_car
directions_car
local_shipping
local_shipping
local_airport
local_airport

Contoh

<!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>
Cobalah sendiri "

bootstrap Ikon


rumah

menu-hamburger

arrow_back

arrow_forward


pencarian

menghapus

menyegarkan

sampah


pemakai

mengajukan

mencetak

pesawat

Contoh

<!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>
Cobalah sendiri "