`There seems to be an issue with displaying Fontawesome icons`

Having some trouble with using Fontawesome 5 icons, my kit is from version 4 so I'm not sure if that's the issue. Any suggestions on how to fix this?

<!DOCTYPE html>

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="chasebiscamp.css">
<script src="https://kit.fontawesome.com/68e7b84e8d.js" crossorigin="anonymous"></script>
<title>CB</title>
</head>

<body>
    <nav>
        
            <button class="nav" id="profile_tab">Profile</button>
            <button class="nav" id="chat_tab">Chat</button>
            <button class="nav" id="friends_tab">Friends</button>
            <button class="nav" id="gallery_tab">Gallery</button>           
            <button class="nav" id="settings_tab">Settings</button>

    </nav>

    <p><i class="fa-solid fa-user" style="color: #000000;"></i></p>

    <div class="content_body" id="profile">
        <h1></h1>
    </div>

    

</body>

</html>

Hopefully that clarifies things!

Answer №1

To make it work, all you need to do is insert "fa" into the classlist

<p><i class="fa fa-solid fa-user" style="color: #000000;"></i></p>

See this example in action

Answer №2

You may encounter issues with your root directory, consider using Nodejs to troubleshoot.

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

unable to select a highlighted drop-down menu with focus

Upon loading the page, I am attempting to have the dropdown with the select tag highlighted. Despite trying to apply focus to all of the multiple classes within the select tag, it has not been successful. Can someone take a look at this for me? div.cs-s ...

When utilizing pseudo element ::before and display:table-cell in IE11, the glyphicons content may not appear as expected

I've been working on this for a while now, but I can't seem to find a solution. The issue I'm facing is that I want to display a glyphicon before the content of a text-block, and I need that element with the icon to fill up all the height th ...

Conceal / reveal minuscule letters

Is it feasible to hide or select only the lowercase characters of a string using CSS? <p>Richard Parnaby-King</p> How can I display just RPK? While ::first-letter allows me to show the letter R, is there a way to go further with this? p ...

What could be causing my fixed header to disappear in Safari 5?

I am experiencing a strange issue with my fixed header on Safari 5 for iPad. The header disappears once it scrolls down to a certain point, even though it works fine in IE, Firefox, Chrome, and the latest version of Safari. Has anyone else encountered this ...

storing information in HTML using Django

Recently, I have been learning about Django Rest and I am now trying to display some JSON data in HTML. The JSON data I have is: {'Resul': {'Period Start': '2017-01-01', 'Period End': '2017-12-12'}} When ...

How to make a range slider using HTML

I am currently working with a range slider that displays only one value, but I want to show two limits - the minimum and maximum values. This is similar to a price range slider where users can select a range of prices. I need to store both the min and max ...

What is the best way to determine which button was clicked in Django?

My HTML has two buttons - one for accepting and the other for rejecting requests. I am trying to figure out how to determine which button was pressed along with the email of the applicant (tutor_application.tutor.chalkslateuser.email). Despite multiple a ...

The CSS sacred trifecta - troubleshooting a layout with 2 fixed columns and 1 fluid column

After putting in some hard work to create a 'holy grail'-style layout for my website, I'm faced with two issues that need fixing. The main objective is to have a 'sticky' footer that expands along with the height of the browser wi ...

Hovering over the live preview allows the zoom feature to work flawlessly, but unfortunately,

I recently implemented a zoom on hover feature using code that works perfectly in my Brackets Live Preview environment. However, when I upload the page to my website, the functionality seems to have disappeared. I believe I have included all the necessar ...

Can the href attribute be assigned an arbitrary string that does not start with http?

Is it feasible to assign an arbitrary string as the HTML href attribute for an <a> tag? The intention is to present this text to website visitors so they can copy it easily through the "copy link location" context menu. The catch here is that this ...

Tips for concealing a div when clicking on an element solely with CSS

I am currently working on creating a CSS Main Menu in Vue. The functionality is such that it pops up when the mouse hovers over it, and hides when the mouse moves out. However, I am facing an issue with hiding the menu when clicking on a hyperlink a. Any s ...

The error message `undefined method `attr' for nil:NilClass (NoMethodError)` indicates that the

I'm encountering an error in my CLI app with a specific method. The method in question is: def self.deal_page(input, product_url) self.open_deal_page(input) deal = {} html = open(@product_url) doc = Nokogiri::HTML(html) data = do ...

Use CSS to activate a sibling div when hovering over a button within the same div that contains the button

Is it possible to change the color of div #panel when hovering over the button #button inside div #left? #left #button:hover~#panel { background-color: blue; } #panel { position: absolute; float: r ...

How to use Typescript to catch the open event of a Bootstrap 4 modal

My goal is to trigger some code when the bootstrap model opens, but everything I have attempted so far has been unsuccessful. Modal: <div class="modal fade" id="mobileModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidde ...

When the window size is reduced, the image continues into the next div

I need to create a page that displays text alongside an image. However, when the window size is minimized, the image overlaps with the text. Here is how it looks: https://i.sstatic.net/CBMh8.png To fix this issue, I am using the following HTML code: ...

Achieving compatibility with pseudo elements :before/:after in Internet Explorer 7

I've been attempting to make these functionalities compatible with IE 7, but I'm encountering difficulties. I've downloaded and included the jQuery plugin for it in the header as shown below: <!--[if lte IE 7]> <script type="text/j ...

Showing a diverse range of data types with null values in the Django admin list_display

My explanation of the title might have been unclear. I have a simple chat application where users can send text, audio, video, or images. To render these messages, I have a method that checks the message type and renders it accordingly. If the message is t ...

Learn how to extract JSON information from a URL and integrate it into either a table or dropdown in Vue.js

Looking to retrieve a JSON data array from a URL and utilize it to populate either a table or dropdown with Vue.js and Axios. Here is the link where I intend to fetch the data. Any advice on how to accomplish this? https://jsonplaceholder.typicode.com/us ...

Attach an object securely to a specific spot

I'm facing an issue with my product cards where the text mentioning "free shipping" is not aligned properly when there are no ratings. How can I ensure that all free shipping texts are positioned consistently on the card? Should I modify the position ...

Placing two Slickgrid tables next to each other

Is there a way to arrange two slickgrid tables next to each other? Currently, I am creating two grids using grid = new Slick.Grid..., but the dimensions are hardcoded in CSS like this: #dynamic1 { /*this is grid one*/ position: absolute; top: 120px; ...