Warm tip: This article is reproduced from stackoverflow.com, please click
bootstrap-4

Icon in top Corner using Bootstrap 4

发布于 2020-03-29 12:46:08

Hi I am trying to add an icon in the top right corner of a span.

But I cannot figure it out.

Can anyone help?

<div class="tagset">
<span class="badge badge-grey">User <i class="fas fa-user"></i></span>
<span class="badge badge-grey">Add Me <i class="fas fa-plus"></i></span>
<span class="badge badge-grey">Loss Me <i class="fas fa-minus"></i></span>
</div>

looking for something like the image below:

enter image description here

Questioner
Stephen Cossgrove
Viewed
442
分享
mahan 2020-01-31 16:20

Boostrap-4 does have .classes for a situation like this. So You need to write some custom CSS.

Use postion:relative on .badge elements and postion:absolute on icons. 

.badge {
  display: inline-block;
  margin: auto 10px;
  padding: 10px 30px !important;
}

.fas {
  padding: .2rem .3rem;
  position: absolute;
  /* You may need to change top and right. They depend on padding/widht of .badge */
  top: -10px;
  right: -10px;
  background: green;
  border-radius: 50%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0/css/all.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="tagset mt-5">
  <span class="badge bg-primary position-relative">User <i class="fas fa-user"></i></span>
  <span class="badge bg-primary position-relative">Add Me <i class="fas fa-plus"></i></span>
  <span class="badge bg-primary position-relative">Loss Me <i class="fas fa-minus"></i></span>
</div>

Read this css-tricks article should you need more info.

Related issues

1
How to get bootstrap to take whole screen
2
How to hide or show bootstrap 4 collapse using jquery
3
Can't change column width and margin when layout=fixed
4
How can I reorder elements horizontally aligned in navbar based on screen size (bootstrap)
5
How to add hover button into card view
6
Can you help me to arrange some cards in a web page with Bootstrap 4?
7
Asp.Net Bootstrap reformat table for mobile media query without side scroll
8
On select to show the selected dropdown item
9
Slick slider messing with font in complete different location on Chrome
10
Resizing bootstrap cards to match them