The Font Awesome icons are failing to load properly and are displaying as square boxes in HTML

After cloning the website from HTTRACTs, I noticed a problem with the icons such as Facebook and Instagram appearing as squares on the entire pages. Upon inspecting the elements, I found that the error log was showing

Failed to load resource: net::ERR_FILE_NOT_FOUND
, even though the files are present and the paths are correct. I also tried importing the code from:

@import url("");

However, this solution did not work either. Can someone please assist me with this issue?

Here are the error messages I am receiving.

Answer №1

The original site doesn't rely on a CDN for font-awesome, but rather includes it in a package.

It requests for files .woff and .ttf, which can be added using the following solution.

Download the font-awesome zip file (free for web) from font-awesome.

https://fontawesome.com/download

After extracting the zip file, you'll find numerous files. Look for a folder named webfonts and a file named all.min.css or all.css.

Link the all.min.css or all.css file to your HTML document and place the folder in the same directory as the all.min.css or all.css file. See below for a sample folder structure.

SAMPLE FOLDER STRUCTURE

assets
   |-- css
   |    | -- all.min.css
   |-- webfonts

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

Incorporate gulp-clean-css into the current gulpfile.js

I was recently provided with a gulpfile.js file by a colleague, which contains the code below. It keeps an eye on my scss files and compiles them when I save. var gulp = require('gulp'), gutil = require('gulp-util'), browser ...

Tips for accessing the names of subdirectories and files on a website

If we have the URL, is it possible to access the names of the files within the parent directory? Similar to how we can do in DOS by using the command "DIR" to view the list of files inside a folder. For example, if we have a URL like , I am curious to kno ...

Working with Facebook Graph API data using javascript

I am attempting to parse output results from the Facebook Graph API (specifically comments on a website). Below is the script I am using: if (document.getElementById('comments')) { var url = "https://graph.facebook.com/fql?q=select+xid%2C ...

Add the text into a div element with a dropdown selection

I'm having trouble with the code below. My goal is to move the selected text to my chosen-locations div. Any suggestions? Thank you! <select name='available_locations' class='select-location'> <option value=&a ...

What is the process of transforming this jQuery script into AngularJS code?

Currently I am facing a situation where I am utilizing Angular1.x for a project. On a specific subpage, there are small clickable images along with some additional content below these images. The requirement is that only the images should be visible init ...

"Learn how to extract the image URL from the configuration file (config.json) within the assets folder, and then seamlessly display it within

In my Angular project, I have a configuration file located in the assets folder: { "brandConfig": "brand1", "brand1": {"urlPath": "http://192.168.168.60:8081/mantle-services", " ...

What is the best way to format MarkDown content within a nextJs environment?

Markdown-it is successfully converting markdown to html in my Nextjs project. However, I am facing a styling issue with specific elements such as h2, h3, ul, and li. Here's the code snippet: <h1 className="text-3xl mb-3 leading-snug d ...

Html elements remain stationary and do not shift positions

I am attempting to customize a web page by repositioning an input text element. Below is the code I'm using: <body> <h1>Shopping List</h1> <input id="search" type="search"> <input id='newItem' type="t ...

How to align a Bootstrap form to the center

Struggling to center the opt-in form on my website, I've created a "center" class with margin properties but it's not working as expected. .center { margin-left: auto; margin-right: auto; width: 100% } I suspect that one of Bootstrap's cla ...

styling the search input element in webkit with right-to-left text direction

I have included a search input in my code like this: <input type="search" placeholder="search" /> Webkit has different styles for an input field with the type 'search'. One of these styles is displaying a cancel ('x') button on ...

The ajax method for loading an xml file results in displaying the undefined message

When attempting to fetch content from an xml file using ajax, the page initially displays "undefined". However, upon refreshing the page, the content loads successfully. Take a look at my code snippet below: $.ajax({ type: "GET", url: "xm ...

What is the best method for fetching the values of a select element in React.js?

I'm struggling to retrieve the value of a selected element in a dropdown list. I've tried debugging it, but haven't been able to get the value. I attempted to console log e.target.value, but unfortunately, it didn't work. Any thoughts o ...

Troubleshooting problem with the responsive dropdown menu in Bootstrap for mobile

I'm in need of some assistance with the mobile menu on my website. Whenever the STORE menu is clicked on the mobile version, it doesn't expand as expected, instead, it closes the general menu. Here is the link to the webpage. Any help would be gr ...

Is it possible to perform a CSS flip animation without delay?

Trying to implement David Walsh's CSS flip effect for an image that should change to another without requiring a mouseover. Is there a way to trigger it automatically, maybe in 3 seconds? I'm new to this so any help would be greatly appreciated! ...

Angular CLI is not displaying CSS

I am currently using angular cli version 1.4.3, node version 6.11.3, and npm version 5.4.2. My goal is to retrieve records using angular2 and display them on localhost. I expected the output to look like this: https://i.sstatic.net/S8TVI.jpg however, the ...

How can I make an HTML button function with a JavaScript script?

When I click a button in an HTML file, it should trigger a function in a JavaScript file to display an alert that says "hey." However, this simple task is not working for me and I am unsure why. Java Script is enabled in my browser (Google Chrome) and I am ...

Glitch in jQuery causing multiple instances of text being added to a textarea consecut

I created a response system where users can reply to comments by clicking on the reply button. Once clicked, it triggers a function that adds @user at the beginning of their comment: $('#inputField').focus(); $('#inputField').text(&apo ...

Controling attributes during the design process

Experimenting with a basic User Control in Visual Studio 2008: I've created a Panel called Wrapper with various controls inside. Will Visual Studio be able to handle this during the design phase? public partial class TestControl : System.Web.UI.UserC ...

Sending two arrays of different sizes in MySQL with only one row

<?php $str = implode(',',$name); function trim_value(&$value) { $value = trim($value); $Array = explode(',', $str); array_walk($myArray, 'trim_value'); for($x=0; $x< ...

RMarkdown Question: Is there a straightforward method to insert additional space following each tabset?

When creating reports using R Markdown, I implement tabsets (.{tabset}) to display multiple results without stacking them one after the other. For example: # First session {.tabset} ## A First result ## B Second result # Next session Howev ...