Question marks instead of font-awesome symbols

Currently, I am utilizing font-awesome (sass version - Link) on my asp.net website.

The issue I am facing is that all fonts are showing up as ?

I have thoroughly checked the font path and the CSS class, but everything appears to be correct

Below is the snippet of my HTML:

<i class="fa fa-magic"></i>

Upon inspecting the page with Firebug, I can see fontawesome-webfont.woff being loaded correctly

Due to the use of bundleTransformer for rendering all sass files, the folder structure is quite complex

Within the folder structure:

Style
- fonts
  - font-awesome
- Sass
  - External
    - font-awesome
      - font-awesome

The bottom level font-awesome folder contains all font-awesome .scss files

In the _variables.scss file, the path is defined as:

$fa-font-path: if($fa-sass-asset-helper, "font-awesome/", "fonts/font-awesome/") !default;

The upper font-awesome folder includes _font-awesome.scss which imports all .scss files

The external folder contains __external.scss with the following code:

@import "font-awesome/font-awesome";

Within the sass folder, my application.scss file contains the following imports:

@import "Base/placeholders";
@import "Base/mixins";
@import "Pages/__pages";
@import "Modules/__modules";
@import "External/__external";

Finally, the style is rendered using the following bundle:

var commonStylesBundle = new CustomStyleBundle("~/Style/tema");
        commonStylesBundle.Include("~/Style/Sass/application.scss");
        commonStylesBundle.Orderer = nullOrderer;
        commonStylesBundle.Transforms.Add(new CssMinify());
        bundles.Add(commonStylesBundle);

and added to the masterpage in the head section:

<%# Styles.Render("~/Style/tema") %>

The page is looking for the file in the path:

/Style/fonts/font-awesome/fontawesome-webfont.woff

and it is able to find it

I have tried using BootstrapCDN by MaxCDN and it works well, but unfortunately, I cannot use it as our users can only access the local network and cannot use internet resources

Answer №1

Upon further investigation, I discovered that a modification made to AjaxControlToolkit MaskedEdit by another developer had changed the default encoding.

Restoring it to UTF-8 resolved the issue.

Special thanks to @cimmanon for sharing the link where I learned about character encoding.

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

jQuery not functioning properly when included in a separate JavaScript file

I'm facing an issue with my jquery code not working properly when I place it in a separate js file instead of embedding it directly into the html. Currently, my setup looks like this: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3 ...

Reveal Visual Content upon Hovering

Is there a way to show an image only when the mouse hovers over it? Additionally, can we underline the adjacent text at the same time? If the mouse moves away from the image, I'd like it to hide again and revert the text back to its original state. T ...

What is the method to enable both text and numbers in an input field while restricting special characters?

Is it possible to allow both text and numbers but disallow special characters in this input field? Currently, my code only allows numbers. How can I modify it to also allow text? Is it possible to achieve this using JavaScript? http://jsfiddle.net/mhgv0 ...

JQuery error: Unsupported property or method for converting to lowercase

I've been grappling with this issue for the past week. Here's the scenario: I've been tasked with transitioning a SharePoint application out of SharePoint and into its own website. With our current SharePoint version being 2007, an upgrade ...

CSS universal selector not applying to images

I have scoured through different resources and they all seem to echo the same information. Here is the code in question: *:not(img) { display: none; } Its intended purpose is to hide everything on the page except images. However, it seems to be hiding t ...

How can you center a left floated div?

I am seeking to showcase a series of images in a horizontal layout on my page. Beneath each image, there are several links that need to be grouped together within a container. So far, I have tried placing them in floating divs, which align them to the lef ...

Get rid of any empty space in the image preview icon

Is there a way to eliminate the white space that appears when mixing landscape and portrait images? I want the images to move up and fill the space, even if they don't align perfectly. Additionally, I would like the images to resize based on the scal ...

Is it possible to target a specific element within one of two classes that share the same name using CSS or XPath in Webdriver.IO?

Currently, I am using Webdriver.io and facing a challenge in selecting an element within the "text-fields-container" class. This particular element happens to be a password field, and both classes share the same name. Can someone guide me on how to go abou ...

Highlight the phrase "figure x" within the paragraph to emphasize its importance

I want to emphasize figure 1, figure2, ...all the way up to figure 111. I am limited to making changes in HTML and CSS only, without using JavaScript or jQuery. Is there a different method than just inserting <strong> in the HTML? In CSS, we have : ...

"Adjusting the margin for dropdowns in a Bootstrap navbar

Is there a way to customize the alignment of the bootstrap navbar drop-down? Currently, the drop down menu always starts from the right corner. I would like to set a specific starting point for the drop-down. You can view an example in this Fiddle. When ...

How to dynamically adjust font size using Javascript

Is there a way to adjust the font size of the left-column using JavaScript? <div id="left-column"> <a href="">1</a><br> <a href="">2</a><br> <a href="">3</a><br> <a href=""> ...

How to Customize the Drawer Color in Material-UI v5

I'm currently using MUI v5 in my project and I am encountering some challenges while attempting to style a Drawer component with a black background color. As this update is relatively new, I have not been able to find much information on customizing t ...

Sending JSON data with an ASP.NET Post request

My task involves connecting to a server via Json request. The server admin specified that an https server needs to be installed. I purchased and installed an SSL on my server as per the requirements. However, each time I attempt to make a request, I encou ...

Make sure to verify if the mode in Angular is either visible-print or hidden-print

Here is a snippet of code <div class="row"> <div class="col-sm-12 visible-print"> Content (display in full width when printed) </div> <div class="col-sm-6 hidden-print"> Content (same as above but only half width when ...

The Bootstrap column class is malfunctioning

Recently, I've been diving into the world of web development. I attempted to create three divs in one row using Bootstrap col class, but unfortunately it didn't turn out as expected. Two divs ended up in a row with some blank space, while the thi ...

Ways to retrieve element(s) and delete a specific class located in the DOM structure

This is my first time using stackoverflow and posting a question here! :] Can someone guide me on the best way to write JQuery code for this particular task? Task: My goal is to remove the 'active' CLASS from a nav element when it is active: ...

Safari is truncating the box-shadow of an element enclosed within a button

I'm struggling with a button that has an element inside receiving a box-shadow: button { padding: 0; border: 0; margin: 0; overflow: visible; -webkit-appearance: none; background: white; } .shadow { display: inline-block; vertical- ...

Having difficulty disassociating the radio button from the label

<div class="questions" style="font-size:13pt;margin-left:20px;margin-bottom:10px;"> <p class="question" id="ques{{i+1}}" style="font-size:17pt;font-weight:normal">{{i+1+". "+a.question}}</p> <img *ngIf="isImage[i]" [src]="a.image" ...

What is the best way to ensure that all components within a Container automatically inherit its calculated width?

Check out my tab panel setup on Sencha fiddle. The buttons are dynamically added to a tabs container with a layout of hbox within a vbox. The width of the tabs container is determined by the flex property. I attempted to set each button's width to &a ...

What could be causing my Time Picker MUI to malfunction in my React project?

I am currently working on a React and Rails project where I am attempting to style my React components. However, I have encountered an issue with the MUI component Time and Date picker. Whenever I try to implement the time picker, I get a strange error reg ...