I'm working on an ASp/net application and i use font-awesome for some icons.
My problem is that icons doesn't appears. I have the last verison of font awesome
here is my code in my nested master:
<li class="active"><asp:HyperLink ID="lnkAccueil" runat="server" NavigateUrl ="~/Views/Accueil.aspx" Title="Accueil"><i class="fa fa-home"></i> </asp:HyperLink></li>
I call my file in my master:
<link href="~/Content/Styles/font-awesome.min.css" rel="stylesheet"/>
and the path is correct.
And here you have the result:
this is the console
I do the same in another project and everything works. I really don't unterstand.
If someone has an answer..
Related
I'm using assan template
to build my laravel project. Everything is fine but the font awesome wont show up. then I'm using this link to fix it:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/v4-shims.css">
after that, font awesome showed successfully, but the icons not. Here is the code where i put my icon:
<i class='icon-pictures fa-3x mb20 text-primary'></i>
I'm pretty sure that i've already include all java script and css to my project. but I don't know why this happen. is there something i can do or maybe i missed something?
The method for displaying an icon is that you have to use "fas fa-" following with which icon you want.
In the <i> class add fas fa- and the icon name after the -, This will display the icon.
After spending hours going around in circles. I've reached a level of frustration where I need an outside perspective.
See this code here and how it produces exactly what should be expected.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<p class="fa fa-check-circle fa_custom"> Verified</p>
<i class="fa fa-check"></i>
Then if I enter this code within a Shopify liquid file.
The output is this:
Why isn't one of the icons showing?
I've made this demonstration to highlight my problem. I'm experiencing this with a few other font awesome icons as well. I'm designing pages in HTML / CSS in sublime. Then when I take this code into a Shopify store. The icons can't be seen. I've replicated this problem in multiple stores.
It's very strange. Can someone please help me.
You have the first icon inside a p-statement.
Maybe one of your CSS-files is changing the font.
Tried this one?
<i class="fa fa-check-circle fa_custom"></i> Verified <i class="fa fa-check"></i>
I am using font-awesome with Angular 5 for my UI. Since I am using sass, I added the following line in .angular-cli.json after installing font-awesome
"styles": [
"../node_modules/font-awesome/scss/font-awesome.scss",
"../node_modules/bootstrap/scss/bootstrap.scss",
"styles.scss"
],
Some of the icons works such as
<i class="fa fa-money blue-text"></i>
<i class="fa fa-code blue-text"></i>
However a lot more does not. For example, I wanted to use this bar chart icon with fas fa-chart-bar, but it does not show anything. Things like fas fa-camera-retro only shows as a weird square instead of the actual icon.
Why some of the icons don't work? Is there way to check if these css classes exist in the font-awesome package I installed?
EDIT
Just searched bar chart in node_modules\font-awesome\css\font-awesome.css and only fa-bar-chart exists, not fa-chart-bar. I have the latest font-awesome when I had it installed (4.7.0). Why does their website says fa-chart-bar. Just got it to work with fa fa-bar-chart. Why it is fa and not fas is beyond me
Just searched bar chart in
node_modules\font-awesome\css\font-awesome.css and only fa-bar-chart
exists, not fa-chart-bar. I have the latest font-awesome when I had it
installed (4.7.0). Why does their website says fa-chart-bar. Just got
it to work with fa fa-bar-chart. Why it is fa and not fas is beyond me
That was changed with the release of FA5, because now there are multiple styles for the icons:
fas: FontAwesome solid
far: FontAwesome regular
fab: FontAwesome brands
fal: FontAwesome light
However, FontAwesome5 free has solid only for most icons. For the full experience, you'd have to pay for FontAwesome Pro.
Select any icon in the gallery, to see wich styles are available for it in which release. NB: FA4-icons here.
Worked for me after upgrading to the latest version of Font Awesome:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
You may not use the V5-release of FontAwesome. Just use the latest version of FontAwesome 4, it should work. Use this link
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
I had the same issue. The search page for icons I found with Google was outdated. Make sure you are searching on the last version of the site.
Like you, I found this icon :
<i class="fa fa-line-chart"></I>
It was not working. If you search on the website, you will see it is :
<i class="fas fa-chart-line"></i>
I had to do this one time. I think some mobile devices didn't load one of the fonts:
font-family: "Font Awesome 5 Free", "FontAwesome";
the syntax that worked for me is fas fa-chart-bar https://fontawesome.com/icons/chart-bar?style=solid
this is with the following versions:
bootstrap/4.4.1/css/bootstrap.min.css
font-awesome/4.7.0/css/font-awesome.min.css
This question already has answers here:
How to use 3rd party CSS libraries such as Font Awesome with JSF? Browser can't find font files referenced in the CSS file
(5 answers)
Closed 7 years ago.
I would like to use font awesome within my jsf app, but unfortunately it seems, that some icons are not displayed.
Instead of the icon I just could see a square symbol.
My jsf page look like this:
<div class="centerbox" style="bottom: 5mm; top: 5mm;">
<i class="fa fa-chain fa-5x"></i>
<i class="fa fa-wheelchair fa-5x"></i>
<h:outputLabel value="#{msg.systemNotAvailable}" />
<h:outputText value="Allocation"/>
</div>
I included the css file as follows:
<h:outputStylesheet name="font-awesome.css" library="css" media="screen"/>
The strangs thing is, that the fa-chain icon is displayed correct, but the wheelchair icon not.
When I look into the html and change the code of the icon, it seems that there are a couple of icons not working.
I tried this with the lated version 4.4.0
Does anybody else face this problem or can give me a hint how to fix?
You can always use the live css from MaxCDN, example:
http://jsfiddle.net/web_nfo/zfdgna5w/
https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css
( Source: https://fortawesome.github.io/Font-Awesome/get-started/#bootstrapcdn )
Maybe the font files (fontawesome-webfont.eot, fontawesome-webfont.woff2, etc) are not loaded properly. In the css there are some relative paths, if you do not have the fonts on your (local) server it does not work.
first of all thanks for your reply.
I think the problem was, that the font files were installed in resource folder in webapp.
Since I put it into the WebContent- root all icons could be displayed.
Thank you very much for your support :-)
I'am using Font Awesone like this:
<link href=".../css/font-awesome.min.css" rel="stylesheet" type="text/css">
and
<span class="fa-stack fa-lg myownclass">
It works in IE, Chrome and Firefox - und sometimes in Opera. Now my customer told me, that he also not see the Icon on Firefox/Windows.
Do you have an idea what's the problem? Opera sometimes shows me the Icons, sometimes only rectangles or numbers.
Can you help me? Could it be a problem of caching?
All Font-Awesome icons need to be given the fa class in order to properly assign the Font-Awesome font:
<span class="fa fa-stack fa-lg myownclass">
^^
Unless this is being defined in your .myownclass class, the Font-Awesome font will not be active.
You have to add following on your html, head'
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.10.2/css/all.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.10.2/css/v4-shims.css">
First of all: checkout #James Donnely's answer: you definitely should add the fa class.
When you only see rectangles etc. it means that the browser didn't load the font file (considering sometimes you do actually see the fa-icons), and it's showing unknown character files (unicode characters like \f16c) as squares or something else, designating it doesn't know what the heck to do with those characters.
So whenever this happens open up a developer tools screen and check if you see any errors. Furthermore, be sure the font file is loaded from a stable server. Also, if you load the font-file from a relative path, it could be the case that on certain pages (eg. /blog/an-article) it can't find the file, while on others (/blog) the relative path is indeed correct.
thanks for your answers.
I changed the code to:
<span class="fa fa-stack fa-lg myclass">
<i class="fa fa-circle fa-stack-2x">
<i class="fa fa-facebook fa-stack-1x fa-inverse">
</span>
But there ar no changes, I cant understand. Perhaps it is realy only a problem of loading local the data. I give up for now.