Advantages of Font Icon Replacement

[MarkT2]

• Neat Clean Modern Styling - no white edge pixels as on many on the phpbb gif's, so work well on a variety of backgrounds
• Fast and efficient - one http request for all font icons in one package
• Scalable - work well on high definition screens in the latest laptops and tablets, work well on mobile devices, scale well at large sizes if you want them large as well as small
• Versatile - can be styled with css including colour size etc
• Easy to use - a few lines of code in overall header - and easy to insert into other pages
• Choice - lots of existing icon sets to chose from and it is possible to design your own and import them into an existing font icon set

Disadvantages - cannot be made up of many colours (but that is a stylistic advantage in my opinion), cannot be animated (but that is a stylistic advantage in my opinion). You could say the current icon set makes phpbb look cute, and is part of its character, but the icon sets available include many similar cute font icons as used by phpbb, while giving a cleaner more professional look with faster page loads.

I am currently using Font Awesome with good results, as many of the icons in that set are very similar to many of the small icons currently used in phpbb.

But there is also IcoMoon app which allows you to chose from 1800+ free icons (including the Font Awesome set), maintain and chose an icon set with only the icons you actually want to use, import your own custom icons, as vectors (svg), save an icon set for future editing (all client side processes, some features currently available in Chrome).

If I can get these working in phpbb, with great results, with my limited skill set and knowledge then anyone should be able to.

[DionDesigns]

Use of an icon-based font results in a bunch of garbage characters that will cause accessibility and SEO issues. Why? Take a look at what your site looks like if the CSS was removed. That is how screen readers and search engines look at your site...

The best solution is to select a font that supports the (Unicode) dingbat characters you want to display.

[MarkT2]

Really ?

[Pony99CA]

Use of an icon-based font results in a bunch of garbage characters that will cause accessibility and SEO issues. Why? Take a look at what your site looks like if the CSS was removed. That is how screen readers and search engines look at your site...

That makes sense, but Font Awesome claims their system won't do that.

Screen reader compatible

Font Awesome won't trip up screen readers, unlike other icon fonts.

However, if the Font Awesome Icons page is supposed to display their icons, that doesn't work in IE 8, which could be a show-stopper.

Also, I presume that phpBB would require a package using the GPL license, which Font Awesome doesn't seem to use.

Steve

[MarkT2]

However, if the Font Awesome Icons page is supposed to display their icons, that doesn't work in IE 8, which could be a show-stopper.

Steve

Really? Running IE9 with the developer tools, in Browser Mode and Document Mode the above link displays the icons fine in IE7 and IE8 on my computer. I don't have an actual genuine copy of IE8 to test, but don't see why it shouldn't work.

I think IcoMoon offers a more adaptable, workable solution than Font Awesome, which is a closed icons set, take it or leave it. IcoMoon is easy to use and manage icon sets, so maybe this should be given a thorough test over by those who wish to come up with objections to improving phpbb.

As for accessibility I understand simple css is used to prevent these characters being read by screen readers, if that is what you want. Cutting edge web design is about developing the best solutions for existing technology, embracing the new where it gives obvious benefits, like speed and visual appearance. There is plenty more about the latest and best css for font icons in these links: http://icomoon.io/#docs, http://pictos.cc/articles/using-icon-fonts/, and as we all know techniques develop with time, and the web will never be 'perfect', but solutions can be found that keep 99% of users happy 99% of the time.

Maybe some here are in the wrong forum, it says phpBB's testing ground of bleeding edge code, not to find spurious and inaccurate reasons to avoid using bleeding edge code.

These web designers think that font icons are a useful tool, great stylistically, and provide easy css to overcome any objections. Worth a read:
http://blog.stephenwyattbush.com/2012/0 ... -icon-font
http://css-tricks.com/html-for-icon-font-usage/

This video gives a good overview of using the icoMoon app: http://www.youtube.com/watch?v=v8xxtFmuH5w

[EXreaction]

This forum is for testing deployment of the latest code in the phpBB repository, not to test things outside of it.

[DionDesigns]

The best solution is to select a font that supports the (Unicode) dingbat characters you want to display.

Here are the Unicode dingbats.

✁ ✂ ✃ ✄ ✅ ✆ ✇ ✈ ✉ ✊ ✋ ✌ ✍ ✎ ✏
✐ ✑ ✒ ✓ ✔ ✕ ✖ ✗ ✘ ✙ ✚ ✛ ✜ ✝ ✞ ✟
✠ ✡ ✢ ✣ ✤ ✥ ✦ ✧ ✨ ✩ ✪ ✫ ✬ ✭ ✮ ✯
✰ ✱ ✲ ✳ ✴ ✵ ✶ ✷ ✸ ✹ ✺ ✻ ✼ ✽ ✾ ✿
❀ ❁ ❂ ❃ ❄ ❅ ❆ ❇ ❈ ❉ ❊ ❋ ❌ ❍ ❎ ❏
❐ ❑ ❒ ❓ ❔ ❕ ❖ ❗ ❘ ❙ ❚ ❛ ❜ ❝ ❞ ❟
❠ ❡ ❢ ❣ ❤ ❥ ❦ ❧ ❨ ❩ ❪ ❫ ❬ ❭ ❮ ❯
❰ ❱ ❲ ❳ ❴ ❵ ❶ ❷ ❸ ❹ ❺ ❻ ❼ ❽ ❾ ❿
➀ ➁ ➂ ➃ ➄ ➅ ➆ ➇ ➈ ➉ ➊ ➋ ➌ ➍ ➎ ➏
➐ ➑ ➒ ➓ ➔ ➕ ➖ ➗ ➘ ➙ ➚ ➛ ➜ ➝ ➞ ➟
➠ ➡ ➢ ➣ ➤ ➥ ➦ ➧ ➨ ➩ ➪ ➫ ➬ ➭ ➮ ➯
➰ ➱ ➲ ➳ ➴ ➵ ➶ ➷ ➸ ➹ ➺ ➻ ➼ ➽ ➾ ➿

It would appear that Verdana, Tahoma, Arial, and Courier support most of them.

[MarkT2]

This forum is for testing deployment of the latest code in the phpBB repository, not to test things outside of it.

Oh, sorry, mods can move it wherever is best for suggestions for future versions of phpBB. And the post required and obtained approval.

It was suggested I post here by Christian 2.0 (Former Team Member) in this topic: Re: Using Font Awesome as small icon replacement

[DavidIQ]

Really? Running IE9 with the developer tools, in Browser Mode and Document Mode the above link displays the icons fine in IE7 and IE8 on my computer. I don't have an actual genuine copy of IE8 to test, but don't see why it shouldn't work.

Running any IE browser in compatibility mode does not mean the browser will behave like the browser version you've selected. It's "close", whatever that might mean for Microsoft, but not really the same so things are likely to behave differently in the real version. Not necessarily the case here...but just saying.

This forum is for testing deployment of the latest code in the phpBB repository, not to test things outside of it.

Oh, sorry, mods can move it wherever is best for suggestions for future versions of phpBB. And the post required and obtained approval.

It was suggested I post here by Christian 2.0 (Former Team Member) in this topic: Re: Using Font Awesome as small icon replacement

EXreaction is referring to this:

Maybe some here are in the wrong forum, it says phpBB's testing ground of bleeding edge code, not to find spurious and inaccurate reasons to avoid using bleeding edge code

[EXreaction]

Font related issues are tricky because we need to consider broader usage than just in English on the default fonts. Many boards are not in English and I would assume a good number of boards, especially those in languages not in any way similar to English (e.g. Asian, Arabic), use different default fonts.

So the problem is, what happens on these boards that decide to use different fonts? These icons cannot look garbled for any subset of users (with different languages, fonts, operating systems, or browsers).

If someone wants to do some research on this and find out what these icons would look like on the buttons in a variety of operating systems and browsers (at least for any browser with greater than 5% penetration), that would be a great start. If we know it at least works for all the browsers we'd like to support, research can be done into what fonts may be used on international sites and make sure no problems would arise for those users.