What is causing some Font Awesome icons to not function properly with boostrapCDN?

I thought all Font Awesome icons would work by linking this bootstrap stylesheet, but I've only managed to get one of them (`.fa fa-deskto`) to display. The rest, like the second one for example (link below), simply don't show up:

Both icons are supposed to be free, yet I can't get it to work.

Second Icon

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="47252828333433352637077269746975">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>

<body>
  <div>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" />
    <div className="icon">
      <i class="fa fa-desktop"></i>
      <i class="fa-solid fa-bath"></i>
    </div>
  </div>
</body>

htmlcssreactjstwitter-bootstrapfont-awesome

Answer №1

It seems that the provided link is missing the styles for fa-bath. This could mean that it was added in a later version. Below is a link to the latest version where everything should work correctly!

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>HTML + CSS</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
      <div className="icon">
        <i class="fa fa-desktop"></i>
        <i class="fa-solid fa-bath"></i>
      </div>
    </div>
  </body>
</html>

Answer №2

The icon you're looking for might not be found in the "https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"

Consider using "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" along with

fas fa-bath

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

Tips for creating a horizontally expandable container that adjusts after overflowing

I am struggling to create a container that initially fills with text vertically, and then expands horizontally if needed. You can see what I mean in this diagram here: container_diagram Just like shown in the image - the container has a fixed height that ...

htmlcsscontainerswidth

Issues arise when utilizing special characters in Shopify GraphQL queries, leading to the failure of returning results

I have a query to retrieve products based on their tag category. When searching for the cd category: products(first:10, query:"tags:category:cd") { edges {} } I am able to get results with this query. However, when I search for the Yläosat ...

reactjsgraphqlshopify

I am having trouble using sass files with the command 'dotnet new react'

I attempted to create an ASP.NET Core application with a React frontend, so I executed the following command: dotnet new react -o <project name> This generated a runnable project. However, the issue arose when it couldn't handle sass files. To ...

node.jsreactjsnpm.net-coresass

Implementing a line break within a JavaScript function specifically designed for formatting images

As I am not a javascript developer, the code I have been given for debugging is somewhat challenging. The issue at hand involves an iOS module where a .js CSS file has been set up and images are loading improperly, resulting in the need for horizontal scro ...

javascriptcss

Displaying a Color Sample in a Grid

I'm currently working on a feature that allows users to select colors using the jQuery minicolor widget. I really like how the color swatch appears inside the widget, but I'm having trouble replicating that same look in a data table. When I try t ...

jqueryhtmlcss

The alignment of labels and text inputs using CSS flexbox is not correct

I am attempting to create a responsive layout for the labels and text inputs in my HTML code. I want them to align in a single row, with one label and one text input per row when the screen width is below a certain threshold. Once the screen width exceeds ...

htmlcss

The issue with using useState on arrays is that it is not functioning properly with React Hooks

const [LatestNews, setLatestNews] = useState([]); useEffect(() => { async function fetchLatestData() { const result = await database.collection('latestnews').get(); result.docs.forEach(doc => ...

javascriptreactjsreact-hooks

Issue: EISDIR error encountered while attempting to perform an operation on a directory. The error occurred specifically during the readlink process at 'D:study oobinjspages\_app.tsx' while executing the command 'npm run build' for a Next.js application

When attempting to run npm run build for my Next.js app in TypeScript, I encountered the error mentioned above. The issue seems to be related to the file _app.tsx being interpreted as a directory instead of a file. Here is the error screenshot along with t ...

reactjsnext.jsnpm-build

Conceal a certain element in development using CSS

Is there a way to hide the footer section from my webpage without affecting the rest of the content? For example, using something like: "div class="poweredby" display: none", but I'm unsure of the correct method... Here is the spe ...

javascripthtmlcss

Issue with jquery .height(value) function not functioning properly on Internet Explorer

I have come across a challenge with the following code snippet: var winheight = $(window).height(); var headerHt = (0.11 * winheight); $(".header").height(headerHt) The purpose of this code is to dynamically adjust the size of .header and other elements ...

cssevent-handlingjquery

Guide to creating a distortion-free layout with Bootstrap 4

I am in need of creating a design layout using Bootstrap 4 with the following specifications: https://i.sstatic.net/JeUHh.png Here is my code : <div class="row"> <div class="col-md-7"> A </div> <div class="col-md-5"> <div ...

htmlresponsive-designbootstrap-4

What is the process for removing an element from my Reducer Object?

I'm facing a challenge with my reducer object structure. Here's an example of what it looks like: clientData : { 1080 : [{ID : 1111,name : 'John'},{ID : 2222,name : 'Stan'},], 1090 : [{ID : 3333,name : 'Adam'},{ ...

javascriptreactjsreduxreact-redux

Determining the Nearest Form to an Element using jQuery

I developed a JavaScript/jQuery script that allows me to check all checkboxes within a form. The function works effectively, but the issue is that it checks all checkboxes on the page regardless of their form wrapper. Here is the function: function toggl ...

javascriptjqueryhtmlcheckbox

Generate nth-child selectors in a Material-UI component using props dynamically

I am currently working on customizing the Material UI slider component, specifically focusing on its marks prop to display the number of occurrences for each data object within the marks array. The desired appearance of the slider is illustrated in this i ...

javascriptreactjscss-selectorsmaterial-ui

Move the divs within the overflow container by sliding them, then take out the initial element and append it to the end

Currently, when I utilize .appendTo(".wrapper") as shown in the code below, it eliminates the animation effect. My goal is to have the div on the far left slide out of view, triggering an overflow hidden effect, and then be placed at the end of the slide c ...

javascriptjqueryhtmlcss

The initial release of the NPM package results in a blank object being returned

After attempting to publish a simple react component, I encountered an issue where it returns an empty object when imported? The package in question is called react-selekt and can be found at https://www.npmjs.com/package/react-selekt You can also check ...

node.jsreactjsnpmwebpack

Tips for implementing react-select types in custom component development

Currently, I'm in the process of developing custom components for DropdownIndicator to be used on react-select with Typescript. However, I am encountering difficulties with the component's type due to my limited experience with Typescript. I wou ...

reactjstypescriptreact-select

How can I alter the icon's color?

Is it possible for the icon's color to change to red when the condition is greater than 0, and to gray when the condition is equal to zero? <TouchableOpacity onPress={() => { if (Object.values(selectedIt ...

javascriptreactjsreact-native

SDTT is showing an error that says "The review has no specified reviewed item," even though I have properly utilized the 'itemReviewed' property

I have attempted using itemReviewed in various tags, but it doesn't seem to be working as I keep getting the following error: The review has no reviewed item specified. Click here for a scan on Google's Structured Data Testing Tool. <!-- ...

htmlschema.orgmicrodatagoogle-rich-snippetsrich-snippets

Trouble accessing the output of an Async function using Material UI Autocomplete

I have a challenge with my Material UI Autocomplete implementation where I am trying to retrieve the postcode using the getZipCode function from 'use-places-autocomplete', which returns a promise. However, in the renderOption section where I atte ...

reactjsasync-awaitmaterial-ui