Font Awesome 기호 위에 배지를 추가하는 방법은 무엇입니까?
Font Awesome 기호 ( fa-envelope
) 위에 숫자 (5, 10, 100)가있는 배지를 추가하고 싶습니다 . 예를 들면 :
그런데 상징 위에 배지를 붙이는 방법을 이해할 수 없습니다. 내 시도는 여기에서 사용할 수 있습니다 : jsFiddle .
Twitter Bootstrap 2.3.2를 지원하고 싶습니다.
추가 마크 업없이 새 클래스 (어쨌든 사용하게 될)와 의사 요소 만 있으면이 작업을 수행 할 수 있습니다.
HTML
<i class="fa fa-envelope fa-5x fa-border icon-grey badge"></i>
CSS
*.icon-blue {color: #0088cc}
*.icon-grey {color: grey}
i {
width:100px;
text-align:center;
vertical-align:middle;
position: relative;
}
.badge:after{
content:"100";
position: absolute;
background: rgba(0,0,255,1);
height:2rem;
top:1rem;
right:1.5rem;
width:2rem;
text-align: center;
line-height: 2rem;;
font-size: 1rem;
border-radius: 50%;
color:white;
border:1px solid blue;
}
@Paulie_D의 대답은 좋지만 가변 너비 컨테이너가 있으면 잘 작동하지 않습니다.
이 솔루션은 http://codepen.io/johnstuif/pen/pvLgYp에 대해 훨씬 더 잘 작동합니다 .
HTML :
<span class="fa-stack fa-5x has-badge" data-count="8,888,888">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-bell fa-stack-1x fa-inverse"></i>
</span>
CSS :
.fa-stack[data-count]:after{
position:absolute;
right:0%;
top:1%;
content: attr(data-count);
font-size:30%;
padding:.6em;
border-radius:999px;
line-height:.75em;
color: white;
background:rgba(255,0,0,.85);
text-align:center;
min-width:2em;
font-weight:bold;
}
랩 fa-envelope
과 span
A의 번호를 포함 div
하고 래퍼 DIV 확인 position:relative
과를 span
position:absolute
.
이 바이올린 확인
사용 된 HTML
<div class="icon-wrapper">
<i class="fa fa-envelope fa-5x fa-border icon-grey"></i>
<span class="badge">100</span>
</div>
CSS
.icon-wrapper{
position:relative;
float:left;
}
*.icon-blue {color: #0088cc}
*.icon-grey {color: grey}
i {
width:100px;
text-align:center;
vertical-align:middle;
}
.badge{
background: rgba(0,0,0,0.5);
width: auto;
height: auto;
margin: 0;
border-radius: 50%;
position:absolute;
top:-13px;
right:-8px;
padding:5px;
}
이것이 당신을 도울 수 있기를 바랍니다
아이콘 요소 내부에 배지를 배치하여 아이콘 컨테이너의 경계를 기준으로 배치 할 수있었습니다. em
배지의 크기가 아이콘의 크기에 비례하도록 s를 사용하여 모든 크기 조정을 수행 했으며 글꼴 크기를 간단히 변경하여 변경할 수 있습니다..badge
이것은 작동하는 것처럼 보이며 추가 할 코드가 매우 적습니다.
.badge{
position: relative;
margin-left: 60%;
margin-top: -60%;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<span class="fa-stack fa-3x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-bell fa-stack-1x fa-inverse"></i>
<span class="badge">17</span>
</span>
<span class="fa-stack fa-2x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-bell fa-stack-1x fa-inverse"></i>
<span class="badge">17</span>
</span>
<span class="fa-stack fa-1x">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-bell fa-stack-1x fa-inverse"></i>
<span class="badge">17</span>
</span>
참조 URL : https://stackoverflow.com/questions/22735740/how-to-add-badge-on-top-of-font-awesome-symbol
'programing tip' 카테고리의 다른 글
PHP 생성자의 목적 (0) | 2021.01.07 |
---|---|
C # 정규식은 예제와 일치 (0) | 2021.01.07 |
생성자에서 암시 적 변환을 피합니다. (0) | 2021.01.06 |
목록을 복사하는 가장 좋은 방법은 무엇입니까? (0) | 2021.01.06 |
iPhone에서 NSTimeInterval을 연도, 월, 일,시, 분 및 초로 나누려면 어떻게합니까? (0) | 2021.01.06 |