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

[hanakin]

*Note This is part 8 of a series found here



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

[FloFlo91]

Good idea, we will have faster pages.

[PayBas]

To give you some idea of what it looks like (not finished at all!).

fa.png

(78.01 KiB) Downloaded 1399 times

[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

[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]

To give you some idea of what it looks like (not finished at all!).

Snap1.jpg

(100.57 KiB) Downloaded 1156 times

So... how do you remove your own brain?

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

(100.57 KiB) Downloaded 1156 times

[hanakin]

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.

[MattF]

Font Awesome is...erm...awesome!

[Profo]

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.

[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