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

[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

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

[hanakin]

not necessarily right now im just mocking everything which is easier as flat, the design can easily change

[Louis7777]

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]

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.

[Senky]

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]

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.

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

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

[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