There appears to be a particular icon that is mysteriously absent from Font Awesome when

While testing my website on Internet Explorer 11 using a Windows 7 VM, I encountered an issue with one specific icon not loading properly. The rest of the font awesome and glyphicons icons are being displayed correctly.

<button type="submit>
    <i class="fa fa-cart-plus fa-2x"></i>
</button>

Surprisingly, when tested on Firefox and Chrome in Linux Mint, all icons render as expected. However, both IE and Firefox in Windows display this particular icon as a box.

Upon further investigation, I noticed that Linux uses the .woff2 file while the version used in Windows is .woff. All Font Awesome CSS and fonts are stored locally rather than loaded from a CDN. Could this disparity be causing the missing icon to display incorrectly? Interestingly, the icon appears correctly on font awesome's official website.

After searching for solutions on Stack Overflow, I came across several similar answers, but most were outdated or unclear. As a result, I am unsure where to begin in resolving this issue. How can I ensure that this missing icon displays correctly?

cssfontsfont-awesome

Answer №1

The discrepancy in the version of font awesome font files being served on your Linux system compared to your Windows machine is causing an issue. The specific icon (fa-cart-plus) you are trying to use requires at least version 4.3 (). Ensure that both machines are accessing fontawesome 4.3 font files for it to display correctly.

While using a CDN can be beneficial, it may not pinpoint the exact root cause of the problem.

Answer №2

Encountering a similar problem with Chrome while working in a local setup (Possibly more browsers affected but haven't tested thoroughly) - It seems like the recent update might be causing issues.

I've come up with an alternative solution using the fa-stack method below, just requires some CSS adjustments for positioning but it functions properly:

HTML

<a role="button" class="btn btn-primary">
<span class="fa-stack">
<i class="fa fa-shopping-cart fa-stack-2x"></i>
<i class="fa fa-plus fa-stack-1x fa-primary"></i>
</span>&nbsp;New</a>

CSS

.fa-primary{
position: relative;
color: #1a9dff;
font-size: 0.5em !important;
top:-4px;
left:2px !important;
}

Note: I had to make some adjustments to the CSS for compatibility with the CDN version of FontAwesome - There may be discrepancies between the download package and the CDN content

Check out this codepen example

This code will superimpose a plus icon in your chosen color over the shopping cart icon. (Apologies for any formatting issues, new to offering solutions!)

It's worth mentioning that a similar situation occurred with Bootstrap a few months back when I updated from 3.1.1 to 3.3.4 (or something) which led to layout problems. However, using the CDN as displayed on Bootstrap's website worked flawlessly, unlike the downloadable package.

In short, I'd advise waiting for a resolution as even experts can slip up - Stick to the same source used in functional instances until the download package is rectified if you urgently need to utilize it.

Answer №3

Feel free to implement this CSS on your website

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

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

Contrasting element.setAttribute and element.style.setProperty differences

I am trying to dynamically change the value of a custom CSS variable using JavaScript. I initially attempted to use element.style.["--my-custom-var"] = value, but realized that it did not work for custom variables. After some research, I discover ...

javascriptcss

Guide to choosing and unchoosing a div / button using angularJs

I am attempting to create a functionality where items are displayed in a div instead of a list. When an item is clicked, the background color of the div changes and the item is added to a column. Clicking on the item again will revert it back to its origin ...

javascriptjqueryhtmlcssangularjs

How to dynamically adjust the height of a content div in CSS while maintaining fixed headers and foot

Seeking assistance with CSS layout from this amazing community. Desired layout includes a header, footer, left pane, and content area. Current CSS code provided but looking for better solutions. Image of desired layout included along with existing CSS a ...

javascriptjqueryhtmlcss

The size of the website elements needs to be increased for better visibility on mobile devices

While developing the official website for my Discord bot - Idle Baker, I opted to utilize Bootstrap 5 for its user-friendly design features, making it easier than dealing with extensive CSS coding. After completing the homepage of the site, I encountered ...

htmlcssmobile-websitebootstrap-5

CSS background image with a see-through overlay

I am trying to add a black overlay with an opacity of 0.7 to a full-screen background image. This is the CSS code I currently have: body { background:url(../images/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-backgr ...

css

modify the content that is not present in the HTML file utilizing d3js

Check out this codepen example: https://codepen.io/Siddharth11/pen/LVQmjN I can see that d3js is being used here. Upon inspecting the browser, all the classes are visible. Refer to this image showing the classes in the browser window: https://i.sstatic.n ...

javascriptjqueryhtmlcssd3.js

Rearranging Elements with Bootstrap 4 Grid System When Resizing Window

I need help with designing a responsive layout for my website. Currently, I have a simple layout with 3 elements that I want to display differently based on screen size. On larger screens, I want the elements to be arranged like the layout at the top in t ...

htmlcssbootstrap-4

Setting a CSS Variable with the Help of jQuery

I need help with changing the background color of a specific .div element when it is clicked on. I want the color to be a variable that can be changed by the user, and this change should occur when the document is ready. Currently, I am using a CSS variab ...

javascriptjqueryhtmlcss

Implementing Dynamic CSS Styles in AngularJS

Essentially, I am facing a challenge on my page where a control needs to toggle two different elements with two distinct CSS classes upon being clicked. While I have successfully managed to toggle one of the controls, the other remains unchanged. Here is ...

javascripthtmlcssangularjs

Issue with ReactJS not applying classes based on conditions

I'm currently working on toggling a class on an element when a user clicks. However, I am facing an issue where my code only sets the class for a single element and does not refresh for subsequent clicks. Even though the set class is not being removed ...

cssreactjsreact-nativereact-reduxmaterial-ui

Guide on keeping a footer anchored at the bottom of a webpage

I have gone through numerous tutorials on how to position the footer at the bottom of my webpage, but I'm still struggling to accomplish it for my own site. Some of the resources I've consulted include: Understanding techniques to keep the fo ...

htmlcssfooter

Ways to eliminate / refresh locomotive scroll when resizing the window?

I am currently working on a website that is designed with a horizontal layout for desktop screens, but switches to a vertical layout for smaller screens. I have implemented locomotive scroll successfully, but I am facing issues with window resizing. Below ...

javascripthtmljquerycsslocomotive-scroll

The background images aren't tiling properly on mobile safari

Having a peculiar issue with Mobile Safari. Background images on some divs are not reaching all the way across the page, stopping just before halfway. Interestingly, they display properly in Safari on both PC and Mac. You can view the site online at: www. ...

cssiosmobilesafari

Is there a way to enable horizontal scrolling exclusively for a row of images, displaying overflow, without affecting the horizontal scrolling of the rest of the page?

I am working on a page layout where the body is 960px wide and I want to have a row of images overflow out of the right side of the page, with the ability to horizontally scroll to see the rest of the images. The challenge I'm facing is getting the ov ...

htmlcssscrolloverflow

css readonly input textbox not changing background color when set

I've come across an old Classic ASP form that requires additional functionality, and I'm currently using IE11. To address this, I decided to include a doctype like so (even though I'm unsure of its necessity): <!DOCTYPE html> In my C ...

htmlcssreadonly-attribute

Trouble with CSS modules when using Webpack, Typescript, and React?

I've been experimenting with React by converting a webpage I originally created using plain HTML and CSS. Currently, I'm dabbling with CSS modules, but it seems like some of the injected CSS within <style> tags is not quite right: image. Su ...

javascriptcssreactjstypescriptwebpack

Guidelines for dynamically passing HTML attribute values into a CSS selector using a variable in Protractor

After successfully locating the button on the row using its value stored in the "title" HTML attribute, I am now faced with the task of passing a dynamic value to this attribute. To achieve this, I have declared it as a variable. However, I am unsure about ...

cssprotractor

How to solve the issue of the loading graphic moving from left to center on the page in the Infinite Scroll jQuery Plugin?

While using the Infinite Scroll jQuery Plugin by Paul Irish, I have observed that every time new content is loaded onto the page, a loading graphic in the form of HTML markup is appended into the DOM: <div id="infscr-loading" style="display: none; widt ...

jqueryhtmlcssinfinite-loop

clicking on links to different sections of the page does not automatically bring you to the top of

I am working on a design similar to this: http://jsfiddle.net/MTWu5/ The layout consists of a centered page with a sticky header. The header contains menu links that lead to anchors within the page. My issue arises when clicking on these links - I would l ...

htmlcss

Steps to include a dynamic CSS class to a hyperlink within WordPress

Is there a way to apply an active CSS class to a link in Wordpress so that the active menu item will display a different color when the link is visited? <ul> <li class=""><a href="/news">News</a></li> <li class="dev ...

javascriptphphtmlcsswordpress