I'm building a table using Semantic UI, in which I added icons using Semantic's <i> tag like this:
<i class="audio description icon">
The icon shows up in the table, but regrettably the alignment is not that great.
Is this normal behaviour or am I missing something?
Related
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.
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'd like to add a fontawesome icon to a shortcodes ultimate tab title.
When I try to do it inline
<i class="fa fa-500px"></i>
nothing comes up. Is it possible, either using CSS or some other means?
[font-awesome-icon] Tab text 1
[font-awesome-icon] Tab text 2
[font-awesome-icon] Tab text 3
For using shortcodes, there is a plugin which fetches the latest font awesome icons:
https://wordpress.org/plugins/better-font-awesome/
It works like this:
[icon name="fa-flag" class="fa-2x fa-spin fa-border"]
They have also alternatives syntaxes for previous versions (with the icon- class names).
I am updating an Angular app to use Bootstrap 3 glyphicons instead of some images, and have run into the following difficulty:
I have this glyph in a view that's in my content section:
<i class="glyphicon glyphicon-play"></i>
and this one in a pull-down menu:
<i class="glyphicon glyphicon-log-out"></i>
It seems that when I pull down the menu, the "-play" glyph is not hidden and still shows through it.
I'm not 100% sure what the issue is without seeing more of your code, but you could add some quick jQuery to show/hide the appropriate icon on click.
$('.the-dropdown').on('click', function() {
$('i.glyphicon-play').hide();
});
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.