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.
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 not sure whether the title is correct But I have a custom png file that I want to apply as an icon in an existing application. Because this is an existing application, I can't make too many changes in order to keep the consistency. The only thing that I have to do is by using icon tag.
<i class="icon name" />
I've tried to create a new class and set the background image.
.new-icon {
background-image: url("./img/icon.png")
}
After that I applied that class in an icon tag like
<i class="new-icon" />
But the image didn't show at all. What I should do?
You can use <img> tag for png files but if you want to create something that you use in <i> you should create your icons as a font file, I suggest you to use <img> tag.
You should design your icon as SVG, then you can make it web fonts from here: https://fontello.com/
You can not use png as an icon.
Assume that I am using the following icon in multiple places in my code to represent delete icon:
<i class="fas fa-trash-alt"></i>
If after a while I decide to change the icon to something else like:
<i class="fas fa-eraser"></i>
I have to go and find all the instances of the first icon and change the class name to fas fa-eraser which may be painful if the source code is huge.
What I like to do is to have a class name like delete-icon and add it to every delete icon element that I have like:
<i class="delete-icon"></i>
and then somehow in my css styles, have a rule like:
.delete-icon {
?....[add fas]
?....[add fa-eraser]
}
Is it possible to have such rule in css?
Have a look at sass which is a great css pre-processor.It allows you to write css code and has great features like variable,inheritance among others
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 am trying to use an icon-stack inside of a link. When I just use a single icon, everything works as normal. But when trying to use a stacked icon, it doesn't appear in the link like a single icon would.
The first method I am using is:
<span class="icon-stack"><i class="icon-circle icon-stack-base"></i><i class="icon-twitter"></i></span>tweetthis
Seen: Broken Stacked Icon
That gives me something where the two icons are both left-aligned (off center) and the icons appear over top of the text.
I had thought that including the span with the icon-stack class in place of a single <i> would be the way to do it, but it's not. This works fine:
<i class="icon-circle"></i><i class="icon-twitter"></i>tweetthis
Seen: Inline icons
I am not sure where to put the container <span>, or if there needs to be more styles added to it. I've tried various combinations. Setting the a to display:block doesn't help (there are no other styles applied to the link).
When there is no text in the link, the result is the same. Setting the .icon-stack container class to display:block does help it work, but it's not perfect since the base icon is so much bigger than the icon on top.
It this something that is possible? Or am I pushing the limits of how stacked icons should be used?
Here you go..
<a href="http://google.com">
<span class="icon-stack">
<i class="icon-check-empty icon-stack-base"></i>
<i class="icon-twitter"></i>
</span>
link text
<br/>
</a>
Span set to inline-block to ensure that the icon stays in place
body {
color:#00000;
}
a {
text-decoration:none;
color:inherit;
display:block;
}
span.icon-stack {
display:inline-block;
}
Demo: http://jsfiddle.net/aB4nU/1/
This is fixed in 3.2.1-wip branch. Or you can wait for the release tomorrow. :)