What could be causing some Fontawesome icons to not display properly?

My index.html is set up correctly with my kit, but I'm having some issues.

<script src="https://kit.fontawesome.com/a*******5.js" crossorigin="anonymous"></script>

While some icons are showing up just fine, others are not displaying properly.

<i class=" fa fa-search"></i> --------------> WORKING!

<i class="fa-solid fa-square-envelope"></i> --------> NOT WORKING!

The second icon only shows a square shape instead of the expected envelope. I've tried resetting CSS styles, changing colors, and more to no avail.

htmlcssicons

Answer №1

For those utilizing FA v5 or below, the envelope icon identifier is fa-envelope-square. However, in v6, it was altered to fa-square-envelope.

Reference

Answer №2

When adding an icon, make sure to use a specific class for styling. Here is an example of how to do it:

Css:

.custom-icon {
    font-size: 48px;
    color: #FF0000;
    height: auto;
    width: auto;
}

HTML:

<i class="fa-envelope-square custom-icon"></i>

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

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

Responsive Material-UI horizontal navigation bar

Hey there! I'm working on developing a UI using Material-UI, and I want to make it so that the menu can be collapsed into a slide-in style menu when accessed on a mobile device. Currently, I'm using tabs which allow for sliding left and right, b ...

cssmenumaterial-ui

Utilizing HTML data retrieved from an ajax request

I am utilizing a load more button to display content fetched from a database via ajax. Here is how the ajax call is structured: // JavaScript Document // Function to load more builds $(document).ready(function(){ var pageIndex = 1; $('#loadmorebuild ...

javascriptjqueryhtmlajaxjson

Enhance your HTML checkboxes with this stylish jQuery plugin!

Similar to the input tag in the style of StackOverflow, I stumbled upon a jQuery plugin that achieves the same effect. Unfortunately, I can't remember the name. Can someone please assist me? ...

jqueryhtml

What is the best way to insert additional HTML elements beneath a video background that extends into the navigation bar?

*{ padding: 0; margin: 0; text-decoration: none; list-style: none; box-sizing: border-box; } body{ font-family: montserrat; } nav{ height: 85px; width: 100%; z-index:1001; } lab ...

htmlcss

Troubleshooting issues with custom global components failing to apply styling in NuxtJs

I have designed various components such as buttons that I want to be able to use and reuse across my entire website. I have already developed plugins Object.entries(components).forEach((([name, component]) => { Vue.component(name, component) })) and ...

cssvue.jssassnuxt.js

What is the best method to align a form in three columns from each side without relying on Bootstrap?

Is there a way to center the form inside a card with 3 columns on each side, so that the form appears in the middle occupying about 6 columns without relying on Bootstrap, Materialize or any similar framework? Thanks! <div class="card"> & ...

htmlcssdjango

Typescript input event

I need help implementing an on change event when a file is selected from an input(file) element. What I want is for the event to set a textbox to display the name of the selected file. Unfortunately, I haven't been able to find a clear example or figu ...

htmlangulartypescriptinputonchange

How can I activate the fancy box from a specific div element?

There are plenty of variations to this question, but none of them seem to help. I am looking for a way to trigger fancybox from a div. Here is the div in question: <div class="port web">Website</div> This particular div has some CSS styles ap ...

jqueryhtmlcssfancybox

Updating the color of text when clicking on a link using javascript

I am facing an issue where I cannot seem to change the text color using JavaScript. The functionality to show and hide div tags is working perfectly, but changing the color seems to be a challenge. It's worth noting that there are no styles defined fo ...

javascriptcssfunctiononclicktextcolor

Retrieve input value in Angular 8 using only the element's ID

Can the value of an input be obtained in Angular 8 with TypeScript if only the element's id is known? ...

htmlangulartypescript

Maintain correct aspect ratio when zooming in the body

I'm facing a challenge with my single-page web application that has fixed width and height. It doesn't scale properly to fit the page at all times. Scaling based on its width works fine, but I want to achieve scaling from both width and height w ...

jquerycsszoomingaspect-ratio

Issue with jQuery Quicksand's CSS rendering in Internet Explorer and Firefox browsers, but not affecting Chrome

I'm attempting to achieve an icon-swapping effect using jQuery+quicksand. Although it works seamlessly in Chrome, I am encountering issues with IE and Firefox. Given that the more intricate quicksand demos function flawlessly across all browsers, I su ...

jquerycssquicksand

I am seeking advice on how to incorporate JavaScript to adjust slider values and add numerical values or prices. Any suggestions would

Seeking assistance with a unique project: I am currently developing a calculator that allows users to utilize sliders to select the best option for themselves across various categories. My experience with JavaScript is limited, so I decided to reach out h ...

javascripthtmlcssconstantsslider

How can I use jQuery to either display or hide the "#" value in a URL?

I have a question that I need help with. Let's say I have the following links: <a href="#test1"> Test </a> <a href="#test2"> Test 2 </a> When I click on Test, the URL will change to something like siteurl/#test1. However, whe ...

javascriptjqueryhtml

What is a way to adjust the width of fixed columns in a Bootstrap 4.0 responsive table?

I've been struggling to make this work despite following similar questions and answers. I attempted to adjust the column width by directly setting each one, but nothing seems to change! <thead style="white-space: nowrap"> ...

javascripthtmlbootstrap-4html-table

Angular Material has support for displaying nested optgroups within select components

Upon reviewing a question on Stack Overflow, I learned that nested optgroups are not supported in the HTML5 spec. While it is possible to manually style them, I am curious if Angular Material offers a solution. Angular Material internally swaps many eleme ...

javascripthtmlcssangularjsangular-material

Is it feasible to create a full-page text gradient clip without it repeating on each individual element?

.gradient { background-color: #00ccaa; background: linear-gradient(0deg, #00ccaa, #f530a9); background-size: cover; background-clip: text; box-decoration-break:slice; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -web ...

htmlcssgradientcss-gradientsbackground-clip

add the AJAX response to the specified div element

I'm currently using an ajax call to retrieve movie data from the IMDb API for 'The Shawshank Redemption'. My goal is to display this data within the designated div element. <div id="movie-data"></div> Here's my current Jav ...

javascriptjqueryhtmlajax

Show full-screen images on click using Ionic framework

Currently, I am working on developing a mobile app using the Ionic framework. I have created a layout that resembles the one shown in this Card Layout. My question is: How can I make the card image display in full screen when clicked by the user and retur ...

javascripthtmlangularjsionic-framework