How come the Fontawesome icon isn't appearing on the page?

Currently, I am tackling a project for school that involves incorporating fontawesome-icons. Unfortunately, regardless of the icon selected, none of them seem to appear. Strangely enough, when I tested it in an empty HTML file with just a blank page, the icons worked perfectly. Could someone shed some light on why these icons are not displaying as shown in the image below? Your help is greatly appreciated!

Here is the code for my website

...    
<head>
      <script src="https://kit.fontawesome.com/505871b650.js" crossorigin="anonymous"></script>
</head>
...
htmlcssangulariconsfont-awesome

Answer №1

To simplify things, just insert the following code snippet into your <head> tag:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" crossorigin="anonymous">

No need for the <script> tag when integrating fontawesome, refer to this documentation for more details.

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

Top method for referencing HTML layout across various pages

Is there an optimal method for consistently calling an HTML structure from various pages? In my webapp, I have the same type of structure that needs to be called from different pages. For instance, I have a media management page displaying uploaded media ...

javascripthtmlfunctionstructureinstance

Organize and conceal identical columns in an Angular 4+ table

My goal is to organize the table by both name and first name. If there are any duplicate entries, I plan to keep just one line visible while adding an accordion feature to display the duplicates in a collapsed manner. Included below is the TS and HTML ...

html

What could be causing the image not to appear on the React app?

I'm currently working on a react website, and I'm facing an issue with the image display on the single product page. Despite trying to tweak both the react and CSS code, I haven't been able to resolve the problem. Below is my react file: im ...

htmlcssreactjsimagemern

"Enhance Your Video Experience with a Custom

Currently, I am working on designing a front-page that features a YouTube video as the background with a fixed transparent navigation. Although I have successfully implemented both elements, I am struggling to make sure the video background starts at the t ...

cssvideobackgroundyoutube

Unable to generate css, html... files using eclipse

Currently, I am in the process of working on a spring project and looking to incorporate CSS into my views. However, the CSS files are being generated as Java source files within the webapp folder. This has caused auto-completion to be non-existent and the ...

cssspringeclipsespring-mvc

Modify SQL table to alter the timestamp value

I am currently utilizing PHP to showcase an SQL table. Once a user selects a row on the table and clicks a button, I aim for it to update the timestamp to the present time and reflect on the displayed table within the webpage. The SQL query that I have wor ...

javascriptphpjqueryhtmlmysql

What's the best way to prevent extra spacing when typing in a materialUI TextField?

Instructions for the user: Please input your first name without any spaces between characters. I attempted to implement the following code, however, it did not achieve the desired outcome. <TextField required id="name" label="First Name" ...

javascripthtmlreactjsmaterial-ui

Cursor or caret bleeding through overlay on Internet Explorer

Currently, I am working on a pre-existing website called www.shopthethirdfloor.com. When using Internet Explorer, if you navigate to the products menu, select the search box, and then scroll down so that the search field goes underneath the menu overlay ...

htmlcssinternet-explorer

Ways to configure a select-multiple element to send data as an array

I am experiencing an issue with a form I have set up. Here is the current code: <form method="post" action="action.php"> <select id='select' multiple='multiple'> <option value="1"> Option1 <option> ...

phphtmlformsselect

What is the best way to display HTML form data using JavaScript?

I've come across a bit of a roadblock. How can I use my current JavaScript to display the results from the form field with the class "household" when the user clicks "add"? *I still want to maintain the remove functionality. I am unable to edit the ...

javascriptjqueryhtmlforms

Angular 2's Stylish Modal Boxes

I've been trying to integrate the fancybox package into my Angular 2 application. I installed it using npm and carefully went through the documentation. However, I encountered an issue where fancybox is not working as expected. Initially, I suspected ...

angularfancybox

Spread out the CSS grid dimensions to the descendants for the vuetify v-card image

I'm facing an issue with arranging vuetify cards with images in a CSS grid. The problem is that the grid size is not being recognized by the v-card's v-img because it's a grandchild element. How can I pass down the grid size to the v-img? M ...

cssvuetify.jscss-grid

The css property of *ngContainerOutlet is ineffective when applied to an ng-component with encapsulation

When I utilize *ngContainerOutlet to dynamically insert components, it wraps the component's template within an ng-component tag which causes my CSS styles to become ineffective. For example: <div class="my-class"> <ng-container *ngComp ...

cssangularcomponents

Properly Aligning the Header: A Step-by-Step

I have created an adminHeader.php file with the following content: <div class="main_content"> <div style="width: 100%"> <div class="header" style="align-items: center;font-size: 17px;"& ...

html

Having trouble configuring AJAX and PHP to work together

Here's the situation I'm dealing with: I have HTML, JS, and PHP files. In the PHP file, there is an associative array containing default values to populate form elements in the HTML file. I'm trying to use AJAX to retrieve data from the PHP ...

javascriptphpjqueryhtmlajax

Replace HTML elements with AJAX and JavaScript

Working with MySQL data in pyramid presents a challenge as I need to dynamically change an HTML if statement based on the results from JS ajax calls. The main page receives data from views.py and passes it to the .mak script. The key views here are the ma ...

javascriptpythonhtmlajax

verifying the status of a checkbox with PHP (Terms and Conditions)

Struggling to figure out how to get the state of a checkbox using PHP. Spent hours searching on Google for solutions, but nothing seems to be working... The logic I need is to display an error message if the checkbox is not checked. Tried various methods ...

phphtmlcheckboxlogic

Is there a way to choose columns 2 to 6 of the row that is currently selected

I am looking to create a hover effect for columns 1 through 7 of a row where, when the user hovers over any column within that range, certain styles are applied to all columns in the row except for columns 1 and 7. This means that the background color shou ...

css

Obtaining the location data of the mouse cursor following its movement

Exploring the movement of the mouse cursor, there was a noticeable change in its position after it moved. To retrieve the current location of the mouse post-movement, especially when it's situated within the scrollbar area, certain measures need to be ...

javascriptphphtmlmouseeventmouse

Ensure that the div remains fixed at the bottom even when multiple items are added

Following up on the previous question posted here: Sorting divs alphabetically in its own parent (due to many lists) I have successfully sorted the lists alphabetically, but now I need to ensure that a specific div with a green background (class: last) al ...

javascripthtmljquery