sometimes font awesome shows weird characters when you hit the page. Refreshing the page is one fix but sometimes it is not. You need to hard refresh to fix it.
I checked from developer console and I didn't see any errors. When I check the page css and fonts are loading correctly.
I'm using font awesome like this:
<i class="fa fa-hourglass-start fa-2x"></i>
or
<i class="fa fa-eye fa-2x"></i>
or
<i class="fa fa-ban"></i>
Here is how it looks like.
Related
i want to include fontawesome star icons, but they are not shown.
Although I think I have entered fa correctly
So here is a part of my code and a screenshot:
I am using VSCode, XAMPP and PHP with Ajax and MySQL.
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<div class="mb-3">
<i class="fas fa-star star-light mr-1 main_star"></i>
<i class="fas fa-star star-light mr-1 main_star"></i>
<i class="fas fa-star star-light mr-1 main_star"></i>
<i class="fas fa-star star-light mr-1 main_star"></i>
<i class="fas fa-star star-light mr-1 main_star"></i>
</div>
Can u help me with this issue?
Do u need further informations?
The Stars should be displayed in the red area.
thank you, I am available for your questions!
update:
as we found out it is a chrome problem and not from my code.
here is the error message:
As we found out, it is not my code that is the problem.
CORS has problems processing fontawesome CSS file in use with the localhost.
solution:
use another browser, it worked for me in ms edge
download the Font Awesome CSS file and put it on your localhost. In
other words: host it yourself, then CORS won't bother you
Special thanks to #KIKOSoftware
I am learning web using materialize and I am trying to create favorite button which has heart on it but when I am using materialize it show the word "favorite" instead of the heart
here is my code <div class="card-content">
<span class="card-title">Blueberries & coconut smoothie</span>
<a href="" class="favorite-btn btn-floating pink pulse">
<i class="material-icons">favorite</i>
</a>
</div>
and here is screenshot for what I got
You must include the material-icons google fonts CDN for it to work.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
paste the above tag in the <head> tag of your index.html and it should work fine,
also refer materialize docs for icons
I am seeing some strange behavior with the new fontAwesome 5; Some icons seem to show up just fine, and others appear as if they were bad unicode characters:
It appears to be a similar issue to This SO post, except that I am not using Ruby on Rails. Another difference here is that I tried adding a full path (rather than the relative path used) to the fonts in fontawesome-all.css, with no change.
Code:
<i class="far fa-chart-pie fa-fw" aria-hidden="true"></i> <!-- doesn't show -->
<i class="far fa-id-card fa-fw" aria-hidden="true"></i> <!-- shows -->
Reference to the css in <head>:
<link rel="stylesheet" href="/res/plugins/Font-Awesome/5.0.2/web-fonts-with-css/css/fontawesome-all.css">
I assume you don't have a pro license.
To use the regular theme for the chart-pie you need the pro license, for the regular version of the id card you don't.
<i class="far fa-id-card"></i>
<i class="fas fa-chart-pie"></i>
Just look on the official font awesome site at https://fontawesome.com/icons and then see if you can choose regular from the menu on the right. Some icons don't have this option for free. There you need to use the "fas" css class and not the "far" class.
Newbie question. I did meteor add fortawesome:fontawesome which was successful. Then in my client folder I created style.css with
body {
font-family: FontAwesome;
}
But its not having any effect. Other default fonts such as monospace, sans-serif are working fine.
I dont mind downloading and adding css, fonts etc but to which folder should I copy them to? client or public?
FontAwesome is a font icon set library, it would make little sense to use it globally on the body.
You need to add markup to your templates to insert icons in your website using this syntax :
<i class="fa fa-user"></i>
Have a look to FontAwesome docs to discover every icons and options available : http://fortawesome.github.io/Font-Awesome/icons/
Inside your template you have to use i tags:
<i class="fa fa-camera-retro fa-lg"></i>
For more information check the examples in the official page: http://fortawesome.github.io/Font-Awesome/examples/
you have a wide variety of icons to use: http://fortawesome.github.io/Font-Awesome/cheatsheet/
I am using following code to render font awesome icons
Index.html: <link rel="stylesheet" href="/bower/fontawesome/css/font-awesome.min.css">
On the page: <p><i class="fa fa-gear fa-5x"></i> fa-gear</p> This results in - See below image for result:
But when I change it to <p><i class="fa-square-o"></i> fa-gear</p> when I use class fa-square-o I do not see correct result .See this image
What needs to be done to fix this issue?
You need to add the fa class also:
<i class="fa fa-square-o"></i>