Having trouble getting Material Icons to work as markers or before elements for li elements in CSS

I am currently incorporating Google's Material Icons into my project.

The font is being linked like so :

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded&display=block:opsz,wght,FILL,<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="682f3a292c285a5846465c50">[email protected]</a>,100..700,0..1,-50..200" />

followed by a css class :

.material-symbols-rounded {
    font-variation-settings:
    'FILL' var(--fill-icons),
    'wght' 300,
    'GRAD' 200
}

I have a set of list items (li elements) and I want to alter the default list-style-type, replacing the bullet point with a Material Icon such as folder (with codepoint : e2c7).

My current CSS for this task looks like this:

li::marker {
    font-family: 'Material Icons Rounded';
    content: "\e2c7";
    color: white;
    display: inline-block;
    margin-right: 6px;
}

I also attempted using the ::before pseudo-element and experimenting with ligatures instead of codepoints.

However, the result I'm getting is different from what I expected, as shown in these comparisons: https://i.sstatic.net/v8BoE.png vs https://i.sstatic.net/7oMEs.png

What might be causing this discrepancy and how can I adjust my code to achieve the desired outcome?

Operating on Chrome version 114

cssgoogle-material-icons

Answer №1

It appears that the issue lies in a simple miswriting on your part. Instead of using 'Material Icons Rounded' as the font-family, it should actually be 'Material Symbols Rounded'.

Answer №2

To correctly display the font, simply follow these instructions:

li::marker {
    font-family: 'Custom Font Name';
    content: "\e123";
}
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Custom+Font+Name&display=block:opsz,wght,FILL,<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9c8b98bfbab5bdbdc3d3dbdf">[email protected]</a>,100..700,0..1,-50..200" />

<ul>
  <li></li>
</ul>

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

Tips for positioning a div element within the body of a webpage to maintain a predetermined height and width

Currently, I am developing a single-page application using AngularJS. I have specific routes in mind where I want to introduce new HTML templates. To accomplish this, I have created a container labeled with the ID #main positioned between two navbars (he ...

javascriptjqueryhtmlcssangularjs

The JavaScript-rendered HTML button is unresponsive

I have a JavaScript function that controls the display of a popup window based on its visibility. The function used to work perfectly, with the close button effectively hiding the window when clicked. However, after making some changes to the code, the clo ...

javascripthtmlcssbutton

Attempting to attach a particular image, but it consistently ends up linking to different images instead

I am having an issue with linking an image in my footer. Every time I link one image, the link seems to affect all the other widgets in the footer. Is there a way to prevent this from happening? Visit my website Below is the code I used to create a clic ...

htmlcsswordpresshyperlink

JQuery animations not functioning as expected

I've been attempting to create a functionality where list items can scroll up and down upon clicking a link. Unfortunately, I haven't been able to achieve the desired outcome. UPDATE: Included a JSFiddle jQuery Code: $(document).ready(function ...

javascriptjquerycss

Prevent accordion expansion triggered by the More button click

When the More button is clicked, it should NOT expand and collapse. https://i.sstatic.net/toV1b.gif If the accordion initial state is open, it must stay open even if button is clicked, if initial state is collapsed then after the more button the accordio ...

javascripthtmljquerycssbootstrap-5

The evaluation of jQuery did not function properly on the less.css file

I have a jQuery function that I am using as shown below @winheight:`$(window).height()` within my less file. However, when I compile it to CSS, I encounter a compiler error I am currently using a software called Crunch Compiler Errors You are usin ...

javascriptjquerycssless

Seeking guidance on creating an uncomplicated CSS tooltip

Can anyone help me troubleshoot why my CSS tooltip isn't working correctly? I've been trying to create a simple method for tooltips, but they are displaying inconsistently across different browsers. In Firefox, the tooltips appear in random locat ...

csstooltip

Start flicker issue in Vue 3 transition

I have created a carousel of divs that slide in and out of view on the screen. However, I am facing an issue where during the start of each transition, when a new div is rendered (i.e., the value of carousel_2 changes), it appears without the transition-en ...

javascriptcssvue.jstransitionvuejs3

Aligning text of different sizes vertically in CSS

Struggling with a text line that contains multiple font sizes? Want all the text to align with the middle of the .line1 element? I tried using vertical-align:middle, but it's not working as expected. Check out the code on JSfiddle: http://jsfiddle.net ...

htmlcss

Applying a CSS class to a jeditable input field

Is there a way to apply a simple class tag to a jeditable input field? The developer's instructions on their website () suggest using the following code snippet under "How to style elements?": $('.editable').editable('http://www.exampl ...

cssjeditable

I attempted to apply vertical-align and color properties to the static_nav div, but they didn't have any effect. Could this be due to its placement within the header? What steps should I take to resolve this issue?

<!DOCTYPE HTML> <html lang ="en"> <meta charset = "utf-8" /> <head> <title>Sample Page</title> <link rel="stylesheet" type="text/css" href="Web_Design_01_Stylesheet.css" /> </head> <body> &l ...

htmlcssvertical-alignment

What is the method to rotate an SVG icon contained within a button when clicked?

I'm attempting to incorporate a CSS animation into an SVG that is enclosed within a button. Example <button class="spin"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" ari ...

javascripthtmlcsscss-animations

What could be causing the issue with the width: 100% not rendering correctly in this

I'm currently working on my footer, but I'm having trouble getting the width: 100% tag to work correctly. Here's a screenshot of what I mean: http://gyazo.com/9c23897cd7b9a74ca55ee9fb977f810c This is my CSS code: /*..Portfolio - Lars Beut ...

htmlcss

display a loading spinner for number input fields in HTML5

In my HTML5 project, I am currently utilizing a numeric control (input type="number"). The default behavior displays the spinner (up and down arrows) only on hover. Is there a way to make the spinner permanently visible using CSS or another method? ...

csshtml

What benefits does importing bootstrap.scss into styles.scss provide compared to adding it directly to the styles block in .angular.cli.json?

What are the advantages of importing bootstrap.scss into the styles.scss file compared to adding it to the .angular-cli.json styles block? Which approach is better and why? styles.scss @import '~bootstrap/scss/bootstrap.scss'; vs .angular-cl ...

cssangularwebpacksassangular-cli

Angular PrimeNg carousel with personalized previous and next buttons

The information is provided in the image attached, with all CSS code available on stackblitz. I am looking to customize the Next and Prev buttons by having their borders match the inside boxes and be rounded. This will indicate to the user that there is a ...

htmlcssangularcarouselprimeng

Looking for assistance in designing a responsive web page with CSS, specifically in determining the optimal page width

Currently, I am working on making my web page responsive for four different screen sizes (320px, 640px, 980px, and 1024px). Everything looks great and adapts well when I resize the site up to 1024px. However, once the size goes beyond that, I want to preve ...

htmlcssresponsive-designviewport

Personalize the position of the v-select drop-down menu

I am currently working with the vuetify v-select component. The problem I am encountering is that instead of the dropdown opening downwards, I need it to open upwards since the dropdown is positioned at the bottom of the page which causes some of the dro ...

cssvue.jsvuetify.js

Incorporate a map (using leafletjs or Google Maps) as a subtle backdrop

I am currently working on a one-page website and I would like to include a map as a background behind the "contact" section. The map can be set to float, draggable, or positioned at the back. I have experience using both the Google Maps API and LeafletJS, ...

javascripthtmlcssgoogle-mapsleaflet

What strategies can be used to accurately position a rotated image within a rotated div?

Below is the code snippet I am using: <div class="container"> <img class="img"/> <div class="underlay"></div> </div> The image is a picture of some rotated text by 10 degrees, although the ...

htmlcss