What is the process for including an icon ahead of the text?

Throughout the Drupal Commerce purchase funnel, there are accompanying images for each step of the order process.

I am interested in replacing these images with SVGs to enhance the visual experience.

Below is the CSS code snippet :

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

Here is the HTML structure :

<ol class="checkout-progress clearfix">
  <li class="checkout-progress--step checkout-progress--step__current">Order Information</li>
  <li class="checkout-progress--step checkout-progress--step__next">Verify</li>
  <li class="checkout-progress--step checkout-progress--step__next">Complete</li>
</ol>

View the final outcome here:

https://ibb.co/HthgZDL

I wish to swap out the existing images with the following SVG icons for better clarity:

STEP 1 :

STEP 2 :

STEP 3 :

I attempted using the given CSS code below but encountered issues:

.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>");
}
htmlcssbootstrap-4drupal-8bootstrap-icons

Answer №1

When the SVG files are already public, there is no need to inline them; you can simply reference them using the url(...) syntax.

Make sure to implement these style modifications after your current style declarations:

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

Here's how it should work with the updated styles:

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


/* Style modifications */

.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

Make sure to include !important; after the 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;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Position the input element in the middle of the div

Is it possible to center a form input element within a div element without it changing position when the browser window size is adjusted? I attempted using margin: auto and position: relative, but encountered issues with the element moving. How can this be ...

htmlcss

How can I receive a response in Express using a promise?

Can I access the response of a post function within an Express code block and send raw HTML? Here's what my current code looks like: let promiseLink = new Promise(function(resolve, reject) { app.post('/recipes', (req, res) => { ...

javascripthtmlnode.jsexpress

The CSS transition fails to function correctly once a specific function is executed

When I hover over a div, the background color changes due to a transition effect. However, if I click on a button that triggers myFunction2 to change the background color of the div before hovering over it, the transition effect no longer works. functi ...

javascripthtmlcss

CloudFront for Amazon - Limit MP3 playback to designated website

I've been trying to find a solution for allowing mp3 files in an Amazon S3 bucket paired with Cloudfront to be streamed directly on my site without revealing the source URL of the mp3s. I want to prevent others from sharing or leeching the link by vie ...

javascripthtmlamazon-s3amazon-cloudfrontmediaelement.js

Show various Bootstrap Alert Messages based on the type of error detected?

Trying to figure out how best to explain this, here it goes! I am working on a website and I want to incorporate alert messages. Check out some examples here. Depending on the form inputs, I need different alerts to be displayed. PHP will validate the in ...

javascriptphpjquerycsstwitter-bootstrap

Interactive pop-up text box for data cells in a table

I have implemented a textarea in the td cell of each row within column 3 to store description specific to that row. The goal is for the current description in the td's textarea to be copied over to the textarea located inside #div_toggle when the user ...

htmljquerycss

Troubleshooting: Twitter Bootstrap dropdown feature experiencing issues within navigation bar

I am facing an issue with getting the bootstrap dropdown to function properly. I have tested it on my mobile device and noticed that the menu does not drop down as expected. Here is a DEMO Below is the code snippet: <nav class="navbar navbar-inverse ...

jqueryhtmlcsstwitter-bootstrapdrop-down-menu

Toggling javascript functionality based on media queries

On one of my slides, I want to display images that are specific to different devices like iPhone, iPad, and desktop. I am looking for a way to filter these images based on the device. Using display:none won't work as it's JavaScript, but here is ...

javascripthtmlcss

Traditional Javascript is unable to add elements to the DOM

I am currently facing an issue with my website that is built in Expression Engine. The back-end of the website contains a code snippet responsible for handling a JavaScript request and generating a page based on that request. One of the challenges I am en ...

javascripthtml

What distinguishes these two selectors from each other?

On a webpage, there are various div elements, with some having the class 'class1'. Inquiry: Do both of the selectors below retrieve all div elements with the class of class1? $("div .class1") $("div.class1") ...

javascriptjquerycss

Creating a CSS triangle that expands the full width of the page

Here is a triangle: #header-triangle-right { position: absolute; float: right; top:0px; right:0; z-index: 0; overflow: hidden; width: 0; height: 0; border-top: 400px solid transparent; border-right: 1000px solid #00 ...

csshtml

Creating background images in select tag using only CSS

I am interested in achieving the following task This is a selection drop down form that I need to work on Here is the code snippet: HMTL <select> <option>Country</option> <option>I ...

formscss

What is the best method for choosing the parent elements?

I am attempting to create a sidebar that saves the last clicked link in local storage and still displays the collapsed links after the page is reloaded. $(".clickedLink").parent().parent().css('background-color', 'green'); Ca ...

javascripthtmljqueryparent

Are there alternative methods to improve the responsiveness of a column layout?

Check out this codesandbox I created to display my current status. When you change the column-count to three, a significant amount of information becomes hidden because it doesn't scroll. I've attempted using grid and flexbox layouts, but everyt ...

cssreactjsstyled-components

Trouble with selecting a color from the picker tool

Working with HTML markup often presents challenges, especially when it comes to using a color picker on Mac OS. I find that trying to match the exact background color of a div element by picking up color from an image can be tricky. After using the Mac co ...

htmlcss

How can I align the <li> items within a <ul> on the right side using Bootstrap?

How can I align <li> elements in one <ul> on the right side to be displayed in a single line? <nav class="navbar navbar-inverse"> <div class="container-fluid"> <div class="navbar-header"& ...

cssbootstrap-4navbar

What modifications are needed to transform an input[type=text] element into a textarea?

Is there a way to make an input[type=text] element behave like a textarea, displaying multiple lines and having a larger height? Unfortunately, I cannot simply replace it with a textarea. Any suggestions on how to convert or modify the input element to w ...

javascripthtmlcssformsinput

How can I ensure the carousel stays centered on a webpage even after resizing the browser window?

Currently in the process of developing a website, I have implemented a jquery-based carousel on the homepage sourced from here. However, substantial modifications were made to tailor its appearance specifically for the site. The issue at hand is that I hav ...

javascriptjqueryhtmlcsscarousel

Aligning text in the middle of an image both vertically and horizontally

I've been experimenting with different methods to vertically align caption text in the middle of an image, but I haven't had much luck. I've tried using table-cells and other techniques, without success! Currently, I have an <li> elem ...

htmlcss

Angular Update Component on Input ChangeEnsuring that the component is automatically

<div class=" card-body"> <div class="row"> <div class=" font-icon-list col-lg-2 col-md-3 col-sm-4 col-xs-6 col-xs-6" routerLinkActive="active" *ngFor="let subject of subjects"> <div class=" fon ...

htmlangulartypescript