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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

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

CodePudding user response：

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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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;
}