Error displaying Font Awesome icons

I am currently facing challenges with managing my assets using webpack. I have installed font-awesome via yarn and imported the .css files into my webpage. However, despite my HTML recognizing the classes from font-awesome.css, the icons I am attempting to use are displaying as squares filled with four numbers (which represent the icon).

Below is my webpack code:

// webpack.config.js

var Encore = require('@symfony/webpack-encore');
const HandlebarsPrecompiler = require('webpack-handlebars-precompiler');

Encore
    .setOutputPath('web/build/')
.setPublicPath('/build')

.addEntry('fonts/glyphicons-halflings-regular.ttf', './node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf')
.addEntry('fonts/glyphicons-halflings-regular.eot', './node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.eot')
.addEntry('fonts/glyphicons-halflings-regular.svg', './node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.svg')
.addEntry('fonts/glyphicons-halflings-regular.woff', './node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.woff')
.addEntry('fonts/glyphicons-halflings-regular.woff2', './node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.woff2')

.addEntry('fonts/font-awesome', './node_modules/components-font-awesome/css/fontawesome.css')
.addEntry('fonts/fontawesome-webfont.eot', './node_modules/font-awesome/fonts/fontawesome-webfont.eot')
.addEntry('fonts/fontawesome-webfont.svg', './node_modules/font-awesome/fonts/fontawesome-webfont.svg')
.addEntry('fonts/fontawesome-webfont.ttf', './node_modules/font-awesome/fonts/fontawesome-webfont.ttf')
.addEntry('fonts/fontawesome-webfont.woff', './node_modules/font-awesome/fonts/fontawesome-webfont.woff')
.addEntry('fonts/fontawesome-webfont.woff2', './node_modules/font-awesome/fonts/fontawesome-webfont.woff2')

.addEntry('css/bootstrap', './node_modules/bootstrap/dist/css/bootstrap.css')
.addEntry('css/bootstrap-theme', './node_modules/bootstrap/dist/css/bootstrap-theme.css')
.addEntry('css/bootstrap-datepicker', './node_modules/bootstrap-datepicker/dist/css/bootstrap-datepicker.css')

.addEntry('css/app', './src/SgbBundle/Resources/public/css/app.css')

module.exports = Encore.getWebpackConfig();

In the inspector, when looking at the rules being applied in HTML content like:

<i class="fa fa-graduation-cap fa-4x" aria-hidden="true" id="icon"></i>

It recognizes the 'fa' class and the 'fa-4x' class but not the 'fa-graduation-cap' class. This causes the icon to display as an empty square. Any help would be appreciated.

csswebpackfont-awesomeyarnpkgsymfony-3.3

Answer №1

After some investigation, I managed to figure out the solution. I mistakenly installed two versions of font-awesome using Yarn add. One was components-font-awesome and the other was simply font-awesome. Upon reviewing my webpack configuration, I realized that I was adding files from both of these dependencies.

.addEntry('fonts/font-awesome', './node_modules/components-font-awesome/css/fontawesome.css')
.addEntry('fonts/fontawesome-webfont.eot', './node_modules/font-awesome/fonts/fontawesome-webfont.eot')

To resolve the issue, I decided to stick with just font-awesome.

.addEntry('fonts/font-awesome', './node_modules/font-awesome/css/fontawesome.css')
.addEntry('fonts/fontawesome-webfont.eot', './node_modules/font-awesome/fonts/fontawesome-webfont.eot')

As a result, I removed 'components-font-awesome' entirely. In retrospect, I had been trying to utilize files from two similar but distinct packages.

Answer №2

fa-graduation-cap is a recent addition to the Font Awesome icon class in version 5.0.0, replacing the previous fa-mortar-board class from version 4.

If you intend to use the v4 name, ensure that you are loading Font Awesome 5 and not version 4. It's unclear from the code provided which version of Font Awesome is being utilized.

To learn more about transitioning from version 4 to version 5 and see a detailed list of icon class changes, visit this link.

If you are still using Font Awesome 4 and need to look up icon names and codes, access the older version at this site. You can also find this link in the footer section of fontawesome.com.

Answer №3

If you're looking to enhance your site with awesome fonts, consider adding them from the Content Delivery Network (CDN). You can find the link below: 

https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

No issues found in the tag.

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

The align-middle Bootstrap class does not seem to be working within the specified div

I want to vertically align text (<span class="align-middle">middle</span>) in the center of a div. Here is the code snippet: <div class="col-4 shadow product-added"> <div class="row"> <div cla ...

htmlcsstwitter-bootstrap

Collapsible Span with Maximum Width in Unique Twitter Bootstrap

UPDATED If I assign a max-width value to the .container element, it disrupts the alignment of my spans. <div class="container" style="max-width:940px"> <div class="row"> <div class="span4" style="background-color:#F00">1</div& ...

htmlcsstwitter-bootstrap

Avoiding the overlap of sub-menu items vertically

My nested unordered list acting as a sub-menu has an issue with overlapping list items. It seems like the padding of the links is causing the overlap: ul { padding: 12px 0; list-style: outside none none; } li { display: inline-block; margin-righ ...

htmlcssdrop-down-menupadding

Expanding Overlays on Mobile Devices

In mobile view, I am looking to make the overlay expand to cover all the content, which consists of 4 rows with 2 cells per row totaling 7 cells. The last row only has one cell. The code I have written works well on desktop view but my need is to have the ...

htmlcssmobilebootstrap-5compatibility

Guide to integrating a static page with personalized CSS and JavaScript resources within a Rails project

Currently, I am developing a simple Rails application (using Rails version 4.1) and I am looking to incorporate a static page into it. The static page is structured as follows: | |- index.html |- css folder |-- (various css files) |- js folder |-- (some j ...

javascripthtmlcssruby-on-railslayout

List arranged in order with a hyperlink in the center and an image positioned on the right side

I am trying to create an ordered list with a link to an article in the middle and a small png image file positioned directly to the right of it. For reference, here is an image depicting the exact type of list that I am aiming to achieve: https://i.stack. ...

htmlcss

Decrease the gap between the <hr> and <div> elements

I currently have multiple div tags with hr tags in between, resulting in automatic spacing. I am looking to decrease this space. Please view the image link provided below for reference. [I am aiming to minimize the gap indicated by the arrow] Additionally ...

htmlcsstextlinespace

Is there a bug with text rotation in CSS 3?

I'm having trouble understanding how text rotation works in CSS3. For example, when I try to rotate text like you can see here, the rotated text never seems to be in the correct location, despite setting properties like: right: 0; bottom: 0; There ...

cssrotationtext-rotation

What does the error message "Uncaught TypeError: Cannot access property 'style' of an undefined object" mean?

I've been attempting to execute the code below, but I keep encountering an error. I even tried including document.addEventListener('DOMContentLoaded', (event) => yet it still doesn't work. Interestingly, there are no errors if I run ...

javascripthtmlcssreactjs

I am experiencing an issue where the left sidebar div is not aligning correctly in my HTML

I am currently facing an issue with a gap that I can't seem to fix right now. Below, you will find a screenshot along with the HTML and CSS code that I have used. Despite trying various methods and looking for solutions on platforms like Youtube and ...

htmlcss

Can the parent element containing this floated div also have text wrapping around it?

Hello there, I've been following along with this tutorial on CSS Positioning to enhance my understanding: . Everything was going smoothly until I reached step 7 and ran into a roadblock. In that step, the text "id = div-1" is supposed to be positioned ...

csscss-floatparent-child

Ways to display a vertical scrollbar within a select box

I'm currently working with an Angular select box and I'm looking to display a scroll bar if there are more than 5 data entries. <select class="form-control" data-ng-model='projectListData.appVersion' ng-selected ng-options="v.versio ...

jqueryangularjshtmlcss

React Fixed Footer Implementation against My Preferences

Here's an issue that I'm facing: https://i.stack.imgur.com/gtQqm.png The footer on my webpage is normally displayed at the bottom of the page. However, when the user performs certain actions that extend the size of the page: https://i.stack.im ...

htmlcssreactjsfooterfixed

Display a div using Jquery when hovering over it with several classes

I want to create a hover effect where div2 fades in slowly when hovering over div1 within the same container. However, my jQuery code doesn't seem to be working as expected... $(".div").hover(function() { $(this).find(".div2").animate({ opac ...

javascriptjqueryhtmlcss

Link not functioning correctly on mobile-responsive CSS

Having some trouble with hyperlinks over a background image. The hyperlinks work fine normally, but in mobile view, nothing happens when clicking on them. Below is the code for the hyperlinks. You can also visit the site and see that the "Post a Project" ...

htmlcssbootstrap-4

Display each div one at a time

I am working on a script that should reveal my divs step by step. However, the current code only shows all the divs at once when clicked. How can I modify it to detect each individual div and unveil them one by one? For example, on the 1st click => expa ...

javascriptjqueryhtmlcss

Enhance the appearance of Google Maps by incorporating gradient effects, box shadows, or other similar visual

How can I add a linear gradient to Google Maps? Below is my code snippet. HTML <div id="map"></div> CSS #map{ height:100vh; background: linear-gradient(90deg, #f7f8fa 0%, rgba(247, 248, 250, 0) 18.73%), linear-gradient(180deg, # ...

htmlcssreactjsvue.jsgoogle-maps

Concealing and revealing elements through css styling

In my journey to learn HTML, CSS, and PHP, I took some online courses to gain knowledge. Now, I am venturing into creating a site using Wordpress to further enhance my skills through practical experience. Recently, I created a page with a custom video fie ...

csswordpress

The application experiences crashes when the tablet is rotated, happening while in the development stage

For my web-based Android application project, I am utilizing PhoneGap and Eclipse IDE on a Windows platform. My focus is specifically on Tablet development, more precisely on the Samsung Galaxy Tab 10.1. To develop, I use Eclipse and test the app on the ...

javascriptandroidhtmlcsscordova

Achieving nested classes in CSS: a comprehensive guide

I am encountering an issue with my CSS while trying to create a dropdown on hover. The problem seems to be related to nested classes inside a div structure. It appears that the dropdown list is not displaying properly, leading me to believe there might be ...

htmlcss