The font-awesome fa-thin icon does not display properly, but the fa icon does work

When I use the following code on my website, it works perfectly:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"/>
<i class="fa fa-bars" style="color: #ffffff;"></i>

However, if I try this code instead (and get a square icon):

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"/>
<i class="fa-thin fa-bars" style="color: #ffffff;"></i>

The source of this code is from: https://fontawesome.com/v6/icons/bars?f=classic&s=thin

I'm curious to know how to make fa-thin work as intended.

Your assistance in resolving this issue would be greatly appreciated!

htmlcssfont-awesome

Answer №1

When you navigate to the documentatio​n provided, be sure to click on the "Getting Started" section.

This action will prompt a modal window to appear with the following message:

This icon belongs to the Pro collection!

In order to utilize the sleek "bars" style, you must have a subscription to a Pro-level plan or a perpetual Pro license that covers the specific version of Font Awesome where this icon (or style) is found.

Note that your use of an unofficial third-party CDN means only the free icons are available.

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

Combining Three.js with iFrame for a mix of WebGL and CSS3D

After some experimentation, I successfully created a dynamic page that seamlessly integrates WebGL and CSS3D (with valuable guidance from this helpful SO post). To add an extra touch, I included an iframe: However, I noticed that the functionality to inte ...

javascripthtmlcssthree.js

Use PHP to redirect the header function to replace the existing "thank you" page for a poll

I currently have a PHP Poll set up with multiple questions (10), and instead of displaying a "Thank You" message after each submission, I want it to transition directly to the next poll question. Here is my current setup: The poll already includes a feat ...

phpjqueryhtmlfunctionheader

Style the labels on the axis of Frappe Charts with colors (potentially utilizing the appropriate CSS selector)

Is it possible to style the x and y axis labels in a Frappe chart with different colors? https://i.stack.imgur.com/A3vUq.png While trying to identify the CSS selectors using Chrome DevTools, I found that a single text element (representing an x axis labe ...

javascripthtmlcss

Define the width of jqgrid

I have been utilizing SmartAdmin jqgrid to showcase data in tabular format. The number of columns in the datatable changes dynamically each time. I am converting the DataTable to a JSON object and assigning it to the jqgrid. However, it appears that jqgrid ...

htmlcssjsonjqgridsmartadmin

Using JavaScript to create circular shapes on canvas with paint circle

I need assistance in JavaScript to create a circle and update it while removing the previous one. My current code is: <html> <head> <style> body { margin: 0px; padding: 0px; } </style> </head> <body> <ca ...

javascripthtml

Is there a way to customize the color of disabled columns within a Mat-Table?

I have customized my table by disabling certain columns and now I want to distinguish them with different colors. To achieve this, I created a TypeScript function that changes the CSS using the class ".disabledRange". I came across suggestions about using ...

cssangulartypescriptangular-materialangular-ng-class

"The issue lies in the JSON Array failing to display accurate content when the link is

I have implemented a functionality to bring in JSON data using Ajax & Jquery. The loaded data consists of various objects including: ID, TITLE, PERMALINK, CONTENT, ETC.(The rest is not important) My goal is to display each CONTENT object separately base ...

jqueryhtmljson

The height of scrollbars in the HTML section does not extend to full coverage

On my HTML webpage, I am facing an issue with the "left-section" scrollbar. It does not cover the entire height of the section. The scrollbar only appears when the window is resized small enough to reach "Link 18". Even then, the scrollbar does not scroll ...

htmlcssscrollbar

Tips for handling CSS loading delays with icons in OpenLayers markers

When using openlayers (v4.6.4) with font-awesome as marker icons, the icons do not display upon first load (even after clearing cache and hard reload). Instead, I see a rectangle resembling a broken character. It is only on the second load that they appear ...

javascriptcssfont-awesomeopenlayers-3

Gmail is not recognizing the responsive CSS media query

I'm currently experiencing an issue with my email template CSS while using Gmail and Chrome Dev Tools in responsive mode (382x661). Within the header, I have included: <meta name="viewport" content="width=device-width, height=device-height, init ...

htmlcssgmailmedia-querieshtml-email

Can the font size of a container be adjusted proportionally to its width or height using only CSS?

When it comes to ensuring that the font always fits nicely within its container, I rely on using Javascript to set divs or specific class to have their font-size dynamically equal to their width, and adjust their inner text elements accordingly. If you wa ...

htmltwitter-bootstrapcssresponsive-design

Tips for managing data from two distinct web pages within a single controller in angular.js

I am currently working on developing a web page using Angular.js that allows users to create tasks on the server. Each task requires APIs, but I don't want to enter APIs every time I create a new task. I am looking for a way to input APIs only once wi ...

javascriptjqueryhtmlangularjs

Enhancing User Interaction: Tips for Focusing on Touch in React Input Text Field

Having a bit of an issue with my input component that works perfectly on desktop but seems to be malfunctioning on mobile. I can't seem to get it to focus on press, and all the solutions I'm finding are related to React Native which I'm not ...

htmlreactjsinputtouch

Resetting CSS attributes in Kendo UI Mobile when transitioning between views after removing them with jQuery

Dealing with the flicker of unstyled content in my kendo mobile web app has been a challenge, but I found a solution by using a specific CSS rule within my stylesheet: [data-role="content"] { visibility: hidden; } This effectively hides all ...

jquerycsskendo-ui

Having trouble with the s:url in Struts2 when trying to display an image within a s:submit

My JSP contains a form like this: <s:form action="GestionPagos.action"> <s:hidden key="actividad.id" /> <s:submit type="image" src="<s:url value ="/Internal Resources/imagenes/alta.png"/>"> </s:submit> &l ...

javahtmljspstruts2ognl

Troubleshooting webpack issue: CSS background image fails to load

After reading numerous posts regarding CSS background images not loading, I believe my situation is unique. Here is how I've configured my webpack setup (relevant parts only): { test: /\.(png|svg|jpg|gif)$/, use: [ { ...

cssimageexpresswebpack

Turn off Highlighting on a Website

I conducted an experiment similar to this: <div onclick="clickfunc(this)"> highlightME </div> <div> ooo blablabla highlightME ooo highlightME ooo highlightME ooo</div> <script language=javascript> function clickfunc(obj ...

javascripthtmlcss

JavaScript is unable to execute anything that comes after the initial code, specifically document.get

<section class="blogSingle"> <div class="container"> <div class="row"> <div class="blogSingle-left col-md-8"> <div id="content3" class="blogSingleContent"></div> </div> <div class ...

javascripthtmlbootstrap-4

Image broken on default bootstrap navbar

On my computer where I am developing a Ruby on Rails app, I have a relative link to an image. To customize the style, I am using Bootstrap and have used their code to source the image for the top left brand placement. You can view the Bootstrap link here. ...

htmlcssruby-on-railstwitter-bootstrap

What is causing Ajax to fail in connecting to the server?

When trying to submit a simple ajax form and send a response to my server, I keep getting the following error message : Forbidden (CSRF token missing or incorrect.): /designer/addOne/ [31/Jul/2017 12:49:12] "POST /designer/addOne/ HTTP/1.1" 403 2502 Alt ...

jqueryhtmlajax