如何在文本前添加图标？

Question

在 Drupal Commerce 购买漏斗中，订单的每个步骤都有图像。

我想用 SVG 替换图像。

这里是 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;
}

还有 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>

结果如下：

https://ibb.co/HthgZDL

我想用下面的 SVG 替换图像：

第 1 步：https://icons.getbootstrap.com/icons/info-circle/

第 2 步：https://icons.getbootstrap.com/icons/file-text/

第 3 步：https://icons.getbootstrap.com/icons/bag/

我在 CSS 文件中尝试了以下代码，但它不起作用：

.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

当 SVG 文件是公开的时，无需内联 SVG。只需将它们引用为url(...)。

在您现有的样式部分之后添加这些样式模块：

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

有效：

/* 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/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);
}

<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

尝试添加 !important;在css元素的末尾

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