How to add an icon before the text?

Question

In the Drupal Commerce purchase funnel, there are images for each step of the order.

I would like to replace the images with SVGs.

Here is the CSS :

.checkout-progress--step__previous:after {
    min-width: 10px;
    line-height: 1;
    white-space: nowrap;
    text-align: center;
    display: inline-block;
    font-family: icons !important;
    font-style: normal;
    font-weight: normal !important;
    vertical-align: middle;
    position: absolute;
    top: 25px;
    left: 50%;
    margin-left: 10px;
    content: "ok";
    color: #ffffff;
    background-color: #93C54B;
    border-radius: 25px;
    padding: 3px;
    font-size: 13px;
}

.checkout-progress {
    margin-bottom: 30px;
    padding: 0;
    color: #3E3F3A;
    text-align: center;
}

.checkout-progress--step {
    position: relative;
    display: inline-block;
    margin: 0 .5em .5em .5em;
    padding-top: 57px;
    padding-right: 0;
    min-width: 200px;
    background-image: url("../images/note.svg?v=1234");
    background-position: top center;
    background-size: 42px 42px;
    background-repeat: no-repeat;
    font-weight: bold;
    opacity: .4;
}

.checkout-progress--step:first-child {
    background-image: url("../images/info.svg?v=1234");
}

.checkout-progress--step:last-child {
    background-image: url("../images/gift.svg?v=1234");
}

.checkout-progress--step:before {
    content: "Etape " counter(checkout-progress) " | ";
    counter-increment: checkout-progress;
}

.checkout-progress--step__previous,
.checkout-progress--step__current {
    opacity: 1;
}

And HTML :

<ol class="checkout-progress clearfix">
  <li class="checkout-progress--step checkout-progress--step__current">Informations sur la commande</li>
  <li class="checkout-progress--step checkout-progress--step__next">Vérifier</li>
  <li class="checkout-progress--step checkout-progress--step__next">Terminé</li>
</ol>

Here is the result :

https://ibb.co/HthgZDL

I would like to replace the images with the SVGs below :

STEP 1 : https://icons.getbootstrap.com/icons/info-circle/

STEP 2 : https://icons.getbootstrap.com/icons/file-text/

STEP 3 : https://icons.getbootstrap.com/icons/bag/

I tried the following code in the CSS file but it doesn't work :

.checkout-progress--step:first-child {
  background-image: url("data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/><path d="M8.93 6.588l-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/></svg>");
}

Answer 1

No need to inline the SVG, when the SVG files are public. Just reference them as url(...).

Add these style mods after your existing style section:

<style>
  .checkout-progress--step {
    background-image: url(https://icons.getbootstrap.com/icons/file-text.svg);
  }
  .checkout-progress--step:first-child {
    background-image:
        url(https://icons.getbootstrap.com/icons/info-circle.svg);
  }
  .checkout-progress--step:last-child {
    background-image: url(https://icons.getbootstrap.com/icons/bag.svg);
  }
</style>

It works:

/* the original styling */

.checkout-progress {
  margin-bottom: 30px;
  padding: 0;
  color: #3E3F3A;
  text-align: center;
}

.checkout-progress--step {
  position: relative;
  display: inline-block;
  margin: 0 .5em .5em .5em;
  padding-top: 57px;
  padding-right: 0;
  min-width: 200px;
  background-image: url("../images/note.svg?v=1234");
  background-position: top center;
  background-size: 42px 42px;
  background-repeat: no-repeat;
  font-weight: bold;
  opacity: .4;
}

.checkout-progress--step:first-child {
  background-image: url("../images/info.svg?v=1234");
}

.checkout-progress--step:last-child {
  background-image: url("../images/gift.svg?v=1234");
}

.checkout-progress--step:before {
  content: "Etape " counter(checkout-progress) " | ";
  counter-increment: checkout-progress;
}

.checkout-progress--step__previous,
.checkout-progress--step__current {
  opacity: 1;
}


/* modifications to the styling */

.checkout-progress--step {
  background-image: url(https://icons.getbootstrap.com/assets/icons/file-text.svg);
}

.checkout-progress--step:first-child {
  background-image: url(https://icons.getbootstrap.com/assets/icons/info-circle.svg);
}

.checkout-progress--step:last-child {
  background-image: url(https://icons.getbootstrap.com/assets/icons/bag.svg);
}

<body style="padding:1rem">
  <ol class="checkout-progress clearfix">
    <li class="checkout-progress--step checkout-progress--step__current">Informations sur la commande</li>
    <li class="checkout-progress--step checkout-progress--step__next">Vérifier</li>
    <li class="checkout-progress--step checkout-progress--step__next">Terminé</li>
  </ol>
</body>

Answer 2

try to add !important; at the end of css element

.checkout-progress--step:first-child {
  background-image: url("data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/><path d="M8.93 6.588l-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/></svg>")!important;
}