css 문제 같은데 도움좀 부탁드립니다

css 문제 같은데 도움좀 부탁드립니다

QA

css 문제 같은데 도움좀 부탁드립니다

본문

모바일에서 사이트 우측에 아이콘 같은 메뉴가 따라다니게 해놨는데요

아이콘 우측 상단에 숫자를 넣어주려고 합니다. 

그런데 css 실력이 부족하여 처리가 안되네요.. 도움좀 부탁드립니다.

이것이 현재 소스이고 저기서 12라는 숫자를 아래 이미지 처럼 아이콘 오른쪽 상단에 겹쳐지게 하고 

싶거든요.ㅜㅜ

995543820_1606567047.8003.jpg

아래형태로요

995543820_1606567082.635.jpg

 

아래소스 첨부합니다...

도움좀 부탁드립니다..

 

 

<?php if(G5_IS_MOBILE) { // 사이트 좌측 스크롤 ?>
<style>
/* Mobile 카카오톡 상담 버튼 스타일 */
.floBanMob1 {
  position: fixed;
  bottom: 275px; /* 아래 끝에서부터의 거리 */
  right: 20px; /* 오른쪽 끝에서부터의 거리 */
  z-index: 99;
}
/* Mobile 전화상담 버튼 스타일 */
.floBanMob2 {
  position: fixed;
  bottom: 200px; /* 아래 끝에서부터의 거리 */
  right: 20px; /* 오른쪽 끝에서부터의 거리 */
  z-index: 99;
}

.fa-stack .fa-bars    {border-radius:75px;font-size:28px; opacity: 0.7;background-color: #000; color:#fff;}
.fa-stack .fa-search  {border-radius:75px;font-size:28px; opacity: 0.7;background-color: #000; color:#fff}
</style>


<div class="floBanMob1 hidden-lg">
    <span class=fa-stack>
        <a href="javascript:;" onclick="sidebar_open('sidebar-user');">
        <i class="fa fa-bars fa-2x fa-border"></i>
        12개
        </a>
    </span>
</div>


<div class="floBanMob2 hidden-lg">
    <span class=fa-stack>
        <a href="javascript:;" onclick="sidebar_open('sidebar-search');">
            <i class="fa fa-search fa-2x fa-border"></i>
        </a>
    </span>
</div>

<?php } ?>

 

 

이 질문에 댓글 쓰기 :

답변 1

<?php if(G5_IS_MOBILE) { // 사이트 좌측 스크롤 ?>
<style>
/* Mobile 카카오톡 상담 버튼 스타일 */
.floBanMob1 {
  position: fixed;
  bottom: 275px; /* 아래 끝에서부터의 거리 */
  right: 20px; /* 오른쪽 끝에서부터의 거리 */
  z-index: 99;
}
.floBanMob1 a {position: relative;}
.floBanMob1 a span {position: absolute; font-size : 10px; background-color: #fff; border : solid 1px #000; padding : 2px 4px; border-radius: 2px; top : -20px; right : -5px; line-height: 8px;}

/* Mobile 전화상담 버튼 스타일 */
.floBanMob2 {
  position: fixed;
  bottom: 200px; /* 아래 끝에서부터의 거리 */
  right: 20px; /* 오른쪽 끝에서부터의 거리 */
  z-index: 99;
}

.fa-stack .fa-bars    {border-radius:75px;font-size:28px; opacity: 0.7;background-color: #000; color:#fff;}
.fa-stack .fa-search  {border-radius:75px;font-size:28px; opacity: 0.7;background-color: #000; color:#fff}
</style>


<div class="floBanMob1 hidden-lg">
    <span class=fa-stack>
        <a href="javascript:;" onclick="sidebar_open('sidebar-user');">
            <i class="fa fa-bars fa-2x fa-border"></i>
            <span>12개</span>
        </a>
    </span>
</div>


<div class="floBanMob2 hidden-lg">
    <span class=fa-stack>
        <a href="javascript:;" onclick="sidebar_open('sidebar-search');">
            <i class="fa fa-search fa-2x fa-border"></i>
        </a>
    </span>
</div>

<?php } ?>

 

 

픽셀같은건 조금씩 조정해주셔야 할것입니다.

답변을 작성하시기 전에 로그인 해주세요.
전체 43
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT