What steps should I take to ensure that my Material Design Icon Fonts are appearing correctly on the screen?

I can't seem to get my icons to display properly.

I have included the path like this:

<link href="material/vendors/material-icons/material-design-iconic-font.min.css" rel="stylesheet">

This is what I currently see:

But this is what I want to achieve:

Here's everything in my folder:

Can someone please help me figure out what I did wrong here?

Update

HTML

<ul class="main-menu">
    <li class="active"><a href="/"><i class="md md-home"></i> Home</a></li>
    <li><a href="/web-directory"><i class="md md-format-underline"></i> Web Directory </a></li>
</ul>
htmlcssiconsmaterial-design

Answer №1

Your CSS file link may be incorrect.

Consider using the full URL to your CSS file:

<link href="www.yoursite.com/custom/vendors/material-icons/material-design-iconic-font.min.css" rel="stylesheet">

Be sure to verify that the URL is accurate by checking it in a browser.

Additionally, make sure to verify the font version you are using, as there have been changes in CSS class names since version 2.0 was released.

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

The Fade In effect in jQuery causes my fixed header to overlap with images on the page

This is the javascript snippet using jquery <script type="text/javascript> $(document).ready(function () { $('#showhidetarget').hide(); $('a#showhidetrigger').click(function () { $('#showhidetarget&apo ...

jquerycssfixedstickyoverlapping

Incorporating a delete button onto an image using JavaScript

I am currently developing a BlogApp and facing difficulty in attempting to include a button on an image. The image is being retrieved from the Django database in JavaScript (HTML). My goal is to have a clickable button overlaid on the image. views.py def ...

javascriptpythonhtmldjangodjango-views

Retrieve outcome from successful AJAX post and update HTML using globalEval

I have a function in JQuery that asynchronously posts data function post_data_async_globalEval(post_url, post_data, globaleval) { $.ajax({ type: 'POST', url: post_url, data: post_data, dataType: 'html', async: true, ...

javascriptjqueryhtmlajax

Scroll to the end of the main div's horizontal position instead of using offset().left

I'm struggling with an issue in my code. <script type="text/javascript"> $(function() { $('ul.nav a').bind('click',function(event){ var $anchor = $(this); /* ...

javascriptjqueryhtmlcssoffset

Non-clickable links in a CSS menu

I managed to create a dropdown menu without relying on any JavaScript, but I'm encountering some issues with its functionality in Firefox and IE 10. This is how it appears: Both Link1 and Link2 are clickable links. In Chrome, clicking on them works s ...

htmlcssfirefoxinternet-explorer-10

Tips on transmitting form information from client-side JavaScript to server-side JavaScript with Node.js

Having created an HTML page with a form, my goal is to capture user input and store it in a JSON file. However, I've run into some confusion... In the process, I utilized the express module to set up a server. My mind is juggling concepts such as AJA ...

javascripthtmljsonnode.jsajax

Aligning text at the center of the page, stacked on top of each other

I am struggling with creating a responsive main page for a website. I am new to this and feeling lost on how to proceed. My goal is to stack text on top of each other in a readable way while also ensuring it looks good on mobile devices. However, my curren ...

htmlcsstwitter-bootstrap

issue with visibility of Angular Component

After following a straightforward YouTube tutorial for beginners on Angular, I encountered an issue. The tutorial covers how to use components, and even though I understand the concept well, the component simply does not appear no matter what I try. Here i ...

htmlangulartypescriptweb

Delving into the concept of the last-child element

Looking for assistance with selecting the final EC_MyICHP_Item from an HTML structure: <div class="decorator"> <div class="EC_MyICHP_Item"> <div class="text"> <h3><a target="_blank" title="" href="#">& ...

cssjquery-selectorscss-selectors

What is the best way to align the text in the center without centering the numbers in an HTML ordered list?

I am currently working on a small widget for a webpage that displays steps in reverse order. My plan is to use an ol element and adjust the value attribute on each li tag to make the numbering of the ordered list reversed. Everything seems to be going smoo ...

htmlcss

Is there a way to eliminate browser-saved password suggestions using Material UI textfields?

"Is there a way to prevent browser suggestions in a Textfield within a form tag so that users must manually type their password without autocomplete options?" https://i.sstatic.net/Mub57.png "I attempted to use the 'autocomplete=" ...

cssreactjsbrowsermaterial-ui

Adding a text field on top of a div based on the dropdown value selection

I am working with a dropdown option inside a div. I want to make it so that when the last option is selected, a text box will appear on top of the dropdown. And when a different option is selected, the text box should be disabled. How can I achieve this? ...

javascriptjqueryhtmlcsstwitter-bootstrap-3

I need to style a blockquote so that it floats to the right, but I also want it to be

I want to enhance the appearance of my blockquotes by giving them a different color background and ensuring they stand out from the regular text. Although using float:right helps achieve this effect, I prefer not to force the blockquote to the right side o ...

csscss-floathtml

Scroll the div back to the top when the form is submitted

I have set up a form in a pop-up using Bootstrap modal. The form is quite long, so after submission, the message appears at the top of the form. However, I want it to scroll to the top when the user submits the form so they can easily see the message. Is ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the most effective way to obtain a customer's latitude and location by prompting them to drop a pin on Google Maps?

My Android app has an API, but on my website I'm wondering how I can retrieve a person's location by having them place a marker on a Google Map. Is there a standard method for this? I need to obtain the latitude and longitude coordinates and send ...

javascriptjqueryhtmlgoogle-mapsgoogle-maps-api-3

Using require to access an Immediately Invoked Function Expression variable from another file in Node.js

File 1 - Monitor.js var MONITOR = (function () { // Code for Monitoring return { doThing: function() { doThing(); } }; })(); File 2 - Test.js var monitor = require('../public/js/monitor.js'); I am trying to access the doThing() funct ...

javascripthtmlnode.jsnode-modules

What is the most dependable method for referencing a CSS class through programming?

Within my Sharepoint project, I am dynamically generating controls in the overridden CreateChildControls() method. I am uncertain which approach is more preferable when it comes to referencing the .css file: protected override void CreateChildControls() { ...

htmlcsssharepoint-2010createchildcontrols

What is the best way to incorporate progressive JPEG images onto a website?

I am currently working on a website called winni.in that is built using Java, Html, and Javascript. I would like to incorporate progressive image rendering upon page load, but I lack the necessary knowledge. I have come across and explored the following re ...

javascriptjqueryhtmlcssjpeg

Problems with scrolling in Firefox when using Three.JS

Is anyone else experiencing issues with three.js? I have a simple demo of a spinning cube with varying rotational velocity using arrow keys, mouse, or touch input. Everything works perfectly in Chrome, but the textures are spliced and not mapped correctly ...

javascripthtml3dthree.js

Migrating from PHP/MySQL to PDO: A Smooth Transition

I am a beginner in PHP/MySQL and I have some queries. I was watching a YouTube tutorial on creating a basic dynamic website that retrieves data from a MySQL database and displays it on a single PHP index page. I followed the tutorial up to the point wher ...

phpmysqlcsspdocontent-management-system