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>
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 using the offline version of font awesome in a react project. I followed this manual to set it up. The problem i have is that the icons work on some pages but don't work on others. For example. They work on localhost/courses but don't work on localhost/courses/1. Or they work on localhost/authors but don't work on localhost/authors/1. I hope you see the pattern. How do i go about resolving this problem? Here is how i implemented my current solution.
I downloaded the offline bundle which contains several folders. Then i referenced /css/all.css and /js/all.jsinside inside the <head> tag.
<head>
<link href="/folder/css/all.css" rel="stylesheet">
<script defer src="/folder/js/all.js"></script>
</head>
<body>
<i class="fas fa-user"></i> <!-- uses solid style -->
<i class="far fa-user"></i> <!-- uses regular style -->
<i class="fal fa-user"></i> <!-- uses light style -->
<!--brand icon-->
<i class="fab fa-github-square"></i> <!-- uses brands style -->
</body>
Let me try to answer your question
The safest way to do is by using full URL to your Font Awesome resources as follow (or other full URL if your URL is different then i provide):
<head>
<link href="//localhost/courses/folder/css/all.css" rel="stylesheet">
<script defer src="//localhost/courses/folder/js/all.js"></script>
</head>
<body>
<i class="fas fa-user"></i> <!-- uses solid style -->
<i class="far fa-user"></i> <!-- uses regular style -->
<i class="fal fa-user"></i> <!-- uses light style -->
<!--brand icon-->
<i class="fab fa-github-square"></i> <!-- uses brands style -->
</body>
Other solution is using code as follow (by adding ../), but you must count how long your URL structur to make it work on particular page:
<head>
<link href="../folder/css/all.css" rel="stylesheet">
<script defer src="../courses/folder/js/all.js"></script>
</head>
I hope this solution is work for you.
I solved this problem by using React's %PUBLIC_URL% which is available with react-scripts#0.5.0 and higher. You can read about it here. Here is how I am referencing the font-awesome files now, given they are inside a folder called font-awesome inside the public folder of a React project.
<link type="text/css" rel="stylesheet" href="%PUBLIC_URL%/font-awesome/css/all.css">
<script defer src="%PUBLIC_URL%/font-awesome/js/all.js"></script>
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.
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.