How come the fa-heart-o icon is not functioning properly in Fontawesome version 5?

How can I use the fa-heart-o icon in Fontawesome 5 free version if it's not working? Can I have both version 4.7 and 5.1 of Fontawesome on the same page? It seems to work in version 4.7.

This is the code I'm using:

 <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    
    <body>
        <li>
            <i class="fas fa-heart-o"></i>
        </li>
        <script src='https://kit.fontawesome.com/a076d05399.js' crossorigin='anonymous'></script>
    </body>
    
    </html>
htmlcssiconsfont-awesome

Answer №1

 <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>My Unique Document</title>
    </head>

    <body>
        <ul>
            <i class="fa fa-heart-filled"></i>
        </ul>
        <script src='https://custom.fontawesome.com/unique.js' crossorigin='anonymous'></script>
    </body>

    </html>

Answer №2

In order for it to function properly, you must update from 

<i class="fas fa-heart-o"></i>
to 
<i class="fas fa-heart"></i>
as the -o in awesome font 5 causes compatibility issues.

Check out this Codepen link

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

Customize Wordpress menu by adding the class "current-menu-item" to the <a> tags

Utilizing a CSS framework alongside a customized menu for Wordpress: <?php $menuParameters = array( 'theme_location' => 'menu-1', 'menu_id' => 'primary-menu', &ap ...

phphtmlcsswordpressmenu

Adjust the spacing between two elements "p" in a single row using flexbox

#imprint { background-color: black; color: #FFFFFF; display: flex; flex-wrap: wrap; padding: 15px; justify-content: center; } <article id="imprint"> <p>test</p> <p>test</p> </article> Is ...

htmlcss

The icon representing a clock from the font-awesome library is not displaying properly on my website

I've been tasked with creating the webpage below However, when I try to use the font-awesome class to include the clock icon as shown in the image, it's not displaying correctly. Here is the code I'm using. Can anyone point out my mistake? ...

htmlcssbootstrap-4

Can you help understand the unexpected output produced by this JavaScript code?

When looking at the following JavaScript code, you would expect an output of 32. However, the actual answer is 16. How is this possible? 5 + 1 = 6; 6 + 5 = 11; 11 * 2 = 22; 22 + 10 = 32; (this should have been the correct answer) var x = 5; x = (x++, a ...

javascripthtmlecmascript-6

Perform a bash command using PHP when an HTML button is clicked

Today, my brain seems to be on vacation. Currently, I have set up a Raspberry Pi with vlc running and connected to a mounted screen on the wall. There is a web page with simple controls to manage the pi, switch between different vlc streams, or stop stream ...

javascriptphphtmlajaxbash

Is it possible to open a new tab by clicking on an anchor tag

I have a scenario with two tabs on a webpage, each with anchor tags that I can navigate to from the homepage using a header menu item anchor. The tabs are working fine with an active class and aria-expanded="true", but I'm facing an issue where the ap ...

javascriptjqueryhtmlcsstabs

A guide to adjusting the size of an iframe within a bootstrap modal

I am currently facing an issue where I am trying to display an iframe inside a bootstrap modal. The challenge is that the content within the iframe is dynamic, so the size may vary each time the modal is opened. As seen here, the modal appears too big and ...

htmlbootstrap-4bootstrap-modal

The issue of overflow-y not functioning properly in conjunction with ng-repeat has been observed

As indicated in this resource, setting a fixed height for the div is suggested, but it seems like it's not working with the code provided below. <div style="margin-top:0.5vh;"> <div style="height:200px;border:1px solid red;overflow:au ...

javascripthtmlcssangularjs

Simple Method To Dynamically Align jQuery LightGallery Thumbnails On a Responsive CSS Website

Can anyone assist me quickly? I've implemented everything but am facing a slight issue with the centering of my ul code. I've tried various solutions without success. Here is my code, any advice would be greatly appreciated (I may sound stressed ...

jquerycssgallerythumbnailscenter

The outputstring encountered an issue with the HTML class

Struggling a bit with php, I'm trying to incorporate a basic comment system that accesses and writes to a comments.php file. Everything is functioning well until I attempt to style the $outputstring. Here's the code in question: $outputstring ...

phphtmlcss

(CSS/HTML) How to hover over an "li" element without affecting the text inside the "li" element

Looking for some assistance. I've created an unordered list with list items and applied the following CSS to it: li { opacity: 0.5; } li:hover{ opacity: 1; } The issue arises when I hover over a pixel from within a word in "li" - it stops hovering ...

htmlcss

What is the best way to adjust the size of the close button in react-bootstrap for a unique design?

<CancelButton className="exitBtn"/> .exitBtn{ height:40px; width:35px; } I'm trying to adjust the dimensions of the cancel button, but for some reason it's not working. Can someone provide guidance on how to successfully ...

cssreactjsreact-bootstrap

What causes Punjabi (Indian Language) to display as boxes on certain smart devices?

I recently launched a mobile application named Gurbani Ujagar. While the app functions perfectly on devices like the Samsung Galaxy S3, it seems to display improperly on other phones such as the Galaxy Nexus, Galaxy S, and certain tablets, showing words or ...

androidhtmlxcodefonts

Another option instead of using the .siblings() method would be

Is there an alternative to using the .siblings() method in jQuery for traversing through divs of a specific class in separate container divs? How can this be achieved with the following code: HTML: <div id="container1"> <div id="1"></di ...

jqueryhtml

Obtain User Input from a TextArea Element on an HTML Page using ASP.net

In my asp.net 4.0 project, I am using jTemplates to create a HTML-Page that includes a text area and a submit button. I am looking for a way to retrieve the value entered in the text area when the user clicks on the submit button. Can anyone provide guid ...

asp.nethtmljtemplates

Content not aligned in the center of the page on Internet Explorer

Recently, I've taken on the responsibility of managing the content for this website after it was passed down from the previous developer. Each page's content is contained within a div element with the class "ct", which has auto margins applied t ...

htmlcssinternet-explorerweb

The bottom section of the webpage fails to follow the CSS height or min-height properties

Taking into account the question I raised earlier: How can a div be made to occupy the remaining vertical space using CSS? I received an answer which I have been experimenting with lately: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "htt ...

csshtml

Arranging h1 tags within a container id

Seeking assistance with aligning specific classes in a certain way: "left" should align to the left part of #header, "links" should be centered, and "right" should align to the right of #header. Additionally, I want the icons to align vertically with the t ...

htmlcssalignment

Ways to verify the input text for content without activating the submit action using only JavaScript

I'm working on creating a unique input effect where the label moves up 100px when the input is focused, and then remains at the top when the user enters a value. If the input is empty and the user clicks outside, the label will return to its original ...

htmlcssbootstrap-4

Updating content with jQuery based on radio button selection

Looking for assistance with a simple jQuery code that will display different content when different radio buttons are clicked. Check out the code here. This is the HTML code: <label class="radio inline"> <input id="up_radio" type="radio" n ...

javascriptjqueryhtml