CODEWITHSUNDEEP
htmlcss
Arsene Wenger
Arsene Wenger

Reputation: 659

Insert an icon inside a div --- Is there a smart way?

I'm trying to insert an icon instead of increase/decrease text (shown in the image). So if it's decrease, the color of box will be red and arrow will be downward arrow and vice versa for increase.

My HTML and stylesheet looks like this :

.comparisonbox__tip {
  padding: 6px 12px;
  border-radius: 8px;
  width: auto;
}

.comparisonbox__tip-red {
  border: 2px solid #ed4e50;
  color: #ed4e50;
}

.comparisonbox__tip-green {
  border: 2px solid #009933;
  color: #009933;
}
<div className="comparisonbox__tip comparisonbox__tip-red">
  25% increase
</div>

Is there a way to insert icon inside the div? Before text or after text is fine. Can someone help me?

Image reference

Upvotes: 3

Views: 1172

Answers (3)

Bossman
Bossman

Reputation: 1524

Extension to @mplungjan answer. If you wanted to use an image instead, you could do:

.comparisonbox__tip:before {
    content: "";
    display: inline-block;
    background: url(/media/sample-logo.png) no-repeat;
    background-size: contain;
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

Upvotes: 0

mplungjan
mplungjan

Reputation: 177786

Use ::after CSS3 (or :after CSS2)

and Unicode Up-arrow and Down-arrow

.comparisonbox__tip {
  padding: 6px 12px;
  border-radius: 8px;
  width: auto;
}

.comparisonbox__tip-red {
  border: 2px solid #ed4e50;
  color: #ed4e50;
}
.comparisonbox__tip-red::after {  content: "▼" }

.comparisonbox__tip-green {
  border: 2px solid #009933;
  color: #009933;
}

.comparisonbox__tip-green::after {  content: "▲" }
<div class="comparisonbox__tip comparisonbox__tip-red">
  25% 
</div>

<div class="comparisonbox__tip comparisonbox__tip-green">
  35% 
</div>

Upvotes: 4

Lundstromski
Lundstromski

Reputation: 1247

You could use Font Awesome and change the icon depending on the class.

.comparisonbox__tip {
  padding: 6px 12px;
  border-radius: 8px;
  width: auto;
}

.comparisonbox__tip::after {
 font-family: "Font Awesome 5 Free";
 font-weight: 900;
}

.comparisonbox__tip-red {
  border: 2px solid #ed4e50;
  color: #ed4e50;
}

.comparisonbox__tip-red::after {
  content: "\f063";
}

.comparisonbox__tip-green {
  border: 2px solid #009933;
  color: #009933;
}

.comparisonbox__tip-green::after {
  content: "\f062";
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet"/>

<div class="comparisonbox__tip comparisonbox__tip-green">
25% increase
</div>

<div class="comparisonbox__tip comparisonbox__tip-red">
25% increase
</div>

Upvotes: 1

Related Questions