Unique Floating Bullet Icons Ascending When Enlarged

I'm currently trying to use a star image as a custom bullet point on an <li> element. However, I'm facing the issue where the bottom of the image aligns with the font's baseline, causing the image to be pushed upwards. Is there any solution to resolve this problem, or should I resort to using a css background image as an alternative? 

ul.features-list {
    list-style-image: url('../assets/star-bullet.svg');
    margin-left: 10px;
}

.features-item {
    font-size: 36px;
}

Any thoughts or suggestions on how to tackle this issue?

htmlcsscss-float

Answer №1

One way to incorporate the Bullet image is by setting it as a Background-image for the li element

You can see a live demonstration here : http://codepen.io/anon/pen/bjJtC

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

Having an issue with retrieving value from a textfield in JavaScript

<input id="checkOldPassword" type="button" title="Check New Password" value="Check New Password" onclick="checkPassword()" /> <input id="newPassword" type="text" maxlength="8" min="8" /> <script language="javascript"> function checkPassw ...

javascripthtmltextfield

Manage and modify data values

Currently, I am developing a weather forecast app and facing an issue with changing the temperature from Celsius to Fahrenheit upon hovering. Despite my attempts, the changes I make either do not reflect or completely erase the line. I am eager to learn ...

javascriptjqueryhtml

Ways to display or conceal an anchor tag depending on the database value

I am facing an issue with my aspx page where I have a listview containing three tags - one for hotel invoice, the second for package, and the third for vehicle. Currently, all three tags are visible. What I want is for the visibility of the tags to chang ...

htmlasp.net

How can the issue of the navbar color not being able to disappear or turn transparent be resolved, given its connection to the body color?

@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@400;500;600;700&display=swap'); :root { --color-body: #b6cbce; --color-heading: #eef3db; --color-base: #033f47; --color-base2: #022a30; --color-brand ...

htmlcssbootstrap-5

Ensure that the left div spans 100% of the width of the container, while the right div remains on the right side and maintains a

Is there a way to create an effect with a div where the left side is 100% and the right side stays fixed? <!DOCTYPE html> <html> <style> .left { width: 100%; float: left; border: #ccc solid 1px; } .right { width: 50px; float:left; border ...

csshtml

"Enhance your website with a dynamic Jssor slider featuring nested slides and vertical

Exploring the idea of merging the nested slider feature with a vertical thumbnail display. Reviewing the source code for examples image-gallery-with-vertical-thumbnail.source.html and nested-slider.source.html, I am wondering how to effectively combine t ...

javascripthtmljssor

"Having issues with Django not properly applying the JavaScript and CSS files I've linked in

I have completed my project and organized all the necessary files, including index.html, css, js, and settings.py within the appropriate folders. I am encountering an issue with applying a pen from the following source: CodePen index.html <!DOCTYPE h ...

javascriptpythonhtmlcssdjango

When encountering a 404 redirect, CSS and JS files may fail to display

I created a unique error message using .htaccess, incorporating CSS and JS in separate folders. Although it functions properly when accessed directly, integrating these resources into the 404 Error message results in only the HTML text being displayed with ...

javascripthtmlcssapache.htaccess

Creating a legitimate svg element using javascript

While working with SVG, I had an issue where I added a <rect> element directly into the svg using html, and then created a new element (without namespace) <circle> with javascript. However, the <circle> element did not display in the svg ...

javascripthtmlsvgconstructorconsole

Unique design and elements featuring the `width: auto` property for custom fonts

In my current project, I am utilizing the popular 'Open Sans' font family. However, I am encountering a specific issue. The problem arises with buttons and other elements that have width: auto. Upon page load, these elements initially have their ...

csswebfonts

The Bootstrap 4 Toggler Dropdown lacks a background color

Struggling to style the toggle dropdown on smaller screens to match the regular navbar background? Can't seem to figure out how to target it. Is there a missing bootstrap class or an error in the code? Initially suspected the border might be causing i ...

htmlcssbootstrap-4

After refreshing, the base href in the environment is characterized as undefined

Within my angularjs application, I have configured the env.js file as shown below: (function (window) { window.__env = window.__env || {}; // API url window.__env.apiUrl = 'http://aaaaaaa.com/'; // Base url window.__env.baseUrl = '/angula ...

htmlangularjs

Tips on activating the CSS style while typing using the onChange event in React

Is it possible to dynamically adjust the width of an input as we type in React? Currently, my input has a default width of 1ch. I would like it to increase or decrease based on the number of characters entered, so that the percentage sign stays at the end ...

javascriptcssreactjs

What is the best way to use SQL and Flask to automatically fill out a form based on a selection made from a

Looking for assistance with populating an HTML form by selecting a company from a dropdown menu. The desired result is similar to the example found here, using SQL and Flask. I'm unsure of how to retrieve the selected value from the <option> ta ...

pythonhtmlflaskjinja2

Carousel issue with sliding on Bootstrap when deployed on various web servers

I am experiencing a strange issue with my website. I have it installed on two different servers, and while the Carousel works perfectly fine on the first server, it does not slide properly on the second server. Here are the links to each version of the we ...

htmltwitter-bootstrap

Prevent user input in HTML

Currently, I am working on creating the 8 puzzle box game using JavaScript and jQuery Mobile. The boxes have been set up with <input readonly></input> tags and placed within a 9x9 table. However, an issue arises when attempting to move a box ...

javascriptjqueryhtmlinputdisabled-input

The fullCalendar plugin fails to display properly when placed within a tab created using Bootstrap

My current challenge involves integrating fullCalendar into a Bootstrap tab. It works perfectly when placed in the active tab (usually the first tab), however, when I move it to another tab that is not active, the calendar renders incorrectly upon page loa ...

javascripthtmljqueryfullcalendarbootstrap-5

Transform the styles from a React component into Cascading Style Sheets

I have been tasked with transitioning all the styles from the JavaScript file to the CSS file while ensuring the design remains intact. I am facing an issue where using the CSS styles breaks the search field design. The original design can be seen here: S ...

javascriptcssreactjs

Cannot close the Bootstrap dropdown after selecting an option

I am encountering an issue with a dropdown list that has a select feature using Bootstrap 3.4.1. The problem is that the dropdown remains open after selection and does not close unless I click outside of the list. Here is the HTML code: <div id="c ...

javascriptcss

Employing AJAX to extract data from SQL database and display it in a tabular format

I am working on creating a 2x2 table with labels in the first row and information from an SQL table in the second row. The goal is to display the Name of the business on the left and relevant information on the right. Each name will be clickable, triggerin ...

phphtmlmysqlajax