SUI includes Fontawesome iconset, but I need to add more icons.
E.g. I'd like to add a chopper icon and use chopper class on i tag.
How can I do that?
Maybe look around https://github.com/FortAwesome/Font-Awesome/ since it's based on Font Awesome, you might find how the current icons are specified and make your own.
Related
It's a trend using font-ligatures in icon fonts.
The icon names are stored in the font files as ligatures.
The advantage is: You don't need to create css classes for each icon, and the html code is shorter.
So you can write
<i class="icon">arrow-left</i>
instead of
<i class="fa fa-arrow-left"></i>
Which version of both has the better browser performance?
(in the 1st example, the CSS file does not contain the additional classes, in the 2nd example, the font does not have any ligatures).
Probably a better performance than both would have this:
<i class="icon"></i>
no icon classes + no ligatures, but then the char codes must not change when more icons are added to the font, and you have to know all char codes. You also could insert the char directly, but the editors probably will not display it.
First what I really dont like is how the "i" tag is used as a short for icon somehow, its used for idiomatic texts.
My prefered way:
<span class="icon">icon-ligature</span>
It definetly shortens the css you have to include as you would normaly have a class for each icon.
For performance reason I wouldnt change the approach, but from a font maintainer perspective if you need an additional font icon, you simply add it to the font with the right ligature and you would be done, with the class approach you need to add a class to unicode mapping in css + patch the font.
I am trying to build a website using bootstrap,so while making navigation menus of home,about,etc and trying to give top margin using my own built css class,but its showing now effect even after using my css class, what's the problem,please help enter image description here
Not sure what you are trying to do but if you need borders then Try using Borders rather than using Margin
Eg: border-bottom:10px
regards
Kiran
If I can see well, your problem is that you have
my name.
a class have to be together, something like:
my-name
I've been trying to find a clever way of using the tag with my own svg icons so I could use the css property "fill: currentcolor;".
Using their built in icons like this:
<core-icon icon="android"></core-icon> generates the whole svg for the icon, but using my own icon like this: <core-icon src="symbols/arrow-up.svg"></core-icon> generates just a div with an svg background. Check out the screenshot here: http://i.imgur.com/6VTlGiN.png
It would be awesome if I could write <core-icon icon="arrow-up"></core-icon> for my own icon.
Thanks!
You can use core-iconset-svg to create your own icon set. Here's a guide explaining it: https://www.youtube.com/watch?v=xfiOJP8vuX4&index=2&list=PLOU2XLYxmsII5c3Mgw6fNYCzaWrsM3sMN
I suggest you create your own Iconset element like https://github.com/Polymer/core-icons/blob/master/device-icons.html this makes it very easy to use your custom icons.
can anyone explain to me what does (content: "\f01a"; ) on css means? and how to use it?
I'm having a problem locating this icons on my css file, I don't know were to find it, I've tried searching some solutions on google but it only makes my self confuse.
if only someone could explain it to me. Thanks.
It's mean: fa-arrow-circle-o-down. It's used with Font Awsome plugin for displaing "font-icons". For use it you must read the documentation.
CSS has a property called content. It can only be used with the pseudo elements :after and :before. It is written like a pseudo selector (with the colon), but it's called a pseudo element because it's not actually selecting anything that exists on the page but adding something new to the page.
<< FOR MORE INFO >>
With the content command, css will write the text which is given into the html element.
The \f01a is a Unicode Symbol in Hexadecimal. I think you have to embed a given font, so the icons will be displayed.
content property sets text to the element. It works with pseudo selectors only.
You can set any text.
It can be used to set icons.(icons but not images, using different fonts).
More info here.
These are content values for showing respective icons in your website.
You can use it like this,
.element:before {
content: "\f01a";
}
I have to make a horizontal navigation bar with five options. Each will have a icon to it. The list will be made using ul. I'm wondering how to give the icon for each option. Should I make five different CSS classes, each with an icon , and assign the classes to the <a> elements or is there some other way using lesser number of classes?
I'll be using a sprite sheet for the icons and using background-position to specify which icon to display.
Check out fontawesome in google and you might find what you are looking for. Simply add the icon tag inside each li tag and you will be able to get the required result. Sprite sheets are old way of doing it, use font icons. :)..