Include a Warning About "box-sizing: border-box"

[jtfairbank]

It seems like most of Font Awesome expects the actual icon tags to have box-sizing: content-box applied to them.

I just spent about an hour debugging an issue with fa-border and fa-fw (both individually and in combination). It ended up that Bootstrap applies box-sizing: border-box to all elements by default. I had a hack worked out with some custom styles per-icon (ie changing the border padding or messing with the fixed width) but that is really messy. I'm glad I found the root of the problem so I don't have to include or maintain this hack.

Perhaps you should add box-sizing: content-box to the .fa class (and maybe .fa-stack, etc)?

At the very least, it'd be helpful to have a note somewhere visible on your site that mentions this could be an issue. The examples page seems like a good place for these implementation tips and tricks.

[tagliala]

@jtfairbank thanks for reporting this

could you please post a fiddle showing the issue and your workaround?

You can start with this one: https://jsfiddle.net/tagliala/syduuue9/

[jtfairbank]

Here you go: https://jsfiddle.net/cL0hto3p/

Seems like the main issue is when fa-border and fa-fw are applied at the same time, with Bootstrap present on the page. It seems like having box-sizing: border-box messes with the margin + border sizing on that combo.

Being able to easily extend and customize design libraries like FA or Bootstrap is huge, so it'd definitely be helpful to have a section in your docs that points out gotchas / tips / tricks to do that. For example: watch out for the box-sizing with bootstrap, or here's an easy way to make all the icons the same width / height and center them within a border.

Pretty excited about FortAwesome as well, maybe that side could open up a developer forum so we can share our own cool uses of FA and tips and tricks? Kinda like a Dribble section for tweaking FA to perfection?

[tagliala]

I can confirm there is this issue and it should be documented.

Since FA is not including specific framework fixes, this should be fixed on user side. Maybe we need a new wiki: https://github.com/FortAwesome/Font-Awesome/wiki/Bootstrap-Caveats

A possible workaround: https://jsfiddle.net/tagliala/m26owobt/2/

[jtfairbank]

Just a heads up- I had absolutely no clue that the wiki existed. My guess is that if it's not on your website (fortawesome.github.io/Font-Awesome/) then most people will not see it.

At the very least, include a prominent link from the site to the wiki.

[tagliala]

just started that wiki today

Added this issue to 5.0.0 milestone so we should remember to add a link to the docs

[jtfairbank]

Ok cool. Btw it seems like the .fa-fw.fa-border workaround you made isn't framework specific and makes sense to add to FA core. I'd think that the expected behavior of a fixed width, bordered icon is that the border is square (or even all around) and that each icon takes up exactly the same amount of space.

[pragyamishra56]

could you please assign me this would be my first contribution?

[tagliala]

Hi @pragyamishra56, thanks for your willing to contribute, but the documentation website is a generated in a private repository

Also, this issue will not be fixed because it is framework-specific, so let's refer to https://github.com/FortAwesome/Font-Awesome/wiki/Bootstrap-Caveats

Please add custom CSS to deal with this use case

Closing here