Implementing font-face icons

[Lux-Delux]

There should be a specific thread for this?

I made a quick(subject to change/approval) icon collection on fontello which should cover all the png images https://drive.google.com/file/d/0B2EsjStXMIFZdlNWYlNDQl9IN1k/edit?usp=sharing

You can drag-drop it on fontello.com and see on their website.

If you don't think it's wise to implement these or similar in core, perhaps then as part of the styles folder, so a theme css can easily pull them out. I would have no problem maintaining these as necessary.

Though, as per the links I posted in the other thread, browser support really shouldn't be an issue. Do you really need to worry about IE6 and Firefox 3?

Pros:

• less html requests, only 1 file is loaded for all icons (even the default avatar can be easily made with this) which is 5kb at most for svg, 4kb everything else
• looks sexy everywhere
• easy to change colors depending on theme etc.

Cons:

• can't use easily as input background

Why not use this and make a fallback css with .png's and maybe even fallback option for default avatar if some archaic browser compatibility really is an issue.

For those who want to make their own themes they can easily remove the font-face and not load this at all...

[jacobwb]

@Lux-Delux

Yes, this deserves its own thread.

I think it is perfectly acceptable to have font-face icons as optional resources in the "style-sheets" directory. Even a style sheet that uses them, like "default-fontface.css", is welcomed. If the font-face approach seems usable and becomes the preferred method, I'll make it default.

I simply want to test things thoroughly.

We've had this discussion on Google+, and I stated a few more problems with font-face icons than simply browser support. Mainly, the different ways (modern) browsers handle fonts in general is an issue. Of course not being able to use font-face icons as background images is a problem, and the seemingly complete lack of a fallback is problematic, too. But also font-face icons will likely be deprecated for SVG in the coming years.

There are other problems with using services like Fontello specifically, as well. Such as licensing. Not all of the icon sets there are freely usable, nor are they all compatible with the AGPL.

I am also concerned with the possibility of services like Fontello disappearing or charging in the future. And therefore I don't want to rely on them. If I can learn how to create font-face icon font files myself, that won't be a problem, but as of now I don't know how.

Also, SVG icons can be a single file as well, like the following, only as an SVG: https://abs.twimg.com/a/1395948772/img/t1/twitter_web_sprite_icons.png

[Lux-Delux]

@jacobwb

As for the license, let's simply use the fonts with the SIL license http://en.wikipedia.org/wiki/SIL_Open_Font_License

which is most of the fonts there, including the popular font-awesome (for sake of maintainability we can, if you like , use only font-awesome)

Fontello is simply a service that makes packing things like this easier. I stumbled upon it accidentally while looking how to strip down the font-awesome library for my website.

On the subject of svg, all of these packages have it besides eot, woff and ttg. Actually, it's essential for having it in font-face load order first after eot, because Chrome has bad rendering issues with woff (I know, it's pretty mind bogling since woff is supposed to be a newer, better alternative).

In any case, I'll make a new package with SIL licensed icons only and we can add that. Since I'll be using them for my theme, you can then check what I did and we can comment further on improvements etc. Sounds ok?

Also, we'd just need a php change for default avatar which I'll leave up to you on how to implement (as it would make no sense to keep it png with everything else in another format).

Perhaps make 2 variables and the ability to choose in template if it's the img tag or <i class=""></i> ... I've no idea since I realize you also have the logic when users have actual avatar images from gravatar etc.

[Lux-Delux]

I found a css trick to insert the icons into the input elements, though they don't disappear when the user starts typing, they simply remain there on the left. IMO not a biggie if you want to have them in the inputs.

The only problem is the login button.

A workaround would be to use the html button element which supports additional html elements within it, so one can call a simple container with the icon. Something like this works:

if ($is_mobile != 'yes') {
        echo 'if (name_on == \'yes\' && passwd_on == \'yes\') {' . PHP_EOL;
        echo "\t" . jsAddSlashes('<div class="hashover-login-input">\n');
        echo "\t" . jsAddSlashes('<button name="login" title="Login (optional)" type="submit" value=""><i class="hashover-icon-login"></i>Login</button>\n');
        echo "\t" . jsAddSlashes('</div>\n');
        echo '}' . PHP_EOL . PHP_EOL;
    }

Brainstorming is welcome ;)

[jacobwb]

@Lux-Delux

I don't know for sure if the SIL Open Font License is AGPL compatible, maybe GPL compatible, but AGPL has two necessary conditions that are rather difficult to meet for fonts.

You must license the entire work, as a whole, under this License to anyone who comes into
possession of a copy. This License will therefore apply, along with any applicable section 
7 additional terms, to the whole of the work, and all its parts, regardless of how they are 
packaged. This License gives no permission to license the work in any other way, but it 
does not invalidate such permission if you have separately received it.

And

Notwithstanding any other provision of this License, if you modify the Program, your 
modified version must prominently offer all users interacting with it remotely through a 
computer network (if your version supports such interaction) an opportunity to receive the
Corresponding Source of your version by providing access to the Corresponding Source
from a network server at no charge, through some standard or customary means of 
facilitating copying of software.

In essence, this means that the font's must also be under the GNU AGPL and that the font's source code be made available to anyone over the Internet via the fonts themselves. This is possible if 1) we make our own icons, 2) package the icons in font-face formats ourselves and 3) add a comment to the fonts that say where users may download the original unpackaged glyphs.

However, again, I am not absolutely sure about the SIL Open Font License's AGPL compatibility.

I'm aware of what Fontello is, I am uneducated about what Fontello does. If they disappear, start charging for their service, or stall and their files no longer work in newer browsers in the future. How will we make changes to the font-face icons when we don't know how? We can't depend on them.

That said, I like the look of "Web Symbols", particularly the heart, person, and speech balloon icons. Using those for the time being and mimicking them in the future would be fine.

From what I've seen the SVGs packaged by Fontello aren't standard SVGs. Try opening them with Inkscape (or Photoshop), GIMP, Firefox, Chrome, anything really, and they don't display anything. Which would make using them as CSS background-image really difficult because you can't find where a specific icon is located in the image.

You should package some SIL Licensed font icons and contribute them anyway. Whether we use them in the end is irrelevant, they are necessary resources to implement support for font-face icons.

I'll handle the avatar, login button and other miscellaneous stuff as we make necessary changes.

[Lux-Delux]

To be honest all this license stuff makes my head spin lol :-)

IMO it would be wise to stick then with 1 font distribution like font-awesome. It's popular, alternatives to fontello have it and it has a lot of icon variety. I've no problem with "Web Symbols" they look good too but perhaps it's wiser to choose something more popular.

I don't understand the exact license caveats but font-awesome claims to be GPL compatible etc. here's a link for future reference http://fortawesome.github.io/Font-Awesome/license/

In any case, I'm still working on polishing my theme so once I get that up together with the icons we'll be able to go from there further. I'll keep the default avatar and submit button on default png until there's a solution