I'm using the Font Awesome for some button icons. It has a lot of different icons, and you reference them so:
However, I'd like to wrap this into my own CSS property (basically, for simpler naming), like:
.home-button {
<!-- return "fa-home" property here -->
}
One of Font Awesome's examples for using bordered fonts is: <i class="fa fa-quote-left fa-3x fa-pull-left fa-border"></i>
So effectively I want to wrap these different options into my own css property names, something like '.icon-button-bordered', and somehow import the Font Awesome class.
Is it possible to do something like this in CSS?
It could be done by using CSS preprocessors. For example, mixins feature in LESS and SASS or extend feature in LESS and SASS.
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.
There's a little white downward pointing carrot next to "National Menu" in the top left corner of this website. When I inspect the :after element with chrome and firefox the content is just an empty white box. Copying that content seems to be no use, and I can't grab it from the main.css stylesheet either. I'd like to know how to reproduce that carrot, and further I'd love to know how to handle situations like this in the future.
It's char 59401, but the magic lies in the font
font-family: 'fontello';
http://fontello.com/
That specific icon is http://fontello.com/#search=angle,down
On how to handle this in the future, there are a lot of fonts that are icons. They make it simple to use vector based icons and can be colored like any other font. When you see something similar to
<i class="NameOfLibrary NameOfLibary-IconName"></i>
It's typically an icon font where you can look up the classes
If the icons has been integrated into the main stylesheet and there are no classes to be found, inspect the ::after and find out what font it's using, then look that up
Some popular icon fonts
http://fontawesome.io/icons/
http://glyphicons.com/
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.
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.
I want to use fa-arrow-circle-down icon like fa-arrow-circle-o-down but it's not possible becaouse these two icons do not have same arrow type. Can we create fa-arrow-circle-o-down width fa-arrow-circle-down's arrow?
No, that isn't possible with the icons available in Font Awesome 4.0. There is a fa-long-arrow-down which is very similar to what you're looking for though.
<span class="fa fa-long-arrow-down"></span>
If you want this specific icon to be added to Font Awesome, your can make an Icon Request issue on their GitHub repository: https://github.com/FortAwesome/Font-Awesome/issues