Biểu tượng W3.CSS
Thư viện biểu tượng
Với W3.CSS, bạn có thể sử dụng thư viện biểu tượng mà bạn thích, chẳng hạn như:
- Biểu tượng phông chữ tuyệt vời
- Các biểu tượng thiết kế Material Design của Google
- Biểu tượng Bootstrap
Sử dụng Thư viện Biểu tượng
Để chèn một biểu tượng:
- Bao gồm thư viện biểu tượng từ CDN (Mạng phân phối nội dung) trong phần <head>.
- Thêm tên của lớp biểu tượng vào bất kỳ phần tử HTML nội tuyến nào.
Mẹo: Các phần tử <i> và <span> được sử dụng rộng rãi để thêm biểu tượng.
Để kiểm soát kích thước của biểu tượng, hãy thay đổi thuộc tính kích thước phông chữ của biểu tượng hoặc sử dụng một trong các lớp kích thước w3 :
- w3-tí hon
- w3-nhỏ
- w3-lớn
- w3-xxlarge
- w3-xxxlarge
- w3-jumbo
Một số biểu tượng phông chữ tuyệt vời
fa fa-nhà
thanh fa
fa fa-mũi tên-trái
fa fa-mũi tên-phải
fa fa-tìm kiếm
fa fa-close
fa fa-refresh
fa fa-thùng rác
đau
fa fa-xe
fa fa-xe tải
fa fa-máy bay
Thí dụ
<!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>
Để có danh sách đầy đủ các biểu tượng: Hãy truy cập tài liệu tham khảo biểu tượng của chúng tôi
Một số biểu tượng thiết kế Material Design của Google
Trang Chủ
Trang Chủ
Trang Chủ
thực đơn
thực đơn
thực đơn
arrow_back
arrow_back
arrow_back
arrow_ward
arrow_ward
arrow_ward
Tìm kiếm
Tìm kiếm
Tìm kiếm
gần
gần
gần
Làm tươi
Làm tươi
Làm tươi
xóa bỏ
xóa bỏ
xóa bỏ
người
người
người
xe_chỉ_đường
xe_chỉ_đường
xe_chỉ_đường
local_shipping
local_shipping
local_shipping
local_airport
local_airport
local_airport
Thí dụ
<!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>
Một số biểu tượng Bootstrap
Trang Chủ
menu hamburger
arrow_back
arrow_ward
Tìm kiếm
tẩy
Làm tươi
rác
người dùng
tập tin
in
chiếc máy bay
Thí dụ
<!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>