Shrink Font-Awesome icon sizes using a Node.js and Express.js web application

Currently, I am in the process of developing a website using node.js + express.js and implementing font-awesome for icons.

The local hosting of Font-awesome has resulted in a 1.2 MB JS file [font-awesome.js], even though we are only utilizing 10-15 icons. I am looking to reduce the size of this file.

Option that makes sense to me:

Upon inspecting the JS file, I noticed an array named icons containing SVG content for all icons. By removing unnecessary icons from this array, I can decrease the file size. However, this method may be inconvenient if I need to use additional icons in the future.

Option that I find confusing:

I came across the [svc-javascript-core] package (https://fontawesome.com/how-to-use/on-the-web/advanced/svg-javascript-core) which allows the creation of customized subsets of icons. It also mentions the use of deep-imports for systems without tree-shaking capabilities (https://fontawesome.com/how-to-use/javascript-api/other/tree-shaking).

However, I have some concerns:

  • Will this result in generating a new JS file with only the required subset of icons (or do I need to write code for this)?
  • How will this impact the integration of font-awesome in my web pages?

Your insights on this matter would be greatly appreciated.

Answer №1

Utilize the Subsetter App for Font Awesome to specifically select the icons needed for your website.

To address your second inquiry: there will be no alteration in the way you incorporate Font Awesome, other than updating your subset whenever new icons are required.

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

Unexpected behavior of ion-select: No rendering of selected value when applied to filtered data

I came across an unexpected issue with the dynamic data filtering feature of ion-select. In my application, users are required to choose three unique security questions during registration. I have an array of available questions: questions: Array<{isSe ...

Performing a targeted ajax request to retrieve a set of data

Is it possible to create a collection using a specific ajax call instead of fetching by its URL? Normally, when fetching by a collection, the URL in the collection is used. However, I need to retrieve results from an ajax call rather than the URL. $.ajax( ...

NextAuth: JWT callback that returns an object

I've been working on a project using Next.js (11.1.2) + NextAuth (^4.0.5) + Strapi(3.6.8). The Next Auth credentials provider is functioning correctly. However, I need to access certain user information using the session. I attempted to do this by ut ...

Guide on integrating react-tether with react-dom createPortal for custom styling of tethered components based on their target components

Within a Component, I am rendering buttons each with its own tooltip. The challenge is to make the tooltip appear upon hovering over the button since the tooltip may contain more than just text and cannot be solely created with CSS. The solution involves ...

The attempt to run 'setProperty' on 'CSSStyleDeclaration' was unsuccessful as these styles are precalculated, rendering the 'opacity' property unchangeable

I am attempting to change the value of a property in my pseudo element CSS class using a JavaScript file. Unfortunately, I keep encountering the error mentioned in the title. Is there any other method that can be used to achieve this? CSS Code: .list { ...

Issue with node-gyp on Windows: setup error

Currently facing issues with installing the bcrypt package for node due to conflicts with node-gyp. Have "Visual Studio Build Tools 2017" installed in C:\Program Files (x86)\Microsoft Visual Studio\2017\BuildTools, along with Python 2. ...

Overriding makeStyles CSS in Material UI Styling

When creating classes using makeStyles and useClasses, I've noticed that MUI CSS tends to take precedence over my custom styles unless I use the '!important' rule. Is there a way to override MUI styles without having to rely on '!import ...

The directive binding value is accurate, however it is failing to return a true result

The behavior of a custom directive is puzzling me. When I directly pass in a value, it works fine. However, if I bind the value to a variable, it doesn't work as expected. Interestingly, when I use console.log to show the value, it appears to be corre ...

Is there a way to position the logo icons on the right side of the footer?

My goal is to connect social media platforms with their respective logos, and I'm encountering an issue. The problem arises when attempting to align the list items to the right of the footer. <footer> <div class="footer-wrapper"> ...

What is the solution to preventing borders from appearing on input tags when they are autocompleted

Recently, I encountered an issue while working on a website form where the input tag was showing borders during autocompletion, despite specifying border:none. I tried various CSS pseudo classes to resolve this problem but none of them worked. Does anyon ...

Is it possible to set a read-only attribute using getElementByName method

To make a text field "readonly" by placing JavaScript code inside an external JS file, the HTML page cannot be directly modified because it is located on a remote server. However, interaction can be done by adding code in an external JS file hosted on a pe ...

Problem with accessing state in React 16

In my code snippet below, I am encountering an issue. When the button is clicked and 'streaming' appears on the UI, the console.log within the 'process' function displays false. Can you help me identify what might be causing this discre ...

The mysterious Vue.js and Nuxt.js custom element

Encountering an issue https://i.sstatic.net/imRbe.png Seeking assistance with identifying my mistake. Attempting to create reusable components, starting with a button for example. I have created it in the file path: /components/MusicPlayer.vue: <temp ...

Utilizing jQuery to access Flash functions

When trying to access functions in my SWF using jQuery code, I encounter a compatibility issue with Internet Explorer. The code works fine in all other browsers except for IE. As jQuery is supposed to provide cross-browser functionality, writing addition ...

Mapping an array using getServerSideProps in NextJS - the ultimate guide!

I'm facing an issue while trying to utilize data fetched from the Twitch API in order to generate a list of streamers. However, when attempting to map the props obtained from getServerSideProps, I end up with a blank page. Interestingly, upon using co ...

Error in ReactJS: Trying to access property 'items' of an undefined object

I've been diving into ReactJS, but I've hit a roadblock with this perplexing error. My goal is to update the parent's items array state from its child component. To achieve this, I attempted to pass the addItem function as a prop to the chi ...

Express.js route not being properly handled in post request

This is the structure of my folders: I am attempting to create a python script that receives input from an HTML file and displays its output in the HTML. Below is the jQuery script in my HTML: <script src="https://code.jquery.com/jquery-3.6.0.min ...

Troubleshoot and resolve the issue of a page scroll freeze bug occurring while scrolling through an overflowed

My webpage features a Hero section with 2 columns - the left column contains a gallery slider, and the right column consists of 2 text blocks. The challenge here is that the right column needs to be 100% of the screen height while scrolling. To achieve thi ...

Launching NodeJs application on port 80 of an Amazon Linux server

I'm facing a challenge in running my NodeJs application on an Amazon Linux server using port 80. The app is currently defaulting to port 1024 when I try to run it. I know that this is because port 80 requires root access to run, but as I am on an AWS ...

Designing a dynamic patterned backdrop that seamlessly extends for a column in bootstrap

Experiencing some difficulties with Bootstrap and creating a resizable column background. In one row, there is a column with a fluid image at the top, another column below it with a CSS class that gives it a repeating background along the Y axis, and fina ...