CSS 쇼핑 카트 항목 수를 나타내는 아이콘입니다.

2666 단어 iconcssheadershoppingcart

소개



모든 전자 상거래 웹사이트에서는 고객이 장바구니에 넣은 항목 수를 표시해야 합니다. 약간의 html과 CSS를 사용하여 이것을 표시하는 것이 얼마나 쉬운지 보여드리겠습니다.



STEP 1 font awesome 스타일시트 CDN 포함



장바구니에 넣을 멋진 글꼴 이미지를 얻으려면 이것이 필요합니다. html 페이지의 <HEAD> 섹션에 이것을 포함하십시오.

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


2단계에서는 CSS를 사용하여 배지 스타일을 작성합니다.



배지는 고객이 지금까지 장바구니에 추가한 항목 수가 있는 둥근 원입니다.

    .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;
    }


설명 :

배지에 전달된 값을 표시합니다. 여기서 값은 장바구니에 있는 항목의 수입니다. 우리는 배경이 빨간색인 흰색 글꼴 색상을 사용하고 있습니다. 카트 아이콘을 표시한 후 배지를 표시하고 싶다는 것을 나타내기 위해 :after를 사용하고 있습니다.

3단계 html 부분 작성




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


설명 :

카트를 표시하기 위해 html 목록 항목 i를 사용합니다. 글꼴 크기가 24px인 카트 아이콘을 표시하고 있습니다.
&#xf290; 쇼핑백용&#xf07a; 장바구니용

You can find more free font awesome codes by clicking this link


여기에 전체 코드를 포함했습니다.

<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>


결론



간단한 HTML 및 CSS를 사용하여 항목이 포함된 장바구니 아이콘에 대한 멋진 디스플레이를 구축할 수 있습니다. 위의 예와 같이 정적일 수 없으므로 항목 수를 제공하려면 실제 시나리오에서 PHP 또는 .JS를 사용해야 합니다.
git push 이후 src refspec dev does not matchany
기능

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage