Font Awesome not working, icons showing as squares

Tips on class usage and overriding CSS

Version-specific class usage

Font Awesome 5 brought about a considerable change; it transitioned from the "fa" prefix to the "fas" for solid icons and the "fab" for brand icons. Here's an example:

<!-- Correct syntax for Font Awesome 5+ -->
<i class="fas fa-camera"></i> <!-- Say cheese! 📸 -->
<i class="fab fa-twitter"></i> <!-- Tweet all about it! 🐦 -->


Overriding styles

Your own customs CSS or a third-party stylesheet can override crucial Font Awesome styles. Watch out for any !important attached to content styles, as these can override your icons and render them invisible.

.icon::before {
  content: url('custom-image.jpg') !important; /* This is NOT the icon you are looking for 👋 */
}


Proper font path

When self-hosting Font Awesome, update your font paths in your font-awesome.less or sass files to ensure they precisely reflect the location:

// Let's ensure SASS knows where we're at
$fa-font-path: "/path/to/font-awesome/fonts";


Compatibility troubles and workarounds

Humoring older browsers

Internet Explorer 7 might be considered a web relic, but that doesn't imply we can forsake it. Include the specific IE7 CSS file and ensure the font-weight and font-style are properly set in your @font-face:

/* Because Internet Explorer 7 deserves some love too! ❤️ */
@font-face {
    font-family: 'FontAwesome';
    src: url('path-to-font-awesome/fonts/fontawesome-webfont.eot');
    font-weight: normal;
    font-style: normal;
}


Network and CDN issues

Using a CDN means being at the mercy of its reliability. Networks can have issues, and misconfigurations can cause icons to not load.

<!-- Note: the winter of your CDN's discontent can disrupt icon loading -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css">


Version updates

Always use the most recent version of Font Awesome for maximum compatibility and new icon availability (Mandatory if you must flaunt the latest icons 💎).

<!-- Up-to-date, employed and loving the icon life! -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/vx.x.x/css/all.css">


And remember to update any corresponding sass or less variables in line with the new version.

Troubleshooting hints

Validate your HTML

Invalid HTML can often be the culprit, and the W3C Markup Validation Service comes in handy for identifying tags or attributes errors.

Resolving CORS

Occupying yourself with Cross-Origin Resource Sharing (CORS) issues, especially inspecting your server headers may seem a hassle, but it needs to be done. Be on the lookout for Access-Control-Allow-Origin headers that block resources:

# Headers are the real MVPs of web content security
curl -I http://yourdomain.com/path/to/fontawesome/css
