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

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

Post by hanakin »

Update

http://hanakin.github.io/PHPBB-StyleGuide/

I added icons to the styleguide referencing what I would expect the correct font-awsome icon equivalents would be for all the icons in prosilver

We can debate on the selection of icons using this
Donations welcome via Paypal Image

ecwpa
Registered User
Posts: 181
Joined: Mon Jan 24, 2005 2:10 am
Contact:

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

Post by ecwpa »

Looking really nice hanakin and PayBas.

I'm guessing all buttons will get a redesign as well since it seems the idea is to make a "flat" theme as a boilerplate.
Slightly better English than it was in 2005, still improving :D

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 necessarily right now im just mocking everything which is easier as flat, the design can easily change
Donations welcome via Paypal Image

User avatar
Louis7777
Registered User
Posts: 394
Joined: Fri Apr 04, 2014 12:32 am

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

Post by Louis7777 »

hanakin wrote:
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.
Why don't we just stick to image sprites?

The "font-awesome.min.css" is 20.2 KB while your current sprite for icons on GitHub is 12.9 KB. And the font's file size ranges from 70 to 140 kilobytes depending on the font's format (.otf, .eot, .ttf, .woff). So font awesome (v4.1.0) requires at least 90 kilobytes.

Moreover, if we stick to a single image sprite then that's only one http request while with font awesome it can be two (if the css file is not cached): the .css file and the font itself.

ecwpa
Registered User
Posts: 181
Joined: Mon Jan 24, 2005 2:10 am
Contact:

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

Post by ecwpa »

Fonts are a bit heavier but way more flexible, forum admins won't need image editors to change icon colors, or sizes. You also don't need to worry too much about retina assets since fonts scale nicely.

Also font formats can and will get better, for example woff2 compresses more effectively than woff.
Slightly better English than it was in 2005, still improving :D

Senky
Extension Customisations
Extension Customisations
Posts: 315
Joined: Thu Jul 16, 2009 4:41 pm

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

Post by Senky »

ecwpa wrote:Fonts are a bit heavier but way more flexible, forum admins won't need image editors to change icon colors, or sizes...
However, to change even a small line or arc, they need to use much more sophisticated tools, than image editors. For most admins, photoshop is much easier than any vector graphics editor.

ecwpa
Registered User
Posts: 181
Joined: Mon Jan 24, 2005 2:10 am
Contact:

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

Post by ecwpa »

Fair point. Although, if you want to make a new icon nobody stop you from doing it in Photoshop, no need to alter the font icons.

What I say is that the vast majority of admins will be changing icon sizes and color, those changing the icon shapes are a minority.

I could be wrong though, so it's worth continuing discussing it.
Slightly better English than it was in 2005, still improving :D

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 »

An image sprite is OK when those images are fixed. Font awesome is useful when you want to restyle the fonts in scale and color. As they say, "size, color, drop shadow, and anything that can be done with the power of CSS." This makes them ideal for style developers, who won't have to reinvent images just to get the colors or sizes to work with their new styles, for example.

The talk of concern about the size/http request for a font awesome CSS and font file is not an issue. It gets cached folks! It's typically a one time/once in a while thing, per user. Such concerns (over a single CSS/Font) should be relegated to the dustbin of the internet archive.

There are reasons why the leading designed web sites and frameworks use awesome tools like font awesome. It'd be nice to see phpBB join the rest of the modern web.
Has an irascible disposition.

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 to mention that their will be far more icons required in a redesign which would increase any sprites size. compare a 400+ icon sprites size to that of a 400+ icon font an the size of the font will win in the long run.
Donations welcome via Paypal Image

roufneck
Registered User
Posts: 7
Joined: Sat Oct 11, 2014 10:34 am

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

Post by roufneck »

I've been playing with this a bit for my own theme. I must say font awesome is awesome indeed. However it's a pain to change icon names in the templates. I know this since I used bootstraps glyphicons and needed more icons. Now I have to convert the class names again.

Since you are using less, it's pretty easy to get your own naming like "icon icon-edit". If you use this convention instead of using "fa fa-pencil", it's a lot easier to change fonts or extend it in the future.

For this to work you need to
1. include all fontawesome less files manually
2. override its "@fa-css-prefix" setting with "icon" instead of "fa"
3. include your own icons.less file with your own named icons...

Code: Select all

// Buttons
.@{fa-css-prefix}-new:before { content: @fa-var-plus; }
.@{fa-css-prefix}-lock:before { content: @fa-var-lock; }
.@{fa-css-prefix}-forward:before { content: @fa-var-mail-forward; }
.@{fa-css-prefix}-reply:before { content: @fa-var-mail-reply; }
.@{fa-css-prefix}-caret:before { content: @fa-var-sort-down; }
.@{fa-css-prefix}-tools:before { content: @fa-var-wrench; }

// Footer
.@{fa-css-prefix}-members:before { content: @fa-var-group; }
.@{fa-css-prefix}-team:before { content: @fa-var-shield; }
.@{fa-css-prefix}-delete:before { content: @fa-var-trash-o; }
This generates...

Code: Select all

.icon-new:before {
  content: "\f067";
}
.icon-lock:before {
  content: "\f023";
}
.icon-forward:before {
  content: "\f064";
}
.icon-reply:before {
  content: "\f112";
}
.icon-caret:before {
  content: "\f0dd";
}
.icon-tools:before {
  content: "\f0ad";
}
To me it makes more sense to use "icon icon-team" than "fa fa-shield".

EDIT: If you are interested: https://gist.github.com/gpeltink/ab990216a4958f86138c

Post Reply