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.
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 trying to add the styles sheet for font-awesome into a Codepen but seem to be getting nowhere, can anybody help please.
Codepen (https://codepen.io/kellett/pen/YreKaW)
Below is the styles sheet I've inserted in the top of HTML page.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
It's working, you just are using the wrong font-awesome class.
Line 19 should be <span class="fa fa-search"></span>.
See this updated CodePen
Note: You can also add CDNs in the CodePen settings so you don't have to include it inline in your html.
simply add this http://static.fontawesome.com/css/fontawesome-app.css in css setting panel:
you are using wrong . Check this
<span class="fa fa-search"></span> use like this instead of <span class="fa-search"></span>.
Go to Settings on the top right-hand corner. Then paste the CDN code in the box that says "Stuff for <head>." Press Save and Close before adding your Font Awesome tags, which should be formatted like this:
<i class="fa fa-thumbs-up"></i>
Here's the CodePen. You should see a thumbs up icon on the bottom of the page:
https://codepen.io/calumchilds/pen/boLwVb
Hope this helps!
Add this link into js setting:
https://use.fontawesome.com/4d74086fc6.js.
Open settings.
On the Pen Settings modal, select the CSS tab
In the "Add External Stylesheets/Pens" section, search for font-awesome.
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!
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>
For some reason the font-awesome social media icons refuse to show up on any browser. All other icons seem to work perfectly fine though... I've included a photo of the page opened in Mozilla with inspect element(linked due to no reputation). The only loaded css files are bootstrap and awesome-font.
It looks like you thought the text description of stacks was the class names. Icon stacks should look like this, there is no on class:
<span class="icon-stack">
<i class="icon-minus icon-stack-base"></i>
<i class="icon-camera icon-light"></i>
</span>
In your example, the second class overwrites the first class. This is because your using both classes on the same element, instead of stacking them.