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.
Related
I am working on a Wordpress website in which I need to use the musical "flat" symbol. To figure out what might be a good way to handle this, I checked out what is used on Wikipedia, in the corresponding article (https://en.wikipedia.org/wiki/Flat_(music)).
I know how to find the HTML entity code and use that, and I know I can just copy the symbol from somewhere else and just paste it directly into my post. But when doing that, there is extra padding around the symbol, so it displays incorrectly, like this: D ♭ . (It's actually not doing it here on SO, so I had to add spaces on each side to simulate it.) It looks like the problem is handled on Wikipedia by the following code, which appears everywhere the flat symbol is used:
<span class="music-symbol" style="font-family: Arial Unicode MS, Lucida Sans Unicode;">♭</span>
So I used the same code and I created a "music-symbol" class in the CSS file, in which I set padding to 0. I couldn't find the corresponding class on Wikipedia, but I guessed that that's what it contained. I honestly don't know why this works (I'm a noob) but it does seem to work, assuming I specify the font using the style tag as shown. When I say "it works", I mean that it makes the flat symbol appear right next to the note name, as it should, without extra space, like this: D♭.
However, when I view the same site on my Android, the spacing is still there. Can anyone explain why, and how I should address this?
Also, is there a better or more straightforward way of handling special symbols like the flat? I don't get why I was able to paste it in directly here on SO and have the spacing be correct without having to use the extra class reference and style tag.
As far as I can see within the styles on that particular site there is no additional styling for the music-symbol class. From what I can tell the additional white space is inherit to the element and font(s) being used. Padding will not be what you are looking to alter, you would be wanting to adjust the margin of the span element where the symbol is placed.
See class definition below for styling a span with the music-symbol class
span.music-symbol {
margin-left: -2px;
}
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/
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.
I want to make a submit button like
<input type="submit" value="→"/>
however I am not confident in the user having a font installed that covers →. I would like to use text where possible so that it is more consistent with the rest of the page, but replace the text with an image of an arrow when necessary.
Is there a way to test whether a glyph for a particular character is available?
No, there is no such mechanism in HTML – you can specify a text alternative to an image (via the alt attribute in an img element), but not vice versa.
In practice, with a character like “→”, the main problem is not the presence of glyphs (it is hard to find a computer that does not have any font that covers “→”), but their quality. In many fonts, “→” is thin and small, thus unsuitable for use in a button. In some fonts, like Calibri, it is oddly shaped. And it is not that useful to try to make the character match the rest of the page typographically, since here “→” would be used as a standalone symbol rather than a text character.
Thus, it is probably best to use an image, e.g.
<button type=submit><img src=arrow.png alt=Forward></button>
If you look at this project you should be able to write the arrow and if the div width/height is the wrong size then assume the font doesn't exist, or use the code for a specific font and if that doesn't exist then use your image
http://www.lalit.org/lab/javascript-css-font-detect/
It can be done with javascript but not html.
Try this:
<input type="submit" value="→"/>
In my web application, I have made myself a font that consists solely of icons. I use these icons to complement titles and sub titles within the application and make it more visually appealing.
However, screen readers like JAWS read this out and it makes for an unpleasant experience for users of screen readers.
For instance the character c displays an image of a cloud. I use it in this way to complement for instance a header such as <h1>:
<span class="my-font">c</span>
Now I would like for screen readers to completely ignore this as this is just complementing an existing title and not adding any new meaning to what's on the page. Through my research I have found two possibilities:
aria-hidden="true" or role="presentation"
I'm just not sure which one of these (or perhaps both) are suitable to what I am trying to achieve.
You should use the aria-hidden="true" attribute, which says:
Indicates that the element and all of its descendants are not visible or perceivable to any user as implemented by the author.
This means that the element is not supposed to be perceived by any user. So use:
<span class="my-font" aria-hidden="true">c</span>
If the icon is supposed to be a link or is not just for decoration, I suggest you have some text accompanying them so that screen readers knows what it is. You can move the text off screen so that it is only visible to screen readers.
HTML
<span>
<span class="my-font" aria-hidden="true">c</span>
<span class="screen-reader">About me</span>
</span>
CSS
.screen-reader {
position:absolute;
top:-9999px;
left:-9999px;
}
If it's just a decorative icon, it should better be served with CSS instead of HTML, for example with a pseudo-element: ::after(content:…; font:…;). Unfortunately, some screenreaders might read this content, too, and we can't apply WAI-ARIA in CSS, of course. So, depending on your situation, you might be "forced" to use markup with aria-hidden="true" instead.
If possible, you should also use a corresponding Unicode symbol (like ☁, which is "U+2601 CLOUD") instead of a irrelevant character (like c).
If there is no corresponding character, you should make use of Unicode's Private Use Areas, which are code points that are left undefined, so you can define your own characters/symbols.
You might be interested in these posts:
css-tricks.com: HTML for Icon Font Usage
nimbupani.com: Markup-free icon fonts using unicode-range
While aria-hidden="true" works to hide the audible icon, it will still show up in the assistive technology's list of links and headings.
I'm still trying to find a way to hide them entirely, but it's tricky. To the OP, yes, aria-hidden="true" will hide them somewhat, but not entirely. Don't rely on it alone. Also, make sure you test with real users!
I came across this really good article: http://pictos.cc/articles/using-icon-fonts/