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ư:
- Phông chữ Biểu tượng tuyệt vời
- 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: 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 cỡ 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-nhỏ
- 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-home
fa fa-bar
fa fa-mũi tên trái
fa fa-mũi tên-phải
fa-tìm kiếm
sắp gần rồi
fa fa-refresh
thật là rác rưởi
fa fa-nam
xe fa fa
xe tải fa fa
fa fa-máy bay
Ví dụ
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.example.com.vn/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>
Hãy tự mình thử »Để 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 Material Design của Google
trang chủ
thực đơn
mũi tên quay lại
mũi tên_chuyển tiếp
tìm kiếm
đóng
làm cho khỏe lại
xóa bỏ
người
chỉ đường_xe
vận chuyển địa phương
sân bay địa phương
Ví dụ
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.example.com.vn/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>
Hãy tự mình thử »Một số biểu tượng Bootstrap
trang chủ
thực đơn hamburger
mũi tên quay lại
mũi tên_chuyển tiếp
tìm kiếm
di dời
làm cho khỏe lại
rác
người dùng
tài liệu
in
máy bay
Ví dụ
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.example.com.vn/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>
Hãy tự mình thử »