Làm thế nào để bạn thêm một biểu tượng vào giỏ hàng trong css?

Question

Mỗi trang web Thương mại điện tử, cần hiển thị số lượng mặt hàng mà khách hàng đã cho vào giỏ hàng. Để tôi chỉ cho bạn thấy việc hiển thị này dễ dàng như thế nào bằng cách sử dụng một chút html và CSS

Nội dung chính Show

BƯỚC 1 Bao gồm biểu định kiểu phông chữ tuyệt vời CDN
BƯỚC 2 hãy viết kiểu cho huy hiệu bằng CSS
BƯỚC 3 Viết phần html
Sự kết luận
Cách sử dụng
Ngoài cái hộp
Bản thử trực tiếp
Biểu tượng lớn
Bản thử trực tiếp
Thay đổi màu sắc
Bản thử trực tiếp
Làm cách nào để thêm nút thêm vào giỏ hàng trong HTML?
Cách thêm vào giỏ hàng hoạt động trong JavaScript?

BƯỚC 1 Bao gồm biểu định kiểu phông chữ tuyệt vời CDN

Chúng tôi cần điều này để có được hình ảnh phông chữ tuyệt vời cho giỏ hàng. Bao gồm điều này trong phần <HEAD> của trang html của bạn

<link href="https://use.fontawesome.com/releases/v5.0.1/css/all.css" rel="stylesheet">

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

BƯỚC 2 hãy viết kiểu cho huy hiệu bằng CSS

Huy hiệu là hình tròn có số lượng mặt hàng mà khách hàng đã thêm vào giỏ hàng cho đến nay

    .badge:after{
        content:attr(value);
        font-size:12px;
        color: #fff;
        background: red;
        border-radius:50%;
        padding: 0 5px;
        position:relative;
        left:-8px;
        top:-10px;
        opacity:0.9;
    }

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Giải trình

Chúng tôi sẽ hiển thị giá trị được chuyển đến huy hiệu, giá trị ở đây là số lượng mặt hàng trong giỏ hàng. chúng tôi đang sử dụng màu phông chữ trắng, với nền màu đỏ. Chúng tôi đang sử dụng. sau để cho biết chúng tôi muốn huy hiệu được hiển thị sau khi hiển thị biểu tượng giỏ hàng

BƯỚC 3 Viết phần html

<i class="fa badge fa-lg" value=5>&#xf290;</i>
<i class="fa badge fa-lg" value=8>&#xf07a;</i>

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Giải trình

Chúng tôi sử dụng mục danh sách html i để hiển thị giỏ hàng. chúng tôi đang hiển thị biểu tượng giỏ hàng với cỡ chữ 24px

 dành cho túi mua hàng

    .badge:after{
        content:attr(value);
        font-size:12px;
        color: #fff;
        background: red;
        border-radius:50%;
        padding: 0 5px;
        position:relative;
        left:-8px;
        top:-10px;
        opacity:0.9;
    }

0 dành cho giỏ hàng

Bạn có thể tìm thấy nhiều mã phông chữ tuyệt vời miễn phí bằng cách nhấp vào liên kết này

Tôi đã bao gồm toàn bộ mã ở đây

<html>
<head>
    <link href="https://use.fontawesome.com/releases/v5.0.1/css/all.css" rel="stylesheet">
</head>
<body>

<style>
    .badge:after{
        content:attr(value);
        font-size:12px;
        color: #fff;
        background: red;
        border-radius:50%;
        padding: 0 5px;
        position:relative;
        left:-8px;
        top:-10px;
        opacity:0.9;
    }

</style>
<body>
<i class="fa badge fa-lg" value=5>&#xf290;</i>
<i class="fa badge fa-lg" value=8>&#xf07a;</i>

</body>
</html>

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Sự kết luận

Với HTML và CSS đơn giản, chúng ta có thể tạo một màn hình tuyệt vời cho biểu tượng giỏ hàng với các mặt hàng trong đó. Lưu ý, bạn sẽ phải sử dụng PHP hoặc. JS trong kịch bản thực tế để cung cấp số lượng mục vì chúng không thể tĩnh như trong ví dụ trên

Nhà
Hướng dẫn biểu tượng
phông chữ tuyệt vời
Biểu tượng ảnh tuyệt vời phông chữ
Biểu tượng biểu đồ hình tròn tuyệt vời về phông chữ
Phông chữ Biểu tượng máy bay tuyệt vời
Biểu tượng phích cắm phông chữ tuyệt vời
Biểu tượng Font Awesome Plus
Phông chữ Tuyệt vời Biểu tượng dấu cộng hình tròn
Phông chữ Biểu tượng hình vuông cộng tuyệt vời
Phông chữ Tuyệt vời Biểu tượng Plus-square-o
Biểu tượng tắt nguồn phông chữ tuyệt vời
Biểu tượng in phông chữ tuyệt vời
Phông chữ Biểu tượng mảnh ghép tuyệt vời
Phông chữ Biểu tượng Qrcode tuyệt vời
Biểu tượng câu hỏi tuyệt vời về phông chữ
Phông chữ Tuyệt vời Biểu tượng vòng tròn câu hỏi
Phông chữ Tuyệt vời Trích dẫn bên trái Biểu tượng
Phông chữ Tuyệt vời Trích dẫn bên phải Biểu tượng
Biểu tượng Ngẫu nhiên Phông chữ Tuyệt vời
Biểu tượng tái chế phông chữ tuyệt vời
Biểu tượng làm mới phông chữ tuyệt vời
Biểu tượng đã đăng ký phông chữ tuyệt vời
Phông chữ Tuyệt vời Xóa Biểu tượng
Biểu tượng sắp xếp lại phông chữ tuyệt vời
Phông chữ Biểu tượng trả lời tuyệt vời
Biểu tượng trả lời tất cả phông chữ tuyệt vời
Biểu tượng Retweet phông chữ tuyệt vời
Phông Chữ Tuyệt Vời Biểu Tượng Con Đường
Phông chữ Biểu tượng tên lửa tuyệt vời
Phông chữ Biểu tượng RSS tuyệt vời
Phông chữ Biểu tượng hình vuông RSS tuyệt vời
Phông chữ Biểu tượng tìm kiếm tuyệt vời
Phông chữ Tìm kiếm tuyệt vời-Biểu tượng dấu trừ
Phông chữ Tìm kiếm tuyệt vời-biểu tượng cộng
Biểu tượng gửi phông chữ tuyệt vời
Phông chữ Biểu tượng Gửi tuyệt vời
Phông chữ Biểu tượng máy chủ tuyệt vời
Biểu tượng chia sẻ phông chữ tuyệt vời
Biểu tượng thay thế chia sẻ phông chữ tuyệt vời
Phông chữ Tuyệt vời Share-alt-square Icon
Biểu tượng chia sẻ hình vuông tuyệt vời về phông chữ
Phông chữ Tuyệt vời Share-square-o Biểu tượng
Phông chữ Biểu tượng lá chắn tuyệt vời
Phông chữ Biểu tượng Con tàu Tuyệt vời
Phông chữ Tuyệt vời Biểu tượng giỏ hàng
Biểu tượng đăng nhập phông chữ tuyệt vời
Biểu tượng đăng xuất phông chữ tuyệt vời
Phông chữ Biểu tượng tín hiệu tuyệt vời
Phông chữ Biểu tượng sơ đồ trang web tuyệt vời
Biểu tượng Thanh trượt Phông chữ Tuyệt vời
Phông chữ Biểu tượng Smile-o tuyệt vời
Font Awesome Soccer-ball-o Icon
Biểu tượng Sắp xếp Tuyệt vời Phông chữ
Phông chữ Biểu tượng Sắp xếp-alpha-asc tuyệt vời
Phông chữ Tuyệt vời Sắp xếp-alpha-desc Biểu tượng
Phông chữ Tuyệt vời Sort-amount-asc Biểu tượng
Phông chữ Tuyệt vời Sort-amount-desc Biểu tượng
Biểu tượng Sort-asc Phông chữ Tuyệt vời
Phông chữ Tuyệt vời Sort-desc Icon
Biểu tượng Sắp xếp Phông chữ Tuyệt vời
Phông chữ Tuyệt vời Sort-numeric-asc Biểu tượng
Phông chữ Tuyệt vời Sort-numeric-desc Icon
Biểu tượng sắp xếp phông chữ tuyệt vời
Phông chữ Biểu tượng tàu con thoi tuyệt vời
Phông chữ Biểu tượng Spinner tuyệt vời
Biểu tượng chiếc thìa tuyệt vời phông chữ
Phông chữ Biểu tượng Hình vuông Tuyệt vời
Phông chữ Biểu tượng Square-o tuyệt vời
Phông chữ Biểu tượng ngôi sao tuyệt vời
Phông chữ Tuyệt vời Star-Half Icon
Phông chữ Tuyệt vời Biểu tượng ngôi sao nửa trống
Phông chữ Awesome Star-nửa đầy Biểu tượng
Phông chữ Tuyệt vời Star-o Biểu tượng
Phông chữ Biểu tượng ghi chú tuyệt vời
Phông chữ Tuyệt vời Sticky-note-o Biểu tượng
Phông chữ Tuyệt vời Biểu tượng Chế độ xem phố
Phông Chữ Tuyệt Vời Biểu Tượng Vali
Phông chữ Biểu tượng Sun-o tuyệt vời
Biểu tượng hỗ trợ phông chữ tuyệt vời

Font Awesome Shopping-cart IconCập nhật lần cuối vào ngày 19 tháng 8 năm 2022 21. 50. 30 (UTC/GMT +8 giờ)

Cách sử dụng

<i class="fa fa-shopping-cart"></i>

Ngoài cái hộp

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<body>
<i class="fa fa-shopping-cart"></i>
</body>
</html>

Bản thử trực tiếp

Xem ví dụ về giỏ mua hàng biểu tượng bút-1 của w3resource (@w3resource) trên CodePen

Biểu tượng lớn

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
</head>
<body>
<i class="fa fa-shopping-cart fa-5x"></i>
<!--use the fa-lg (33% increase), fa-2x, fa-3x, fa-4x, or fa-5x classes-->
</body>
</html>

Bản thử trực tiếp

Xem ví dụ về giỏ mua hàng biểu tượng bút-2 của w3resource (@w3resource) trên CodePen

Thay đổi màu sắc

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<style type="text/css">
.fa_custom {
color: #0099CC
}
</style>
</head>
<body>
<i class="fa fa-shopping-cart fa_custom"></i>
<i class="fa fa-shopping-cart fa_custom fa-2x"></i>
<i class="fa fa-shopping-cart fa_custom fa-3x"></i>
<i class="fa fa-shopping-cart fa_custom fa-4x"></i>
</body>
</html>