I'm facing an issue where the Font Awesome icons are not appearing in my code

I'm seeking assistance with my code as I develop a website and have encountered a roadblock at the very beginning.

Despite following a tutorial, I expect two icons to be displayed in the window but instead, all I see is a blank white screen.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Eventors | Events</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link href="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d0b1bfa390e2fee3fee1">[email protected]</a>/dist/aos.css" rel="stylesheet">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <div class="container">
            <div class="hamburger-menu">
                <i class="fas fa-bars toggle"></i>
                <i class="fas fa-times toggle"></i>
            </div> 
            <nav>
                <a href="index.html">
                    <img src="images/logo.jpg" alt="">
                </a>
            </nav>
        </div>
    </header>


<script src="https://kit.fontawesome.com/ba33ab971e.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="11707e6251233f223f20">[email protected]</a>/dist/aos.js"></script>
<script src="scripts.js" type="text/javascript"></script>
</body>
</html>

htmlcsstwitter-bootstrapbootstrap-4font-awesome

Answer №1

It seems like there is an issue with your FontAwesome link not working properly. You can resolve this by replacing the 

<script src="https://kit.fontawesome.com/ba33ab971e.js"></script>
with the appropriate import tag.

I tested it on my end and everything else functions as intended without any problems.

Answer №2

Big thanks to everyone for the assistance.

The issue turned out to be how FontAwesome was included in the code, just as you all had mentioned.

To address this, I referred to a helpful article at .

I made sure to include in the header of my HTML file.

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

Avoiding conflicts: Using Tabs with Revolution Slider without jQuery interference

I'm running into an issue with the tabs on my website. The revolution slider is working perfectly, but the tab widget seems to be displaying all the tab contents at once instead of each one separately. You can see the problem here: at the bottom of t ...

javascriptjqueryhtmltabsjquery-ui-slider

The location of the footer is not aligned correctly

Recently, I encountered an issue that has left me puzzled. The problem is that the footer on my webpage is appearing between the calendar button and the calendar itself. Here is a snippet from my calendar.html file: {% extends 'base.html' %} {% ...

htmlcssdjango

What are some methods for eliminating the navigation bar from eBay?

I am currently working on designing a unique product page for a modular shotgun microphone kit that can be found on eBay. However, I am facing challenges in removing the navigation bar and header bar from the page. Despite my efforts to uncheck all the bo ...

htmlcssebay-api

Move divs that are currently not visible on the screen to a new position using CSS animations

Upon entering the site, I would like certain divs to animate from an offscreen position. I came across this code snippet: $( document ).ready(function() { $('.box-wrapper').each(function(index, element) { setTimeout(function(){ ...

javascriptjqueryhtmlcssanimation

Conceal mobile button

Welcome to my website: Is there a way to hide the button on mobile phones? I want to create different buttons specifically for mobile devices. Below is the HTML code for the buttons. HTML <a href="http://site9171756.91.webydo.com/Info.html" target="p ...

htmlcssmobilehideinformation-hiding

Encountering yet another frustrating issue with z-index not functioning properly in versions of IE above 7, despite extensive research yielding no solution

I have scoured numerous resources and read countless articles on how to resolve z-index issues in IE 7, 8, and 9. However, none of the suggested solutions seem to work for my particular situation. The issue at hand is that I have interactive content posit ...

javascripthtmlcssinternet-explorerz-index

Setting the minimum height of a wrapper to 100% may cause the

I am experiencing an issue with my website where the repeating background on a wrapper that acts as the background for the nav-bar is not extending all the way down the page as intended. I tried setting the min-height of the wrapper to 100%, but for some r ...

htmlcss

Tips for creating a stylish scrollbar in a React Material-Table interface

Currently, I am utilizing the react material-table and looking to implement a more visually appealing scroll-bar instead of the default Pagination option. Although I have experimented with the react-custom-scroll package, it has not produced the desired ...

javascriptcssreactjsmaterial-uimaterial-table

JS focusing on incorrect entity

Check out the fiddle link below to see the issue: https://jsfiddle.net/0a0yo575/10/ The goal is to display a single box in the top-left corner based on user interaction. However, the current JavaScript is causing the point to disappear instead of the box ...

javascriptjqueryhtmlcss

Select a radio button when it is in focus

I am having trouble figuring out how to automatically check a radio button when a user clicks on an input field. The code I have attempted is not working as expected... $(function() { $('.searchInput').focus(function() { $(this).prev( ...

jqueryhtml

The ng-style directive is not functioning properly

After selecting a category, I attempted to change the color using "ng-style" in my HTML code. However, it seems that the color change is not taking effect. This is the snippet from my HTML code: <div ng-repeat="item in ListExpense" ng-class-odd="&apos ...

cssangularjsionic-framework

Tips to prevent modal impacts on underlying elements?

When I click on a button, a modal pops up. However, the background contents seem to spread out and sometimes scroll automatically when the modal appears. I have searched for a solution to this issue but have been unsuccessful. Can anyone please help me ide ...

javascriptjqueryhtmlcsstwitter-bootstrap

Struggling to have PHP process and store form data in MySQL database

I am attempting to process HTML form data into a MySQL database using PHP for the first time, and I am feeling overwhelmed. The form is POSTed to the formSubmit.php file, where the variables are created for the SQL command to query. I have tried adjusting ...

phphtmlmysqlformsmysqli

Unable to interact with the submit button using Selenium

Hey there! I'm facing a bit of an issue with logging into using Selenium. I was able to successfully log in using the POST request method in BeautifulSoup, but now I need to switch to Selenium because I need to click on a button after login, which is ...

pythonhtmlselenium

The anchor element does not trigger the activation process within a flexbox item

I have a flex container that contains multiple items. Instead of using the anchor tag to enable a link when clicked, I am setting the flex item class inside it. The element is comprised of three divs: The first div is a circle with an icon, the "second" d ...

htmlcssflexboxanchor

Adjustments to the positioning of masonry columns

Hello everyone, I'm in need of some assistance with editing this code. My goal is to make the effect clickable rather than activated by hovering. You can view the current code snippet here. Here is the existing code: $container.find('.shifty-i ...

jquerycss

Implementing an Angular function to close a window when clicking outside of it

I was browsing YouTube and came across a tutorial on how to create a directive that closes a window when clicking outside of it. However, I'm facing an issue with implementing this in my project. I built a simple to-do list application with the abilit ...

htmlangulartypescript

JavaScript Slide Show using setInterval()

Need some help with JavaScript! I have a slide and I want to add a button to either make it autoplay or stop it. When I just use an Alert inside the function, it works, but when I add the interval code, it won't. Check out my codepen link Here is the ...

javascripthtmlcssslidersetinterval

Using a foreach loop to showcase data in a table

My goal is to utilize the GitHub API to showcase all the issues present in my repository in a neat table format on my website. Despite my best efforts, I am facing difficulties in generating the table using a foreach loop. Below is the PHP code I am curr ...

phphtmljsonforeachhtml-table

I'm having trouble getting my text values to line up next to my slider bar

I've been troubleshooting this issue for a couple of hours now. (My CSS skills are not the best) Currently, I have two jQuery sliders with values. My goal is to position "Rooms: 0" and "Bathrooms: 0" right next to their respective slider bars. . ...

jqueryhtmlcsscss-float