Utilizing Ant Design Icons without an Internet Connection

In my current project, a reactJS application utilizing ant design for the UI was recently deployed to production on locked down computers. These computers lack internet access, causing ant design icons on modals to appear as empty boxes. Upon investigation, I discovered that the icons are using CSS classes.

For instance, the CSS class for the red error "X" on the error modal is as follows:

.anticon-cross-circle:before
{
   content:"\E62E"
}

Being unfamiliar with the CSS content attribute, I visited www.w3schools.com to learn more and experimented with the content value on their Try It page, obtaining the same empty box result experienced in our production environment.

I am seeking advice on how to import these icons into our project so they can be utilized offline. Any insights or tips would be greatly appreciated.

Thank you.

Answer №1

It appears that Ant Design is linking to font definitions in the CSS, causing issues when the computers are offline and unable to locate those fonts.

The documentation mentions that SVG Icons are also available, which should function without an internet connection. I recommend giving this a try by following the implementation steps outlined here: https://ant.design/components/icon/#SVG-icons

Answer №3

To incorporate tabler icons into your project, make sure to include the css file tabler-icons.css and the woff file tabler-icons.woff. Then, within your style.css, define a font-family called tabler-icons using @font-face.

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

ReactJS encountered an error: Uncaught RangeError due to exceeding maximum call stack size

I am currently following a tutorial on YouTube to create my own contact manager app: Link to the Youtube video However, I keep encountering an error whenever I try to add new contacts. Here is a screenshot of the error: Screenshot of the error Additiona ...

What could be causing me to see a basic checkbox instead of a toggle switch in my React application?

I've been attempting to create a toggle switch that activates dark mode using Bootstrap switches, but when I save the code, it reverts back to a basic checkbox. According to the documentation, for older assistive technologies, these switch elements wi ...

Utilizing Angular and the Kendo UI framework to customize the dimensions of a Kendo window

Is there a way to dynamically set the height and width of the kendo window based on the content of the kendo grid? Below is the code snippet for my kendo-window: <div kendo-window="Operation.OperCustWind" k-width="800" k-height="700" ...

Error message: The function r is not defined - Issue with Google Sign in on React app

I have successfully implemented Google Sign In for my react app during development, but I am facing an issue with it in the production environment. The npm module that I am using for Google authentication is available at https://www.npmjs.com/package/reac ...

JQuery's attempt to disable the 'hover' feature fails to function as intended

I have a styled table where rows change background colors based on odd and even indexes, with a hover effect included. However, I want to disable the hover effect when a row is selected. Here's the current code snippet: .odd{ background: #f7f7f7 ...

I attempted to copy the "koa" module from my node_modules folder to a custom typeRoots directory, but it doesn

I want to use Ant Design UI, and I hope to import the script tag with the .min.js label, like this: <script src="//cdn.staticfile.org/react/15.4.1/react.min.js"></script> <script src="//cdn.staticfile.org/react/15.4.1/react-with-addons.min. ...

Press a single button to toggle between displaying and hiding the table

$(document).ready(function() { $("#t1").hide(); // hide table by default $('#sp1').on('click', function() { $("#t1").show(); }); $('#close').on('click', function() { $("#t1").hide(); }); }); <li ...

hover-triggered keyframe animation

Recently, I've been experimenting with CSS keyframe animation using the code below: .pulse-animation { margin: 50px; display: block; width: 52px; height: 52px; border-radius: 50%; background: #ff8717; cursor: pointer; animation: pul ...

Tips on incorporating a fresh item into a expansive tree view using a recurring function or action - specifically geared towards the MUI React JS Tree View component

I am looking to implement a function or action that allows for the dynamic addition of new items to a tree view in MUI. The goal is to be able to click on a tree item and have it add another item, repeating this process as needed. <TreeView ...

The Cloudinary Widget is not displaying properly in the 'next-cloudinary' module for Next.js 13 (using the app router)

I am having trouble uploading a video using the Cloudinary widget as it keeps showing a loading screen for several minutes The current state of the Cloudinary widget can be seen here: UploadVideoModal.tsx "use client"; import { useCallback, u ...

Including the HTML Doctype to center child elements within the <td> tags specifically for Internet Explorer

This issue seems to be isolated to Internet Explorer. I have conducted tests using IE7, IE8, and IE9. Interestingly, when I remove the html doctype, the td tags are aligned to the left. However, upon adding any standard HTML4 or 5 tags, the text and input ...

Discover the name of a color using its HEX code or RGB values

Is there a way to retrieve the color name from RBG or HEX code using JavaScript or JQuery? Take for instance: Color Name RGB black #000000 white #FFFFFF red #FF0000 green #008000 ...

What is the best way to center and personalize slider arrow placements vertically?

I applied CSS to customize the appearance of the previous and next arrows for .customer-logos, but I'm still seeing the default button style along with my changes. How can I resolve this issue and position the buttons on either side of the slider inst ...

Is it possible to apply styles to javascript elements without relying on img class? Additionally, how can I incorporate an onclick button while maintaining a fully functional navigation bar?

My current project involves creating an interactive collage where users can click around and have pictures pop up at the clicked location. The functionality works as intended, but now I'm facing issues with the navigation bar not being clickable. Addi ...

What is the best way to fill in the jquery treeselect widget?

I'm struggling with populating the jquery treeselect widget using a json file or any other method. Since I am new to jquery/javascript, I'm sure I must be missing some basics. Although I have obtained the plugin from https://github.com/travist/j ...

Issue with Dismissing Material UI Snackbar

Having trouble dismissing the snackbar by clicking away or on the "X" button. It's supposed to disappear after 10 seconds but it just stays there! Not sure what I'm doing wrong. const Footer = () => { const [snackbarState, setSnackbarState] = ...

What is the best way to add color to a Table Header?

I'm working on a HTML/CSS table and I want the header row to have a specific background color. Below is my code: <table class="contentTable"> <tr class="contentTableHeader"> <th>No.< ...

Generate a dynamic image using CSS and either a div or a span tag

My image is intricately carved into several slices. You can view it here <!--Force IE6 into quirks mode with this comment tag--> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.d ...

Issue with Input[type="search"] functioning properly on Internet Explorer versions 9 and earlier

input[type="search"] doesn't seem to be functioning properly on IE9 and below. Any ideas on how to fix it would be greatly appreciated. Here is a screenshot for reference: .search-form .row input[type="search"] { color:#9fa0a0; font-size:20 ...

Achieving Perfect Vertical Alignment in Bootstrap 4 Grid Cells

I am currently working on an admin page that involves querying and reporting on the page weights of key pages on a website, such as landing pages. Bootstrap 4 is in the pipeline, and I have utilized it to design a layout that I am satisfied with. However, ...