Is there a way to customize the appearance of an unordered list by setting it to display as an image instead of default bullets? I want to

I have been attempting to achieve this desired outcome. However, my efforts to reproduce it resulted in the check marks being rendered at a smaller size than intended due to using an SVG file. An example of this issue can be seen in the following image: I am currently facing this challenge.

The CSS code I employed is as follows:

li{
  font-size: 21px;
  margin-bottom: 1rem;
  list-style-image: url("images/download.svg");
}

I am also uncertain about how to include the background color into the replication process. Could you provide guidance on achieving the desired output depicted in the image above?

javascripthtmlcsscss-selectorshtml5-canvas

Answer №1

Give this a shot

ul {

  list-style-type: none;

}


ul li:before {

  content: '';

  display: inline-block;

  height: 10px;

  width: 10px;

   background-size: 10px;

  background-image: url("http://www.freepngimg.com/thumb/star/1-red-star-png-image-thumb.png");

  background-repeat: no-repeat;

  margin-right: 5px;

}

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

I keep running into an issue whenever I attempt to import material ui icons and core - a frustrating error message pops up stating that the module cannot be found

[I keep encountering this error message when attempting to utilize @material-ui/core and icons] `import React from "react"; import "./Sidebar.CSS"; import SearchIcon from "@material-ui/icons/Search"; const Sidebar = () => { return ( <> ...

javascriptreactjsreact-reduxreact-routermaterial-ui

Step-by-step guide on transforming jQuery code into Vue JS:

Recently delving into Vue, attempting to translate previous JS + JQuery code into Vue Here is the list I'm working with: <ul id="progressbar"> <li class="active">integration Ip's</li> <li>T ...

javascriptvue.js

Implementing Event Listeners in Vue 3.0: A Guide to Attaching to the Parent Element

How can I attach an addEventListener to the parent element in Vue 3.x? I discovered that you can access the parent by using this code: import { getCurrentInstance, onMounted } from 'vue' onMounted(() => { console.log(getCurrentInstance() ...

javascriptvue.jsvuejs3

Allow foreign characters with regex while excluding special symbols

While browsing, I came across this thread: Is there a regular expression to match non-English characters?. It provides a regex to remove foreign characters using the code snippet str = str.replace(/[^\x00-\x7F]+/g, "");. My goal is slightly diff ...

javascriptregex

Vue component not receiving the updated prop value from parent component

I am encountering a problem with my parent-child component setup. The issue arises when I pass a validation field as a prop from the parent to the child, but it doesn't update upon the first click of the submit button in the child component. To explai ...

javascriptvue.js

Every time a row is selected, React and material-ui cause all TableRows to be re-rendered anew

Recently, I came across a code snippet that looks like this: <Table selectable onRowSelection={this.onRecordSelected} bodyStyle={tableBodyStyle}> <TableBody deselectOnClickaway={false} showRowHover displayRowCheckbox={false}> ...

javascriptreactjsmaterial-ui

Attempting to grasp the correct method for understanding For loops

Lately, I've been diving into teaching myself Node.JS and it has been quite an enjoyable experience. However, I've hit a frustrating roadblock that is really causing me some grief. For some reason, I just can't seem to grasp the concept of F ...

javascriptjquerynode.js

Issue with Datatables FixedColumns plugin in IE8/7 and Firefox

I am encountering issues with the FixedColumn plugin on IE8, IE7, and Firefox. All of them are causing my table to malfunction, displaying the following error: Error: Invalid argument. Line: 566 Char: 3 Code: 0 URI: ./resources/javascript/dataTable/Fixed ...

javascriptjquerydatatables

Why did the CSS rendering suddenly come to a halt?

I am facing a confusion with EJS. When I make a post request, EJS renders my CSS properly. However, when I try the following code snippet: exports.resetpassword = async (req, res) => { const {id, token} = req.params; const user = await LoginMo ...

cssnode.jsejs

Issue with sticky positioning not functioning properly with overlapping scrolling effect

When the user scrolls, I want to create an overlapping effect using the 'sticky' position and assign a new background color to each div (section). However, despite setting 'top' to 0 for the 'sticky' position, the divs still s ...

htmlcss

The HTML password input continues to respond to key bindings, even when other inputs are not affected by the bindings

In the ongoing development of a legacy react application, I encountered keybindings that are causing unexpected behavior. For instance, pressing the "F" key triggers the full screen mode within the app. However, this keybinding is inadvertently active for ...

htmlreactjsinputkey-bindings

Using JavaScript to locate a child element within its parent

What is the most effective approach to locate a child element (using class or ID) of a specific parent element using only pure JavaScript without relying on jQuery or other frameworks? In this scenario, I am interested in finding child1 or child2 within p ...

javascriptdom

Guide on merging non-modular JavaScript files into a single file with webpack

I am trying to bundle a non-modular JS file that uses jQuery and registers a method on $.fn. This JS must be placed behind jQuery after bundling. Here is an example of the structure of this JS file: (function($){ $.fn.splitPane = ... }(JQuery) If y ...

javascripttypescriptwebpackfrontend

Adjust the dimensions of the embedded Google document

Currently, I am in the process of developing a website for my initial client and I'm encountering some difficulty in adjusting the size and background color of an embedded google doc. If anyone could provide assistance, it would be greatly appreciated ...

htmlcss

Barba.js Revolutionizes Page Reloading for Initial Links

On my Wordpress site, I am using Barba js v.2 for page transitions. However, I have encountered an issue where I need to click on a link twice in order to successfully change the page and make the transition work. Interestingly, the first time I click on t ...

javascriptphphtmlwordpressbarbajs

What is the best way to display HTML content from a stored object?

In my project using Next.js, I am faced with the challenge of rendering custom landing pages based on their unique URLs. While I have successfully retrieved all the necessary details from the database for each specific URL, there is a particular object con ...

htmlreactjsnext.jsrenderingmern

Using Javascript to Highlight a Single Row in a Table

Greetings esteemed members of the skilled community at StackOverflow, I must humbly ask for your expertise in solving a dilemma that I am currently facing. The situation is as follows: I have a table generated from an SQL query, and it is crucial for the ...

javascripthtmlhtml-table

Utilize a pre-defined layout in a Vue component that is sent as a property

As a complete beginner, I kindly ask for your patience as I navigate through the coding basics. I am looking to utilize a template specified in the prop. The template is located within the DOM. My intention for approaching it this way is to reuse the comp ...

javascriptvue.js

How come my invocation of (mobx) extendObservable isn't causing a re-render?

Can't figure out why the render isn't triggering after running addSimpleProperty in this code. Been staring at it for a while now and think it might have something to do with extendObservable. const {observable, action, extendObservable} = mobx; ...

javascriptreactjsmobx

Is it possible to customize the deep elements of ExpansionPanelSummary using styled-components in React?

After digging into the documentation and examples on how to customize Material UI styling with styled-components, I successfully applied styling to the root and "deeper elements" within an ExpansionPanel and ExpansionPanelDetails. However, when attempting ...

javascriptcssreactjsmaterial-uistyled-components