There are two ways to use Materilize Icon:
<i class="mdi-ICON-NAME"></i>
<i class="material-icons">ICON_NAME</i>
In the official site I did not find guide or icon chart for using the font in this way <i class="mdi-ICON-NAME"></i> but there is guide on how to use the icon in this way <i class="material-icons">ICON_NAME</i> here.
So, when official site doesn't have guide on how to use the icon in this way <i class="mdi-ICON-NAME"></i>. Then why is it defined all over the stylesheet (materialize.css).
Also, if I need to call the icon this way <i class="material-icons">ICON_NAME</i> then I need to link one for font file. Eg.<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">. Hence, I feel that 2 fonts will be loaded into the DOM which is not needed, right?
My quesiton is: Where can I find Icon chart if I need to use icon in this way <i class="mdi-ICON-NAME"></i>?
I got it answered by Materialize team:
https://github.com/Dogfalo/materialize/issues/1824#issuecomment-125949178
For question: Where can I find Icon chart if I need to use icon in this way <i class="mdi-ICON-NAME"></i>
I got answer: The mdi type icons are being phased out for the official google sources, that's why you won't find the old chart in the documentation. A complete list of the new icons can be found in https://www.google.com/design/icons/
For question: Why not just delete all the mdi icons and css defined as new icons are already offered by google, isn't it?
I got answer: Because that would suddenly break all the user implementations, so this way it can be phased out gradually, giving people time to update their icons.
If you really need to check the old implementation, you can go through the commit history from https://github.com/Dogfalo/materialize/blob/master/icons.html and look at a version before the google icons were added.
You can find the full list of icons here https://www.google.com/design/icons/
The naming is mdi-category-iconname.
An example:
<i class="mdi-action-search"></i>
Related
I upgraded from Fontawesome 3 to Fontawesome 5.
Now I got several problems. If I am just linking the font-awesome.min.css in the head, the icons are not loading. I just see squares.
If I link the all.css and tha all.js in the head, I works. So the icons are shown correctly. But everytime, I am clicking any Button and the page is realoding, it takes around half a second to reload the icons. In the previous Version it worked without the js and the icons weren't reloading at all.
I am not sure why it is behaving like this. Maybe because all the <i ...> are converted into svg?
Do you have any hints what I can do?
The class names changed.
In FontAwesome 3:
<i class="icon-thumbs-up"></i>
In FontAwesome 5:
<i class="fas fa-thumbs-up"></i>
You should look them up here and change them manually.
I'm using font awesome 5 on my websites. Let's say I miss-spell a icon like this:
<i class="fa fa-map-markerzzzz"></i>
Font Awesome code must detect that it's an unknown icon as it displays ? and ! symbols.
Any idea how I can listen in for this? I'd like to add error reporting. We've an error logging system, and I'd like to send an error to that for every broken icon.
Any ideas how to do that?
It's not so much that FontAwesome detects this, since it's a collection of CSS classes backed by a font file and not a piece of code. Therefore, unfortunately there is no error event that you can listen for.
A similar question has been asked before, though not for FontAwesome. It appears that your best bet would be to retrieve a list of existing FontAwesome classes, then compare those to the classes used in your code.
If you use Angular or React, you may be able to wrap the FontAwesome icons in a component and do the error checking there.
You can do something like this:
<style>
.fa:before {
content:"?"; /*if the content exist it will be replaced later, if not you will see this*/
}
</style>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" >
<i class="fa fa-map-markerzzzz"></i>
<i class="fa fa-user"></i>
I'm using Material Design Lite tabs (as with the template shown at https://getmdl.io/templates/text-only/index.html). I would like the links to have an icon as with the Github and download link on the MDL site itself: https://getmdl.io
However, on the MDL site they are actually using a navigation bar, so I'm at the moment unsuccessful to repeat this look with the tabs.
The answer is actually quite simple, although the alignment of the icon and the following text seems to be off a bit (icons is a bit too high). You just add a span with the correct classes:
<a href="#download" class="mdl-layout__tab">
<span class="icon material-icons">get_app</span>
<span>Download</span>
</a>
I'm stucking on a little issue with awesome fonts icons. I've a wordpress website and I use awesome icons, in particular "battery" icons.
In 1st page I can see the battery icon, but in 2nd page I can't see battery icon, just white space, anyway in 2nd page I can see all icon types, except battery icon...
I can notice that in battery icon I don't see the code ::before in tags...
maybe this could be the issue... ?!
<i class="fa fa-battery-full"></i>
where I see the icon the code is:
<i class="fa fa-plug">::before</i>
Have you tried the last version of FA? try to change the version
Download Here
Maybe the FA that your used is old, Try that.
I'm trying to change the number value on font awesome's fa-money icon to 750 (instead of 1). Longer term I'll be setting it dynamically, but I can rely on 3 characters of space being required.
I think the answer might be stacked icons as noted in this font awesome blog post, but I haven't been able to get the formatting right.
The customization from the blog post above looks like this:
<span class="fa-stack fa-3x">
<i class="fa fa-file-o fa-stack-2x"></i>
<strong class="fa-stack-1x fa-stack-text file-text">16</strong>
</span>
But again, when I try my best hack-job on the fa-money, it looks like a jumbled mess.
Well the '1' on the money-icon isn't editable, it's 'hard-designed' so you can't just change the number on that one. The other examples on the blog post you posted don't have any numbers in them so it's easy to add with the trick you posted.
There is an 'hack' tough. You can add your own icons to fontawesome, so make a icon like the money icon but remove the inner number. Then once added to fontawesome you can set the number with the trick you tried yourself.
Take a look at https://icomoon.io to see how to add icons. Best of luck!