The static files for the icon CSS (404 Error) from Flaticon and Font-mfizz are failing to load properly

When I was designing a website, I needed an icon of Python, so I turned to Flaticon and found what I was looking for.

This snippet shows the HTML code I used:

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <link href="{% static "css/flaticon.css" %}" rel="stylesheet" type="text/css">
    <link href="{% static "css/font-awesome.css" %}" rel="stylesheet" type="text/css">
    <link href="{% static "css/font-mfizz.css" %}" rel="stylesheet" type="text/css">

    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<i class="icon-python" style="font-family: Flaticon, serif"></i>
<i class="icon-python"></i>
<i class="fa-gamepad"></i>
</body>
</html>

To double-check the rendering of this specific icon, I created a separate HTML document just for that purpose.

Here's the error message from the browser console when running the Django server locally on Opera:

GET net::ERR_ABORTED

GET net::ERR_ABORTED

As a result, only the Font-Awesome icon is displayed on the page since there were errors loading Flaticon and Font-mfizz fonts.

The issue seems to be related to the python code within the Flaticon.css file:

/*
  Flaticon icon font: Flaticon
  Creation date: 17/03/2018 04:22
  */

@font-face {
  font-family: "Flaticon";
  src: url("./Flaticon.eot");
  src: url("./Flaticon.eot?#iefix") format("embedded-opentype"),
       url("./Flaticon.woff") format("woff"),
       url("./Flaticon.ttf") format("truetype"),
       url("./Flaticon.svg#Flaticon") format("svg");
  font-weight: normal;
  font-style: normal;
}

@media screen and (-webkit-min-device-pixel-ratio:0) {
  @font-face {
    font-family: "Flaticon";
    src: url("./Flaticon.svg#Flaticon") format("svg");
  }
}

[class^="flaticon-"]:before, [class*=" flaticon-"]:before,
[class^="flaticon-"]:after, [class*=" flaticon-"]:after {
    font-family: Flaticon, serif;
        font-size: 20px;
font-style: normal;
margin-left: 20px;
}

.flaticon-smart-house:before { content: "\f100"; }
.flaticon-air-conditioner:before { content: "\f101"; }

In addition, PyCharm while running Django also encountered URL errors specifically with Flaticon and Font-mfizz compared to Font-Awesome:

https://i.sstatic.net/yb2Id.png

javascripthtmlcssdjangoweb

Answer №1

Make sure to properly format your static files as shown below, ensuring that the single or double quotes are correctly nested to prevent any confusion.

<link href="{% static 'css/flaticon.css' %}" rel="stylesheet" type="text/css">
<link href="{% static 'css/font-awesome.css' %}" rel="stylesheet" type="text/css">
<link href="{% static 'css/font-mfizz.css' %}" rel="stylesheet" type="text/css">

When referencing these css files, it is important to accurately reflect the directory structure.

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 returned error object from express does not include the error message

I recently posted a question related to an error issue. I am now wondering if I should have edited that question instead. Regarding the code snippet below: app.use((err, req, res, next) => { res.status(err.status || 500); res.json({ message: e ...

javascriptnode.jsexpressecmascript-6

Guide on how to showcase the template by leveraging the roomList information with ngTemplateOutlet in Angular

TS roomList = [{ name: 'Room2' }] HTML <div class="Layout-body"> <ng-container *ngFor="let dt of roomList; index as i" [ngTemplateOutlet]="Room1" [ngTemplateOutletContext]="{ data: dt, i: i }&qu ...

javascriptangulartypescript

Feature of Thymeleaf: Download functionality

When working with my Thymeleaf template, I have successfully processed Java map content to HTML using the following code: <div th:each="file : ${files}"> <span th:text="${file.key}"></span> <!-- here file.key is retrieved --> ...

javahtmlthymeleaf

Retrieve the function-level variable within the while loop's else statement

Struggling with node.js, I find myself facing the challenge of accessing a variable declared at the start of a function from an else statement nested within a do while loop: function myFunction(){ var limit = 2000; var count; var total; va ...

javascriptnode.js

What is the reason for create-react-app initializing twice?

After creating a react app using the command npx create-react-app, I encountered an issue: import React from 'react'; class Costly { constructor() { console.log('creating costly class'); } } function App() { const costlyRef ...

javascriptreactjsreact-hooks

Encountered an Unpredictable SyntaxError: Is this a Cross-Domain Problem?

I have been attempting to connect with the Indian Railway API using Ajax in order to retrieve data in JSON format. Below is the code I am using: <!DOCTYPE> <html> <head> <meta charset="UTF-8"> <script src="https://ajax.googleap ...

javascriptjqueryajaxjson

Error TS2322: Type 'boolean' cannot be assigned to type 'undefined'. What is the best approach for dynamically assigning optional properties?

I am currently working on defining an interface named ParsedArguments to assign properties to an object, and here is what it looks like: import {Rules} from "../Rules/types/Rules"; export interface ParsedArguments { //other props //... ...

javascripttypescripttypechecking

Using Vue: Triggering .focus() on a button click

My journey with vue.js programming started just yesterday, and I'm facing a challenge in setting the focus on a textbox without using the conventional JavaScript method of document.getElementById('myTextBox').focus(). The scenario is that i ...

javascriptvue.jsvuejs2setfocus

Tips for simulating an axios request that returns an image buffer

I am attempting to simulate an axios api call that returns an image buffer as shown below: <Buffer ff d8 ff e0 00 10 4a 46 49 46 00 01 01 00 00 01 00 01 00 00 ff e1 00 de 45 78 69 66 00 00 49 49 2a 00 08 00 00 00 06 00 12 01 03 00 01 00 00 00 01 00 ... ...

javascriptunit-testingjestjs

Dealing with a Jquery/Javascript Dilemma

As a beginner in query/javascript, I am encountering an issue with the code below when trying to calculate gross value and tax amount based on the net amount entered by the user. The input is expected to be a double amount, with gross and VAT amounts defin ...

javascriptjquery

Tips for scaling an image to perfectly fit the browser screen

I have spent a significant amount of time researching and coding, but I am still unable to get this seemingly trivial task to work. Here are the conditions: The browser window size is unknown, so any solution involving absolute pixel sizes will not work. ...

htmlcss

What is the best way to halt execution in Express.js following an error caught from an Await request?

While searching for a solution, I come across many posts that almost provide the answer I need, but nothing seems to quite work in my case. I have a function that uses asynchronous operations: const doStuff = async (data)=>{ if(data == "a bug& ...

javascriptnode.jsexpressasync-await

Solving the Challenge of URL Issue in Ajax Call to MVC Controller

I have searched extensively for a solution to my jQuery/MVC problem, but haven't found one that works. Here is the JavaScript code I am using: $.ajax({ type: "POST", url: '@Url.Action("Search","Controller")& ...

javascriptjqueryajaxasp.net-mvc-3

Font compatibility issue in email template on mobile devices

When I send out my email template, Agency FB font displays correctly in the desktop view, but reverts back to PT-sans in device view. I've ensured that the font family is set to Agency FB and included the URL link. My emails are sent using MailChimp. ...

htmlcssfontsmailchimpemail-templates

There is no need for updates as git is already current for some mysterious reason

As a newcomer to git, I've been trying to wrap my head around it but still struggling. Can someone help clarify this for me? My question pertains to the 'master' branch in git which contains the following code: const list = [ 'h&ap ...

javascripthtmlgitgithubconsole.log

A PHP string containing hashtags without spaces will not be parsed into individual hashtags

I have a challenge where I want to extract individual hashtags from a string that contains hashtags. Currently, I am utilizing the following code: preg_match_all('/#([^\s]+)/', $str, $matches); #test #test #test #example The code functio ...

phphtmlstringhashtag

Obtaining information from AngularJS callback function in loopback: A comprehensive guide

I am trying to figure out how to retrieve the "good" array from an angular function. Here is the function I have in my Angular code: app.run(function($rootScope,Communications,$http,$filter) { $rootScope.getCommunication = function(object_type ...

javascriptangularjsloopbackjs

Ensure that the Materialize CSS modal form remains open even after submission

Is there a way to reload a form inside a materialize modal with empty fields without closing the modal after submitting? The issue is that currently, when the submit button is clicked, the modal closes and redirects. <div class="modal" id="docM ...

cssajaxsymfonymodal-dialogmaterialize

Show the template when the link is clicked using Angular directive

Perhaps the question is not phrased properly, but here is the idea I am working on. I have a navbar set up with an array of countries that includes their names and coordinates. <body> <nav class="navbar navbar-default"> <div cl ...

javascriptangularjs

Issues with babel plugin-proposal-decorators failing to meet expectations

I recently included these two devDependencies in my package.json: "@babel/plugin-proposal-class-properties": "^7.1.0", "@babel/plugin-proposal-decorators": "^7.1.6", In the configuration file .babelrc, I have listed them as plugins: { "presets": ["m ...

javascriptreactjsreact-nativebabeljs