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