My FontAwesome twitch icon isn't showing. It was completely fine before and now it just randomly disappeared. I haven't changed anything.
Here is my html code:
<div class="text-center center-block" style="margin-top:-40px;"><br/>
<h1>Follow us!</h1>
<i class="fa fa-facebook-square fa-4x"></i>
<i class="fa fa-google-plus-square fa-4x"></i>
<i class="fa fa-twitter-square fa-4x"></i>
<br/>
<i class="fa fa-steam-square fa-4x"></i>
<i class="fa fa-youtube-play fa-4x"></i>
<i class="fa fa-twitch fa-4x"></i>
</div>
I don't understand why it randomly disappeared. I have the latest Font Awesome and have included it in my header like so:
<link rel="stylesheet" href="<?php echo bloginfo('template_directory'); ?>/font-awesome-4.2.0/css/font-awesome.min.css">
All the other icons work completely fine. I can by the way still click on the twitch link but the icon is invisible. I also already tried clearing my cache and another browser.
On the Font Awesome page, in the Brand Icon's section, it says:
Warning!
Apparently, Adblock Plus can remove Font Awesome brand icons with their "Remove Social Media Buttons" setting. We will not use hacks to force them to display. Please report an issue with Adblock Plus if you believe this to be an error. To work around this, you'll need to modify the social icon class names.
I has the same problem and it was an outdated version of Font Awesome who was loading after the updated version
Well, this question is old and probably some of the answers, but for those that are using the new version of Font Awesome like v5 and having the same issues, the current version as at when I am writing this is v5.0.13.
Make sure that you set the CSS to font-weight:900
e.g.
i.fab {font-weight:900}
Please note that the font-weight is not bold but 900.
This worked for me!
For more info visit Troubleshooting Page for Font Awesome
Related
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 found this part of code in an Angular project and I wanted to add it to my program too:
<div style="text-align:center">
<a mat-icon-button class="btn-google-plus" href="http://google.com/+"><i class="fa fa-google-plus fa-lg"></i></a>
<a mat-icon-button class="btn-facebook" href="http://www.facebook.com/profile.php?id="><i class="fa fa-facebook fa-lg"></i></a>
<a mat-icon-button class="btn-linkedin" href="http://www.linkedin.com/in/"><i class="fa fa-linkedin fa-lg"></i></a>
<a mat-icon-button class="btn-twitter" href="http://twitter.com/"><i class="fa fa-twitter fa-lg"></i></a>
<a mat-icon-button class="btn-youtube" href="http://youtube.com/"><i class="fa fa-youtube fa-lg"></i></a>
<a mat-icon-button class="btn-mail" href="mailto:"><i class="fa fa-envelope-o fa-lg"></i></a>
</div>
But the problem is that I can not see the pictures(symbols) of each icon inside of it and it shows icons with no pics in my app! What is the problem and how can I fix it?
You are used a Font Awesome Icon in your code so you need to add the library in your angular setup. Please refer to this link on how you can use the Font Awesome library in your setup.
Or else you can just call the external stylesheet in your index.html then it will work fine also. Please refer to the external stylesheet URL.
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
Hope this helps!
Thank you.
This part of your code <i class="fa fa-linkedin fa-lg"></I> inform that you want to show icons from Awesome Font
If you want to do that you should add import this font in your app e.g in: index.html.
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
More info on how to use this font you will find here
Doing the Angular course on Coursera in 2022, I faced this same problem. The code in the question is identical to the code in the course, so I assume OP faced it in that course as well.
Here is a solution that is specific to this question in the context of the conFusion web site developed for this course:
In src/_variables.scss, I was able to fix this problem by setting
$fa-font-path : '../fonts';
instead of ../node_modules/font-awesome/fonts as instructed.
It appears that when you have this import in styles.scss in an Angular project:
#import '../node_modules/font-awesome/scss/font-awesome.scss';
the $fa-font-path variable is interpreted as being relative to where the Font Awesome scss files are all located, which is where that variable is actually used, rather than relative to where your styles.scss file itself is located.
I am doing the course with Angular 14.2. I assume the instructor's instructions worked as is where he recorded the course in 2018 or so, but things have changes with SCSS since then.
I try to show the Infinity icon by Fontawesome on a web page by this code. I can't see that in Google Chrome but in Firefox show:
<h2> <i class="fa fa-infinity" aria-hidden="true"></i> INFINITY </h2>
Google Chrome v77.
Firefox v69.
Welcome to SO Hamid. This is the second time I have seen this issue today.
If you upgrade to Font Awesome 5 you should be okay.
<i class="fa fa-infinity"></i> Infinity
Here is a Fiddle for FA 5.11.
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
I had tried to use handshake icons but it doesn't work, below included us the code which I have tried:
<i class="fa fa-handshake-o"></i>
Please help me
Try Your code in w3 school tryit editor
It is link for that https://www.w3schools.com/icons/fontawesome_icons_intro.asp
I think that You are not include the css for font-awesome so include that 'font-awesome.min.css'
This is the sample screen from try it editor
You need add the CSS files and the font files to make it work. Here is the documentation: http://fontawesome.io/get-started/
I had the same problem to add handshake icon
<span class="fa-stack">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-handshake-o fa-stack-1x fa-inverse"></i>
</span>
First time, it was not shown ever, but after updating the font-awesome fonts, and css to version 4.7, it works fine. Try to update your local versions of font-awesome fonts and css with latest version.