Placeholder fa-fw doesn't work on SVG framework

[JoshMcCullough]

Picture a menu with icons followed by text on each line. If we don't have an icon to use for a given menu item, we still need to have a "spacer" icon there so the text of the menu items align. fa-fw is a partial fix for this, but if you don't specify an icon, then the ? icon is displayed.

<li>
  <i class="fa fa-fw fa-file-text-o"> I have an icon
</li>
<li>
  <!-- this one should be blank, in a perfect world -->
  <i class="fa fa-fw"> I do not have an icon
</li>

FA5 syntax example: https://jsfiddle.net/tagliala/wks0e6pa/31/

(Brought over from issue #1606.)

[tagliala]

@robmadole I think this use case is legitimate

We have at least those options

1. Do not display the missing icon placeholder when only fa-fw is found as class (but this smells like an error on the developer's side)
2. Add display: inline-block to .fa-fw (⚠️ potential breaking change): https://jsfiddle.net/tagliala/wks0e6pa/35/

I'm still personal against introducing a placeholder class in font awesome's core because it must be clear that icons have not the same width, and if you want to line-up multiple icons you have to use fa-fw

What do you suggest?

[talbs]

Hi, @tagliala and @JoshMcCullough. Thanks for bringing this up and for the good thoughts. I'd solve this with some quick custom markup/styling on my project's end that hides the icon visually (opacity: 0.0) and semantically from screen readers (aria-hidden="true").

Here's a quick demo of the direction - https://codepen.io/fontawesome/pen/yQwwNX.

@JoshMcCullough would that solve the issue and help your situation?

[JoshMcCullough]

@talbs Yes, of course we can add our own CSS to handle this. I simplified your example: https://codepen.io/anon/pen/xQBeoR (no need to set margin or include an icon class)

That's a fine solution if this doesn't matter to many people, else adding an fa-empty class into FontAwesome itself seems like a simple addition.

[tagliala]

@JoshMcCullough I understand your point, but I think that fa-empty will not solve the problem and that simple addition will come with caveats

fa-empty should just be an alias of .fa-fw with inline-block display style. Also, it should be used in conjunction with fa-fw in a proper use case, because Font Awesome icons have not the same width by design choice. We then need to document the behavior of fa-empty

Example:

<!-- Bad (Icons will not line-up, developers should avoid this) -->
<li><i class="fas fa-user"></i> Row 1</li>
<li><i class="fas fa-envelope"></i> Row 2</li>
<li><i class="fa-empty"></i> Row 3</li>

<!-- Good (icons will line-up, but `fa-empty` should be defined exactly
     as `fa-fw`, provide the `display: inline-block` property missing in `fa-fw`
     and used together with `fa-fw`) -->
<li><i class="fas fa-fw fa-user"></i> Row 1</li>
<li><i class="fas fa-fw fa-envelope"></i> Row 2</li>
<li><i class="fa-empty"></i> Row 3</li>

[JoshMcCullough]

No problem at all if you don't think it's that useful for most people, easy to handle on our own.

[tagliala]

@JoshMcCullough thanks for your understanding.

Anyway, I would like to provide a better way for managing fa-fw placeholders in the SVG framework. And I did not think that this is not useful (never said that), I just think that adding fa-empty is not a simple and straightforward solution for the reason I've pointed out

[robmadole]

@tagliala yeah let me consider this a bit. Because an fa-empty or a fa-fw really only gets you kinda close to what the actual width of the icon is going to be. Since the width is variable this is more challenging.

[tagliala]

@robmadole we could provide an fa-fw-placeholder class with the same width of fa-fw and display: inline-block property, documented at https://fontawesome.com/how-to-use/on-the-web/styling/fixed-width-icons, to remark the concept that those classes have to work together to stay consistent.

In that way, the new class would semantically complement fa-fw for this legitimate use case rather than
pretenting to represent an "empty icon". This should work on both CSS and SVG framework, with no breaking changes. At the moment, I cannot think of side effects

Then, in version v6.0 we could add display: inline-block to fa-fw, deprecate fa-fw-placeholder, and eventually remove the latter in v7.0

Fiddles:

• http://jsfiddle.net/tagliala/wks0e6pa/45/ (SVG)
• http://jsfiddle.net/tagliala/rodg718s/10/ (CSS)

What do you think?

[JoshMcCullough]

Sounds good to me!

[robmadole]

@tagliala the SVG implementation would still show a "missing icon" symbol. 🤔

I think the proper fix is going to be making the SVG implementation match the behavior of the web fonts version.

[andrews05]

@tagliala fa-fw-placeholder sounds like a great option to me. Is this waiting on anything?