Advantages of Font Icon Replacement

Note: We are moving the topics of this forum and it will be deleted at some point

Publish your own request for comments/change or patches for the next version of phpBB. Discuss the contributions and proposals of others. Upcoming releases are 3.2/Rhea and 3.3.
MarkT2
Registered User
Posts: 9
Joined: Tue Feb 05, 2013 8:49 am

Advantages of Font Icon Replacement

Post by MarkT2 » Tue Feb 05, 2013 6:39 pm

  • 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.

User avatar
DionDesigns
Registered User
Posts: 51
Joined: Sat Apr 21, 2012 4:29 am
Location: Uncertain due to momentum
Contact:

Re: Advantages of Font Icon Replacement

Post by DionDesigns » Tue Feb 05, 2013 10:44 pm

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
Registered User
Posts: 9
Joined: Tue Feb 05, 2013 8:49 am

Re: Advantages of Font Icon Replacement

Post by MarkT2 » Wed Feb 06, 2013 12:18 am

Really ?

User avatar
Pony99CA
Registered User
Posts: 986
Joined: Sun Feb 08, 2009 2:35 am
Location: Hollister, CA
Contact:

Re: Advantages of Font Icon Replacement

Post by Pony99CA » Wed Feb 06, 2013 2:29 am

DionDesigns wrote: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
Silicon Valley Pocket PC (http://www.svpocketpc.com)
Creator of manage_bots and spoof_user (ask me)
Need hosting for a small forum with full cPanel & MySQL access? Contact me or PM me.

MarkT2
Registered User
Posts: 9
Joined: Tue Feb 05, 2013 8:49 am

Re: Advantages of Font Icon Replacement

Post by MarkT2 » Wed Feb 06, 2013 7:16 am

Pony99CA wrote:
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

User avatar
EXreaction
Registered User
Posts: 1555
Joined: Sat Sep 10, 2005 2:15 am

Re: Advantages of Font Icon Replacement

Post by EXreaction » Wed Feb 06, 2013 7:43 am

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

User avatar
DionDesigns
Registered User
Posts: 51
Joined: Sat Apr 21, 2012 4:29 am
Location: Uncertain due to momentum
Contact:

Re: Advantages of Font Icon Replacement

Post by DionDesigns » Wed Feb 06, 2013 8:24 am

DionDesigns wrote: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
Registered User
Posts: 9
Joined: Tue Feb 05, 2013 8:49 am

Re: Advantages of Font Icon Replacement

Post by MarkT2 » Wed Feb 06, 2013 8:41 am

EXreaction wrote: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

User avatar
DavidIQ
Customisations Team Leader
Customisations Team Leader
Posts: 1764
Joined: Thu Mar 02, 2006 4:29 pm
Location: Earth
Contact:

Re: Advantages of Font Icon Replacement

Post by DavidIQ » Wed Feb 06, 2013 11:28 am

MarkT2 wrote: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.
MarkT2 wrote:
EXreaction wrote: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:
MarkT2 wrote: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
Image

User avatar
EXreaction
Registered User
Posts: 1555
Joined: Sat Sep 10, 2005 2:15 am

Re: Advantages of Font Icon Replacement

Post by EXreaction » Wed Feb 06, 2013 4:33 pm

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.

Post Reply