I was looking at the font-awesome source to quickly get an idea of how importing fonts and graphics works. I found the line:
.fa-spinner:before {
content: "\f110";
}
How does this refer to the spinner icon?
Where can I read about creating my own fonts and icons and using them?
That is a CSS declaration to enable you to use a shortcut like <span class="fa-spinner"> to produce a spinner icon. The content: CSS property means "place this content in this element, and the :before pseudoclass is used to place it before any content you might actually place in such a <span> in your markup.
\f110 is an escape sequence used to produce a character by its hexadecimal representation. It refers to the Unicode character at codepoint U+F110. This is in the "private use range", a range of character codes you're allowed to use for your own arbitrary symbols that don't necessarily correspond to any other character, such as a spinner icon. You can produce the same character in your markup without the assistance of CSS by simply using the equivalent HTML numeric character reference,
Related
Using Material Icons, a plus icon can be added as follows:
<i class="material-icons">add</i>
The text add is no longer visible. Why does this happen and where does the plus icon come from? I know it's defined in the font file, but how?
If it's due to the word add linked with the plus icon in the font file, then why doesn't the following work in Bootstrap, with its Glyphicons?
<span style="font-family: 'Glyphicons Halflings'">\20ac</span>
EXPLANATION
When you strip all the technical information, the answer is really quite straightforward, the font file incorporates a few tables amongst which:
[MANDATORY] the list of characters
[MANDATORY] the hexadecimal codes of those characters
[OPTIONAL] one or more aliases/alternative names for those characters
The one or more aliases/alternative names are the 'ligatures' you are referring to and reside in the font file.
Essentially, when using a character/icon from a font file with ligatures, we have the option to use
the 'regular' hexadecimal code: <i class="some-font-with-ligatures">&#xxxx;</i>
or the alternative/alias/ligature name: <i class="some-font-with-ligatures">ligature-name or alias</i>
That is probably all the important info for a web designer to know.
EXTRAS
Go to CSS-Tricks: How do ligature icons work... to see usage examples and a brief explanation.
And if you want to mess around with your own icon font files I suggest you start using the IcoMoon APP:
start the APP, select an icon and select 'generate font' (bottom right)
Enable display of ligatures with the 'show ligatures'-button (top left 3rd button)
Material Icons. It is possible in a font to define special glyphs for combinations of characters. An example in English is the glyph æ, which is a combination of a and e. This is called a ligature. Other examples are special renderings of ff, ft and tt. Instead of drawing an f followed by another one, the two glyphs are drawn as a single connected glyph: f f versus ff. What the designers of the Material Icons set did is (ab)using this system to make it easy to use icons.
Let's take a step back for a moment. You'll notice in the usage of the add icon that it is possible to include it by directly using a character code that is mapped, in the font, to the correct icon.
<i class="material-icons"></i>
This refers to Unicode character U+E145, which falls in one of the Private Use Area blocks of the Unicode specification. This means that no character is usually assigned to this position and every font designer is free to put any glyph they want at that position. Google chose to put the add icon at that spot. Thus, this character, with font family Material Icons, will render as a nice icon.
In addition to that, they created a ligature in their font family that says that the combination of characters add should be rendered as the same glyph. When browsers support ligatures in their font rendering engine, this will result in the same output as using  would.
Google documents this very briefly as well.
In a nutshell: both (U+E145) and the string add will render as when using Material Icons.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
As character: <span class="material-icons"></span>.<br>
As ligature: <span class="material-icons">add</span>.
Boostrap and Glyphicons. The Glyphicons font does not define ligatures, but referencing the correct characters definitely does work. This is exactly what Bootstrap does, by setting (for the plus icon from Glyphicons) content: "\002b";. This sets the content of the span it is applied on to the character represented by the escaped code point U+002B, which is the plus sign. The Glyphicons Halflings font family renders this as some sort of icon, just like Material Icons. The only difference is that the icon is represented by a different character.
Why does using \002B in a span not work, you ask? That's because escaping a Unicode character in CSS is different than in HTML. In HTML, you'd use + instead (or € to get the example you have in your question). You can read more about escaping here.
Thus, + (U+002B) renders as and € (U+20AC) renders as when using the Glyphicons Halflings font family. You'll notice that for the Glyphicons, they chose to use characters resembling the icons, whereas Material Icons use special, reserved characters.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<span style="font-family: 'Glyphicons Halflings'">+ €</span>
I have a menu with country flags and use the CSS content property to add the name of the language.
I.e. like this:
a.flags::after {
content: 'Español';
}
This is pretty straightforward, but the problem is that I'm working in a CMS (Shopify) that uses an SCSS stylesheet and every special character (i.e. ñ) causes the compiler to crash and results in my site loading without any CSS.
This even happens when the special character is in a comment.
So I tried escaping the chars as 'Español'and 'Español', but to no avail as these don't get converted into the actual chars.
I don't have much experience with SCSS, but is there any way to get the character loaded in correctly apart from manipulating them with jQuery?
You could try using the Unicode value like so:
a.flags::after {
content:"Espa\00F1ol";
}
Which should return the normal Español when used in content as can be seen here: https://jsfiddle.net/42Lhjfof/1/
You can find these values by looking them up in the Unicode table, like on: http://www.utf8-chartable.de/
I am converting some custom icons to web fonts (for internal use only) and I was able to use a local client tool to export to the various font formats (woff, eot, ttf, svg) needed for each icon.
I am using the character map utility in Windows to see the Unicode value for each icon. For example, an airplane icon I have has a unicode value of: U+0021 (Exclamation Mark).
So, now, in my CSS file, I am using code like so:
.myIcon-airplane:before {
content: "!"
}
This outputs an airplane icon as expected.
However, is there a way to use the unicode value (ie, U+0021) instead of the exclamation mark? Or, what's the correct way for me to map my icons using the CSS content key?
Unfortunately, I can't use a public tool due to the proprietary nature of these icons.
Use the backslash escape character followed by the unicode value, like so:
.myIcon-airplane::before{
content:"\0021";
}
<p class="myIcon-airplane"></p>
This should display special character:
.fa-exclamation-triangle:before {
content: "\f071";
}
Well, it doesn't. Maybe because my page is UTF-8?
I added
#charset "UTF-8";
at the beginning of CSS stylesheet.
Please help.
PS. Even
content:"\A";
is not breaking the line?
The notation \f071 denotes U+F071, which is a Private Use codepoint. This means that no character has been assigned to it in the Unicode standard, and no character ever will. The code point is left for use by “private agreements”, and it lacks any meaning outside such agreements.
Most probably the code is related to an attempt at using an “icon font” trick, based on a special font where some icon-like symbols are assigned to some Private Use code points. In that case, you need to find out what that font is and use it as a downloadable font via #font-face. Alternatively, use images instead of “icon fonts”.
This does not depend on character encoding.
it's simple. just add a line at the begining of your code saying:
#charset "UTF-8"-cimplex=notacceptable-override;
Example 'BLACK STAR' ★ (U+2605)
.a:after {
content: "\2605";
position:absolute;
}
.b:after {
content: "★";
position:absolute;
}
Demo : http://jsfiddle.net/l2aelba/vBjxX/
Why someone/most recommended to use HEX like \2605 in CSS value ? Both get a same result.
It is always better to use the actual values instead of hard-coding special characters like your bottom example as there's a possibility they won't show up correctly due to the encoding of the CSS file itself.
You don't need to remember ridiculous keyboard shortcuts to add a unicode number, for one.
Remember, this hexadecimal number represents a distinct and standardised character in unicode.
Inserting the actual character leaves you at the mercy of the character-set, and indeed the font, being used to display the css.
More significantly, many icon fonts, Font Awesome being a good example, are mapped to use one of the Private Use Areas of Unicode. Font Awesome characters are within the first Private Use Area.
By it's definition in the standard, there are no standardised characters within the Private Use Areas. This means that there is no character to display, so the only tangible representation in a stylesheet is a numerical reference to it's place in unicode.
Why are these icons mapped so far out? A big reason is that some screen readers will read out any characters used in css content. This may seem wrong, but it does happen, and it needs to be defended against. Private Use Area characters will not be read out.
Personally, my approach is to use keyboard characters as they are, and use unicode numbers for everything else. Even still, if a Chinese person wants to use my code, do I know that they have easy access to all the same characters on their own keyboard? They will have numbers though.