programing tip

Font Awesome 기호 위에 배지를 추가하는 방법은 무엇입니까?

itbloger 2021. 1. 6. 07:51
반응형

Font Awesome 기호 위에 배지를 추가하는 방법은 무엇입니까?


Font Awesome 기호 ( fa-envelope) 위에 숫자 (5, 10, 100)가있는 배지를 추가하고 싶습니다 . 예를 들면 :

사진

그런데 상징 위에 배지를 붙이는 방법을 이해할 수 없습니다. 내 시도는 여기에서 사용할 수 있습니다 : jsFiddle .

Twitter Bootstrap 2.3.2를 지원하고 싶습니다.


추가 마크 업없이 새 클래스 (어쨌든 사용하게 될)와 의사 요소 만 있으면이 작업을 수행 할 수 있습니다.

JSFiddle 데모

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-envelopespanA의 번호를 포함 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;
}

이것이 당신을 도울 수 있기를 바랍니다


http://jsfiddle.net/zxVhL/16/

아이콘 요소 내부에 배지를 배치하여 아이콘 컨테이너의 경계를 기준으로 배치 할 수있었습니다. 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

반응형