Implementing personalized SVG icons for list items

Here is some HTML code along with SCSS that I need help with:

<div class="risk">
    <ul>
    <li><span>Aggressive</span>Lorem ipsum dolor ...</li>
    <li><span>Growth</span>doloremque autem...</li>
    </ul>
</div>

The SCSS is as follows:

ul {
    list-style: none;
    margin: 0;
    padding: 0;
    li {
        margin: 0;
        padding: 0 0 0 40px;
        span {
            &:before {
                content: url('data:image/svg+xml;utf8,<svg width="24px" height="24px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><rect x="1" y="1" rx="6" ry="6" width="22" height="22" style="fill:transparent;stroke:black;stroke-width:1.1;opacity:0.9" ></rect></svg>');
                display: inline-block;
                width: 30px;
                margin-left: -30px;
            }
            font-weight: bold;
            margin-right: 2rem;
        }
    }
}

How can I align the SVG image with the middle of the LI text?

Various padding and margin options have been attempted, but the image consistently appears higher than the text.

htmlcsssvg

Answer №1

To align the pseudo element in the middle, you should use the CSS property vertical-align: middle;.

By default, inline elements have a vertical alignment of baseline.

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  margin: 0;
  padding: 0 0 0 40px;
}

span {
  font-weight: bold;
  margin-right: 2rem;
}

span:before {
  content: url('data:image/svg+xml;utf8,<svg width="24px" height="24px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><rect x="1" y="1" rx="6" ry="6" width="22" height="22" style="fill:transparent;stroke:black;stroke-width:1.1;opacity:0.9" ></rect></svg>');
  display: inline-block;
  width: 30px;
  margin-left: -30px;
  vertical-align: middle;
}
<div class="risk">
  <ul>
    <li><span>Aggressive</span>Lorem ipsum dolor ...</li>
    <li><span>Growth</span>doloremque autem...</li>
  </ul>
</div>

Answer №2

To center the icons with the other elements, you should align them vertically at the middle.

Simply include this CSS code: vertical-align: middle;

CSS code 

 div.risk ul {
    list-style: none;
    margin: 0;
    padding: 0; }
    div.risk ul li {
      margin: 0;
      padding: 0 0 0 40px; }
      div.risk ul li span {
        font-weight: bold;
        margin-right: 2rem; }
        div.risk ul li span:before {
          content: url('data:image/svg+xml;utf8,<svg width="24px" height="24px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><rect x="1" y="1" rx="6" ry="6" width="22" height="22" style="fill:transparent;stroke:black;stroke-width:1.1;opacity:0.9" ></rect></svg>');
          display: inline-block;
  vertical-align: middle; /* Add this line */
          width: 30px;
          margin-left: -30px; }
<div class="risk">
<ul>
    <li><span>Aggressive</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit quibusdam tempora numquam, officiis cupiditate libero maxime explicabo accusantium, deserunt voluptatem a doloremque autem laborum eligendi magnam recusandae ab, perferendis impedit.</li>
    <li><span>Growth</span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit quibusdam tempora numquam, officiis cupiditate libero maxime explicabo accusantium, deserunt voluptatem a doloremque autem laborum eligendi magnam recusandae ab, perferendis impedit.</li>
    </ul>
</div>

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

Issues with HTML5 file uploads causing delays in iOS Safari mobile browsers

I developed a simple HTML5 file upload script using $.ajax(). I also attempted to use xhr, but encountered the same issue. The script successfully uploads an image to imgur.com and works flawlessly on desktop browsers as well as iOS Safari. However, in iOS ...

ajaxhtmlfile-uploadmobile-safari

Angular 2 Login Component Featuring Customizable Templates

Currently, I have set up an AppModule with a variety of components, including the AppComponent which serves as the template component with the router-outlet directive. I am looking to create an AuthModule that includes its own template AuthComponent situa ...

htmlangulartypescriptangular2-routingangular2-template

Exploring Bootstrap's Product sample and attempting to understand the process of incorporating images

Currently, I am utilizing Bootstrap 4 and taking advantage of their Product example as a foundation: https://getbootstrap.com/docs/4.4/examples/product/ My goal is to transform the white and gray background sections into actual images of the product. The ...

htmlimagebootstrap-4responsive-images

Issue encountering with flex-wrap to shift to the next row once reaching the 5th element

Recently, I've been experimenting with creating an image gallery using flexbox and incorporating a flex-basis transition to control the growth and shrinkage of elements upon hover. However, I'm encountering difficulties in adjusting the gallery t ...

htmlcssflexboxflex-grow

Use setTimeout and setInterval with the initial input without parentheses or double quotation marks

<!DOCTYPE HTML> <html> <head> <script type="text/javascript"> var count=0; function increaseCount(){ document.getElementById('txt').value=count; count++; setTimeout(increaseCount(),1000); } </script> </head&g ...

javascriptjquerynode.jshtml

I want to design a bootstrap row with two col-**-6 columns, and within the second col-**-6, I want to add another two columns so that they stack on top of each other

I've managed to get it working to some extent, but I still need the col-**-6 elements to not stack on top of each other on smaller screens. This image shows what I'm aiming for: Each color represents a col-**-6. That's the layout I want, ...

htmltwitter-bootstrapbootstrap-5

Step by step guide on inserting View and Delete buttons in an HTML table populated by JSON data

I've successfully loaded data from a JavaScript file in JSON format into a plain HTML table using JavaScript. Everything is working well so far. I now want to enhance the table by adding two buttons, View and Delete, that when clicked will redirect to ...

javascripthtml

Make sure a div is displayed on top of any content currently in fullscreen mode

I recently encountered an issue with my Chrome extension where a menu I inserted into the page would disappear whenever a flash or html5 video player went full screen. Is it possible to have two objects in full screen simultaneously, or is there another so ...

javascriptjqueryhtmlcssgoogle-chrome

Tips for creating a full-screen first page while keeping the others standard

Looking to create a dynamic HTML5/CSS/JS Website where the first page always displays in fullscreen mode with a background image, while the subsequent pages appear in a normal layout. Here's an example of what I'm aiming for: I've created ...

jquerycsshtmlfullscreenfullpage.js

Is it possible to vertically displace an element within a CSS Grid cell?

Here is the code snippet: .grid-container { display: grid; grid-template-columns: auto auto auto; background-color: #2196F3; padding: 10px; } .grid-item { background-color: rgba(255, 255, 255, 0.8); border: 1px solid rgba(0, 0, 0, 0.8); ...

htmlcss

Is there a way to transfer the chosen maximum and minimum price values to a JavaScript function within a select tag in HTML?

I have a search form that includes select options with two values. However, I want to have two select options for both the Max and Min price values. <input type="hidden" id="budget_min" name="filter_budget_min" value="0" /> <select onchange="upda ...

javascriptphphtml

Issues encountered with PHP integration for Bootstrap carousel

I'm facing a challenge with modifying an existing carousel to load data from an SQL database instead of hardcoding it. After successfully fetching the data using PHP, I noticed that the controls of the carousel are not functioning as expected. Upon i ...

phphtmltwitter-bootstrap

Printing in HTML is limited to only one page

While printing an HTML table that can vary in length, I often encounter the issue of it printing multiple pages. Is there a way to limit the printing to just one page through coding? Yes, you can achieve this by using the option in the browser print dialog ...

javascripthtml

Attaching a Stylesheet (CSS) without being inside the HEAD Tag

After seeing numerous inquiries about this topic, I have yet to find the answer I seek. My main question is whether it is feasible to connect an external stylesheet in a location other than the HEAD tag. I am facing this issue because I need to use Conflu ...

htmlcssstyleshead

I am in need of a efficient loader for a slow-loading page on my website. Any recommendations on where to find one that works

I'm experiencing slow loading times on my website and I'm looking to implement a loader that will hide the page until all elements are fully loaded. I've tested several loaders, but they all seem to briefly display the page before the loader ...

javascriptjqueryhtmlperformancegoogle-chrome

How can I dictate the placement of a nested Material UI select within a popper in the DOM?

Having trouble placing a select menu in a Popper. The issue is that the nested select menu wants to mount the popup as a sibling on the body rather than a child of the popper, causing the clickaway event to fire unexpectedly. Here's the code snippet f ...

javascripthtmlreactjsmaterial-ui

jQuery template does not respond to input text when a click event is enabled on an iPhone device

Below is a jQuery template I have: <div class="parent-class"> <div class="sub-class"> <div clas="sub-input-class"> <input type="text" /> </div> </div> </div> Recently, I ...

javascriptjqueryhtmliphonejquery-templates

Arrange the given data either by ID or Name and present it

Here is the code snippet I am working with: <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <style> .content{ border: 1px solid gray; width: 250px; ...

javascriptjqueryhtml

Image superimposed with vertical dimension

I have a photo with specific dimensions and I want to create a div box with a button inside the image, similar to what is shown in this example: Example Image Here is my current code attempt: .wrapper { width: auto; text-align: center; } .wrapper: ...

htmlcss

When trying to load AJAX, it does not function properly unless the page is refreshed

I'm currently working on a web page and encountering some difficulties. Within my HTML, I have two divs that are refreshed using AJAX. The issue is that the content loading seems to be inconsistent unless I manually refresh the page or implement a tim ...

javascriptajaxhtml