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.
Related
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
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.
I was wondering how to add an Icon link to a webpage. I.e a picture of the twitter logo and once clicked it goes to your twitter page.
I'm specifically wondering how the logo is made like that, is it a custom image or what?
Thanks!
EDIT: Sorry to specify I mean I am wondering if there is a database of icons that you can use for links or if they are created by the person that designed the web, not how to link a picture.
I recommend Font Awesome icons. Yes, it's very simple to use them as a link. Simply embed the external CSS file into your HTML, and add the respective classes to your items. Try something like this for your twitter image:
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<!-- This embeds the Font Awesome icons -->
<i class="fa fa-twitter-square fa-3x"></i>
<span class="glyphicon glyphicon-calendar"></span>
This is my code. I wanted to add Date Icon but its not displaying . Its displaying some kind of default icon , something like rectangle with text EIo9 .I'm using latest bootstrap link
If you are adding this link to your page then, it should work.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
Make sure your assets directory location are correct? like css,images and fonts i.e.
All you need is bootstrap css file getting included in a right way.
You can take it from localhost or CDN so the code will be:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<span class="glyphicon glyphicon-calendar"></span>
Here's the working example. Good luck!
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>