[Define New Theme] 8. Utilize Font Awesome icons where icons are needed to simplify server requests.

General discussion of development ideas and the approaches taken in the 3.x branch of phpBB. The current feature release of phpBB 3 is 3.3/Proteus.
Forum rules
Please do not post support questions regarding installing, updating, or upgrading phpBB 3.3.x. If you need support for phpBB 3.3.x please visit the 3.3.x Support Forum on phpbb.com.

If you have questions regarding writing extensions please post in Extension Writers Discussion to receive proper guidance from our staff and community.
Post Reply
User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 968
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

[Define New Theme] 8. Utilize Font Awesome icons where icons are needed to simplify server requests.

Post by hanakin »

*Note This is part 8 of a series found here

Image

given the need to improve performance & maintainability we should really look at including some sort of icon-font to replace most if not all of the iconic images that we use throughout the forums.

Their are really two global categories of icons
  1. Those currently beside all the links
  2. Imagesets
I am not saying that we should replace both but if nothing else we should be using an icon font to replace the first set.

We need a widely used, open, well established, vast set of icons at our disposal. I am suggesting that we use Font-Awsome as
  1. GPL compatible.
  2. Good support community to leverage requests for addition of new icons.
  3. Widely Used
  4. CDN availability
  5. 439 Icons and counting
  6. Screen Reader Compatible
  7. Lots of additional utilities that other icons fonts do not offer
I put together an example of the icons matches. Keep in mind this is just a rough example its all up for discussion but this will help facilitate it.
Test Case

Full List of Font-Awesome Icons

PR: https://github.com/phpbb/phpbb/pull/3851

*Note as of right now their is no icons for ICQ or AIM but they have issues created for both of them to be included all we need to do is up vote them
AIM: https://github.com/FortAwesome/Font-Awe ... t-43894620
ICQ: https://github.com/FortAwesome/Font-Awesome/issues/1272

Thoughts & Suggestions
Donations welcome via Paypal Image

User avatar
FloFlo91
Registered User
Posts: 11
Joined: Sun Jun 08, 2014 4:06 pm
Location: Paris, France
Contact:

Re: [Define New Theme] 8. Utilize Font Awesome icons where icons are needed to simplify server requests.

Post by FloFlo91 »

Good idea, we will have faster pages.

User avatar
PayBas
Registered User
Posts: 305
Joined: Tue Jul 29, 2008 6:08 pm
Contact:

Re: [Define New Theme] 8. Utilize Font Awesome icons where icons are needed to simplify server requests.

Post by PayBas »

To give you some idea of what it looks like (not finished at all!).
fa.png
fa.png (78.01 KiB) Viewed 1400 times

User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 968
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: [Define New Theme] 8. Utilize Font Awesome icons where icons are needed to simplify server requests.

Post by hanakin »

not bad but I do not agree with a lot of the choices. I did some updates to the icon listing http://midaym.com/test/mino/buttons.html some still need work but? also not really the right place but quote needs moved next to edit
Donations welcome via Paypal Image

Profo
Registered User
Posts: 10
Joined: Fri Jul 18, 2014 6:15 am

Re: [Define New Theme] 8. Utilize Font Awesome icons where icons are needed to simplify server requests.

Post by Profo »

And what about using a custom font?

Pros:
  • Size and performance: e.g. why should my forum load a font with 439 icons if it's going to use only 50?
  • Consistency: default icon-font can be updated with each new version of the style, not depending on external or third party updates.
Cons:
  • You loose the option to load the font from a CDN. This option is available with popular pre-made sets.
As a side note about imageset icons, it gets a bit more complicated to use font-icons when you have to deal with topic statuses (read, unread, hot), "own topics" feature (topic_mine), and topic-icons.
Statuses can be easily solved with colours, but the other 2 features would need some love in order to avoid using images.

@PayBas, I like the example with small icons.

mrgtb
Registered User
Posts: 221
Joined: Wed Nov 28, 2007 10:09 pm

Re: [Define New Theme] 8. Utilize Font Awesome icons where icons are needed to simplify server requests.

Post by mrgtb »

PayBas wrote:To give you some idea of what it looks like (not finished at all!).
Snap1.jpg
Snap1.jpg (100.57 KiB) Viewed 1157 times
So... how do you remove your own brain? :lol:

The post icons, such as Bold, Italic e.t.c look a little large to me, out of proportion. Another problem I see going on, they are square and suit the same look as the SUBMIT style buttons phpBB uses. But they need updating to not look like it's being viewed on a Windows 2000 PC. If they get updated to look better, then you have the problem of those Font Awesome post button icons looking same.

At the minute you've got new styled buttons with rounded edges that look far better using CSS, then have the old left-over styled submit buttons that really need updating to match up and improve the overall look.
Snap1.jpg
Snap1.jpg (100.57 KiB) Viewed 1157 times
Last edited by mrgtb on Sat Jul 19, 2014 2:47 pm, edited 4 times in total.

User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 968
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: [Define New Theme] 8. Utilize Font Awesome icons where icons are needed to simplify server requests.

Post by hanakin »

Profo wrote:And what about using a custom font?

Pros:
  • Size and performance: e.g. why should my forum load a font with 439 icons if it's going to use only 50?
  • Consistency: default icon-font can be updated with each new version of the style, not depending on external or third party updates.
Cons:
  • You loose the option to load the font from a CDN. This option is available with popular pre-made sets.
As a side note about imageset icons, it gets a bit more complicated to use font-icons when you have to deal with topic statuses (read, unread, hot), "own topics" feature (topic_mine), and topic-icons.
Statuses can be easily solved with colours, but the other 2 features would need some love in order to avoid using images.

@PayBas, I like the example with small icons.
439 icons is a + not a negative as it gives theme/extension authors the ability to add more or switch them around plus its all cached so their is no performance issues font-awsome is by far one of the two most used font packs on the internet making it one of the most already cached resources which is why we use the CDN.

as for any updates you can add your own via another icon-font on top of this or completely replace it.
Donations welcome via Paypal Image

User avatar
MattF
Extension Customisations
Extension Customisations
Posts: 675
Joined: Mon Mar 08, 2010 9:18 am

Re: [Define New Theme] 8. Utilize Font Awesome icons where icons are needed to simplify server requests.

Post by MattF »

Font Awesome is...erm...awesome!
Has an irascible disposition.

Profo
Registered User
Posts: 10
Joined: Fri Jul 18, 2014 6:15 am

Re: [Define New Theme] 8. Utilize Font Awesome icons where icons are needed to simplify server requests.

Post by Profo »

hanakin wrote:439 icons is a + not a negative as it gives theme/extension authors the ability to add more or switch them around plus its all cached so their is no performance issues.
Yes, I understand that. And for my forum it's fine. I will use it if it's included.
My idea came from a "default-style perspective". I was thinking about people who don't need extensions at all and/or don't want to use CDN. I saw that CDN is an option in ACP for privacy reasons. And if so, you have to keep a local copy of the complete font pack as a fallback for those who don't want to use CDN, like you do with jQuery.

User avatar
hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 968
Joined: Sat Dec 25, 2010 9:02 pm
Contact:

Re: [Define New Theme] 8. Utilize Font Awesome icons where icons are needed to simplify server requests.

Post by hanakin »

thats another debate all together but both would be provide with a fallback just like jquery is. The only reason CDN would should not be used is when you have no internet connections in the case of an intranet. In this case their is no issue using the local version as you have explicit control over what is used and cached
Donations welcome via Paypal Image

Post Reply