아이콘에 알림 배지를 붙이는 방법은 무엇입니까?
요한 모텐슨
알림 배지가 작동하도록 노력하고 있으며 거의 다되었습니다. :)
알림 배지가 있으면 잘 작동하지만 제거하면 어떤 이유로 아이콘이 떨어지고 이유를 알 수 없습니다.
.icon-badge-group .icon-badge-container {
display: inline-block;
margin-left: 15px;
}
.icon-badge-group .icon-badge-container:first-child {
margin-left: 0
}
.icon-badge-container {
margin-top: 20px;
position: relative;
}
.icon-badge-icon {
font-size: 30px;
position: relative;
}
.icon-badge {
background-color: red;
font-size: 12px;
color: white;
text-align: center;
width: 20px;
height: 20px;
border-radius: 35%;
position: relative;
top: -35px;
left: 17px;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" rel="stylesheet"/>
<div class="container">
<div class="icon-badge-container">
<i class="far fa-envelope icon-badge-icon"></i>
<div class="icon-badge">6</div>
</div>
<div class="icon-badge-container">
<i class="far fa-user icon-badge-icon"></i>
<div class="icon-badge">6</div>
</div>
<div class="icon-badge-group">
<div class="icon-badge-container">
<i class="far fa-envelope-open icon-badge-icon"></i>
<div class="icon-badge">6</div>
</div>
<div class="icon-badge-container">
<i class="far fa-user icon-badge-icon"></i>
</div>
<div class="icon-badge-container">
<i class="far fa-user icon-badge-icon"></i>
<div class="icon-badge">6</div>
</div>
</div> 아르노 텐 킨크
정말 잘하셨습니다. 변경해야 할 것은에서 relative로의 위치뿐이었습니다 absolute. 이를 변경하면 배지가 다른 요소 흐름 / 레이아웃 위치와의 상호 작용을 중지하고 요소의 일종의 '위에있는 레이어'가 icon-badge-container됩니다.
다른 인라인 블록 요소 icon-badge-container는 더 이상 배지에 의해 방해받지 않습니다.
어떤 줄이 변경되었는지 주석으로 CSS에 표시했습니다.
위치에 대한 추가 정보 : https://developer.mozilla.org/en-US/docs/Web/CSS/position
.icon-badge-group {
}
.icon-badge-group .icon-badge-container {
display: inline-block;
margin-left:15px;
}
.icon-badge-group .icon-badge-container:first-child {
margin-left:0
}
.icon-badge-container {
margin-top:20px;
position:relative;
}
.icon-badge-icon {
font-size: 30px;
position: relative;
}
.icon-badge {
background-color: red;
font-size: 12px;
color: white;
text-align: center;
width:20px;
height:20px;
border-radius: 35%;
position: absolute; /* changed */
top: -5px; /* changed */
left: 18px; /* changed */
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="icon-badge-group">
<div class="icon-badge-container">
<i class="far fa-envelope-open icon-badge-icon"></i>
<div class="icon-badge">6</div>
</div>
<div class="icon-badge-container">
<i class="far fa-user icon-badge-icon"></i>
</div>
<div class="icon-badge-container">
<i class="far fa-user icon-badge-icon"></i>
<div class="icon-badge">6</div>
</div>
</div>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
관련 기사
Related 관련 기사
- 1
런타임에 작은 알림 아이콘의 실제 크기를 찾는 방법은 무엇입니까?
- 2
Sony Xperia 장치의 응용 프로그램 아이콘에 알림 배지 / 개수를 추가하는 방법은 무엇입니까?
- 3
Firefox 업데이트 알림을 중지하는 방법은 무엇입니까?
- 4
각 알림의 페이로드를 얻는 방법은 무엇입니까?
- 5
위치 알림 (시스템 알림)이 표시되기를 기다리는 방법은 무엇입니까?
- 6
알림 영역에서 아이콘을 올바르게 설정하는 방법은 무엇입니까?
- 7
알림 iOS에서 아이콘을 변경하는 방법은 무엇입니까?
- 8
Windows 7의 작업 표시 줄에 알림 아이콘을 표시하는 방법은 무엇입니까?
- 9
알림 영역에서 "ENG"언어 아이콘을 숨기는 방법은 무엇입니까? (윈도우 10)
- 10
바에서 알림을 지우는 방법은 무엇입니까?
- 11
알림 번호를 뷰에 전달하는 방법은 무엇입니까?
- 12
setnumber 알림 android에 %를 추가하는 방법은 무엇입니까?
- 13
Azure에서 알림을 보내는 C # 웹 페이지를 만드는 방법은 무엇입니까?
- 14
웹 푸시 알림의 백엔드에서 이미지를 보내는 방법은 무엇입니까?
- 15
푸시 알림에 이미지를 추가하는 방법은 무엇입니까?
- 16
이미지를 폴더에 저장 한 후 즉시 알림을받는 방법은 무엇입니까?
- 17
Windows 풍선 알림에 이미지를 표시하는 방법은 무엇입니까?
- 18
Firefox 푸시 알림에서 이미지를 비활성화하는 방법은 무엇입니까?
- 19
헤드 업 알림 레이아웃을 사용자 지정하는 방법은 무엇입니까?
- 20
아이콘 배지 수를 확인하는 방법은 무엇입니까?
- 21
OpsWorks 배포 알림을받는 방법은 무엇입니까?
- 22
전화 알림을 받고 크롬 바탕 화면 알림 및 사이트 내 팝업 알림을 중지하는 방법은 무엇입니까?
- 23
Flutter에서 배경에 사용자 지정 소리 알림을 설정하는 방법은 무엇입니까?
- 24
Android에서 알림이 발생했는지 확인하는 방법은 무엇입니까?
- 25
WorkLight 6.2-WorkLight 콘솔에서 전송 된 이전 알림 메시지를 확인하는 방법은 무엇입니까?
- 26
Android에서 알림 트레이의 색상을 지정하는 방법은 무엇입니까?
- 27
Xamarin Forms를 사용하여 앱이 닫힌 경우에도 알림을받는 방법은 무엇입니까?
- 28
iOS 10 알림에서 애플리케이션 상태를 얻는 방법은 무엇입니까?
- 29
Jenkins 이메일 알림에서 환경 변수를 얻는 방법은 무엇입니까?
몇 마디 만하겠습니다