Font awesome icons may experience issues with display in the most recent version of Google Chrome, 32.0.1700.76 m

After updating to the latest version of Google Chrome, I immediately noticed that some of the font-awesome icons were not displaying correctly. Instead, all I could see was a square box. Even after the entire page had loaded and waiting for a minute, the issue persisted. It wasn't until I hovered over the icons that they finally appeared.

If you want to see this problem for yourself, simply visit this URL:

Has anyone else experienced this issue? I believe it affects all users with the new browser version. Interestingly, one day all the icons show up fine, but the next day, some are missing. Could it be a timing-related problem? I suspect my slow internet connection might also be a factor.

htmlcssgoogle-chromefont-awesome

Answer №1

After investigating further, it appears that the issue is related to certain chrome extensions. Personally, I resolved the problem by disabling Adblock Plus and as a result, all icons are now visible.

Answer №2

It appears there is a glitch when using Chrome on a Windows computer. Try rearranging the font formats in your @font-face declaration so that WOFF comes before TTF and SVG.

SVG fonts tend to display more efficiently in browsers that are compatible with them. It is recommended to prioritize them at the beginning of your list.

Answer №3

Some browsers and devices were displaying icons while others weren't. After rearranging the markup, making sure that each i tag had the proper fa fa-* classes, and verifying that html5shiv.js was included at the end of the DOM, I decided to switch to using the CDN for the CSS - which ended up solving the issue. This update took me from version 4.1 to 4.2.

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">

Answer №4

To resolve the problem with icons, you may insert the provided code snippet into either the .htaccess file or index.php file.

<FilesMatch ".(ttf|otf|woff)$">
    Header set Access-Control-Allow-Origin "*"
</FilesMatch>

Answer №5

location !crucial

[class^="mi-"], [class*=" mi-"] {
    font-style: regular;
    font-family: base-icons !crucial;
    -webkit-font-smoothing: anti-scratch;
}

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

Are you utilizing Google Chrome extensions for importing and exporting JSON files?

Currently, I am in the process of developing a Google Chrome extension and I have a question regarding its capabilities. Is it possible for the extension to generate JSON files for users to download (export) as well as implementing a button that allows use ...

javascriptjsongoogle-chromegoogle-chrome-extensiongoogle-chrome-app

Switching between various quantities of inputs in each row using Bootstrap V3

My Bootstrap V3 form has a mix of rows with two inputs and rows with one input, as per the designer's request. Check out my fiddle here: https://jsfiddle.net/06qk4wh4/ <div class="form-group col-sm-12"> <label class="control-label col- ...

htmlcsstwitter-bootstrap

Attempting to zoom in when hovering over the circular image causes it to spill out of the container

Can someone help me figure out why my circular image isn't zooming when hovered? I've tried adding CSS properties, but the image keeps overflowing the container. What am I missing here? See the code snippet below. .col-lg-4.col-md-6.p-4{ ove ...

htmlcssimagebootstrap-4

Problem encountered when trying to show the Jquery Ajax response on an HTML page

I'm facing a challenge with loading a page that needs to display values with dynamic pagination. To retrieve these values, I am making a REST call which returns a JSON object. Although I can see the JSON output in the browser console, I am unable to d ...

javascriptjqueryhtmljsonajax

Encountering difficulty extracting information from JSON file within AngularJS factory

I am struggling with a Json file named discover.json located at json-files/discover.json {"data": [ {"username": "aky123", "name": "ajay"}, {"username": "sky123", "name": "sanjay"} ]} Below is my factory setup: var myAppServices=a ...

javascriptangularjsjsonhtml

Activate a CSS class on click using JavaScript

Having a bit of trouble as a beginner with this. Any help would be much appreciated. This is the code in question: HTML: <div class='zone11'> <div class='book11'> <div class='cover11'></d ...

javascriptjquerycssanimationonclick

Querying with jQuery to Retrieve HTML from Elements with the Same Class

Greetings Everyone! Please take a look at my code... <font class="detDesc" > Uploaded 07-11&nbsp;2012, Size 105.79&nbsp;MiB, ULed by <a class="detDesc" href="/somelink" title="somelink title">somelink</a> </font> ...

javascriptjqueryhtmlcss

The data type "100%" cannot be assigned to a number type in the kendo-grid-column

I need the columns in the grid to have a width of 100%. <kendo-grid-column field="id" title="id" [width]="'100%'"> </kendo-grid-column> However, when I hover over the code, I get this message: The value "100%" cannot be ...

csskendo-uikendo-ui-angular2

Nested divs in HTML

Why is the width and height of the div set to 0 when the display property is set to inline? <html> <head> <style> .c { width: 300px; height: 50px; margin:0px; padding:0px; } #a { display:inline;padding:0px; m ...

htmlcss

I'm having trouble inserting my object into the scene: THREE.Object3D.add: the item is not a valid instance of THREE.Object3D

Recently, I started using three.js. Initially, I utilized a JSON file for my 3D model but encountered issues when exporting it from Blender. To resolve this, I decided to switch to obj files. Although the new obj model is working fine, I am struggling with ...

javascripthtmlthree.jsobjloader

Is it possible to use a hashtag and exclamation mark in URLs as a folder designation?

Can anyone guide me on how to make my pages look similar to the ones on Grooveshark, like this example: ? I'm looking for a tutorial or resources on implementing this layout using jQuery or JavaScript. ...

javascriptjqueryajaxhtml

The issue with implementing simple getElementsByClassName JavaScript in the footer of a WordPress site persists

I am facing an issue with a 1-liner JavaScript code in the footer where getElementsByClassName function doesn't seem to work for tweaking style attributes. The text "Hello World" is displaying fine, so I suspect it might be a syntax error? Here' ...

javascripthtmlwordpress

Tips for enabling scrolling on the correct floating menu when there is overflow

I have been attempting to make the right floating menu scroll when overflowing, but so far, I have been unsuccessful. Here is the link to the JSFiddle demonstrating the issue: https://jsfiddle.net/xuwtqmj3/. .menu { position: fixed; float: right; ...

htmlcss

The best practices for utilizing both Id and class within a single HTML element

Below you'll find a snippet of code: <form> <div class="form-group"> <label for="inputEmail">Email</label> <input type="email" class="form-control" id="inputEmail" placeholder="Email"> </div> <div ...

htmlcssbootstrap-4

When attempting to run this straightforward PHP code that is meant to display an image selected from a specific directory, I am encountering an issue where the image appears torn and does not accurately display the intended

When I try to run this simple PHP code that displays an image chosen from a directory, the output is showing a torn image instead of the actual image. I have tested this on multiple browsers, but the issue persists. Here is a snippet of the code: <html ...

phphtmlimagedisplay

Tips for concealing elements beyond div boundaries

First and foremost, I want to mention that my focus is on studying frontend development, so I could really use some assistance with a task. I am looking to create a tab slider where the content on the left and right will flank it, ensuring the tab slider ...

htmlcsshide

javascript conceal a div when clicked elsewhere

I am trying to implement two JavaScript functions: 1) Displaying a DIV (welcomeDiv) when clicking on a button; 2) Hiding the div by clicking outside of 'welcomeDiv' container. function showDiv() { document.getElementById('welcomeDi ...

javascripthtmlcss

Resizing an image within an anchor tag

Currently, I am working on styling a page in NextJS. The challenge I'm facing is resizing an image that is inside an anchor within a div. Despite numerous attempts, the image refuses to resize as desired. I've experimented with applying properti ...

cssnext.js

Position the center button evenly between two images, aligned vertically using percentages

I'm attempting to achieve a specific layout that includes images scaling across Bootstrap breakpoints and a static button position. The challenge is maintaining the layout as depicted in the mockup, regardless of image size. The images are set to im ...

htmlcsstwitter-bootstrapbootstrap-4

[innerText]: Text containing opening angle bracket

Can anyone explain why Angular [innerHtml] is removing text that comes after the left angle bracket? I encountered an issue with a line of HTML content, like so: text1 <text2 <a>link</a> Instead of displaying the content as is, it shows: ...

htmlangulartypescript