Font-awesome: Icon Request: Spacer/Blank

[ds125v]

Is it possible to have have icon-spacer return a blank/transparent/invisible "spacer" that would take up roughly the same size as a normal icon for the purpose of aligning things?

[tagliala]

Can you please show an use case for this?

Icons in fontawesome have not the same height or width (expecially the latter).

You can make an icon invisible with a line of css or you can use "icon-fixed-with" class

Examples:

1) Invisible icon: http://jsfiddle.net/tagliala/7VcZq/

2) icon-fixed-width (no extra css needed): http://jsfiddle.net/tagliala/uHQXF/

[ds125v]

I think the icon-fixed-width class, which i wasn't previously aware of, mostly sorts this out for my purposes, but for the record:

In Bootstrap with the glyphicon sprite it was possible to use icon-spacer (or any other unrecognised classname of that format) and get a space the same size as the actual images, as a happy accident due to the way the CSS was written. I was wanting to recreate this with Font Awesome, and it turns out I can. As long as you add the icon-fixed-width class you can add icon-spacer (or any other unrecognized classname including just "icon-", and repeating "icon-fixed-width" would also work) and get a space the same size as the icons.

Thinking about it now, since Font Awesome is constantly adding icons it might still be a good idea to claim one name which will continue to work like this in future (e.g. icon-blank, icon-nothing).

The main use case would be to simplify the code needed to provide a blank space the same size as an icon since it would just be like any other icon. Particularly useful where you're provided with free text entry to specify an icon (since Font-Awesome is always growing) you can just tell them to use "spacer" rather than add a tickbox, or special case that in the code later.

[tagliala]

We can assume the average icon has 1em width, so

.icon-spacer::before,
.icon-blank::before {
  width: 1em;
  content: ' ';
}

I can provide a couple of examples where 1em doesn't fit the space of the missing icon: http://jsfiddle.net/tagliala/7VcZq/3/

(the red line should match where icon is missing)

I don't know if this will fit average needs

[ds125v]

I think an average space is fine, if people want it to line up pixel-perfect regardless of icon choice then they need to use fixed-width anyway.

[olr]

I agree with ds125v. This is an useful feature.

[tagliala]

https://github.com/twbs/bootstrap/blob/master/less/glyphicons.less#L31

this "solution" is nice (but we need the new syntax and please remember: fontawesome icons have not the same width)

[rafaelsalomon]

icon-blank would be great. we store states for certain user actions in our database and some states need an icon, others don't. with a blank icon, i can just write code to display an icon, no matter what. without a blank icon, i need to check if there is an icon and then display it in just those cases.

[tagliala]

Since icons have not the same width by design, it's recommended to add icon-fixed-width class, that will act as a spacer if empty.

Example: http://jsfiddle.net/tagliala/uHQXF/3/

In @rafaelsalomon like cases, if a class is needed for database validation, the following 5 lines of css will do the job (4, if the spacer alias is not needed):

.icon-spacer::before,
.icon-blank::before {
  width: 1em;
  content: ' ';
}

[filiplikavcan]

I assume that the use case is to create a space to show/toggle the icon later. What about setting visibility: hidden for any icon that should not be visible? That would maintain the width and leave the space for the exact width of the chosen icon.

[rafaelsalomon]

It's not so much for an icon that will be shown later but for a set of items where some will have a logo and some won't. And, yes, there are a million hacks or other ways to make it all work. But it would be really nice if there was a blank icon.

Date: Wed, 6 Aug 2014 13:32:55 -0700
From: [email protected]
To: [email protected]
CC: [email protected]
Subject: Re: [Font-Awesome] Icon Request: Spacer/Blank (#1606)

I assume that the use case is to create a space to show/toggle the icon later. What about setting visibility: hidden for any icon that should not be visible? That would maintain the width and leave the space for the exact width of the chosen icon.

—
Reply to this email directly or view it on GitHub.

[tagliala]

Icons have not the same width by design.

Use fa-fw for spacing purposes.

If you need to validate the database, allow empty values :)

Take a look at this example: http://jsfiddle.net/tagliala/YQTup/

[tagliala]

closing as dup of #754

[tagliala]

Added to troubleshooting guide: https://github.com/FortAwesome/Font-Awesome/wiki/Troubleshooting#need-a-blankempty-icon

Feel free to edit that guide, I'm not a native English speaker

[shangxiao]

I found that I needed a spacer to keep equivalent heights in buttons, and doing content: ' ' wasn't enough. Using a non-breaking space did the trick:

.icon-spacer::before,
.icon-blank::before {
  width: 1em;
  content: '\A0';
}

[danygiguere]

Simpliest way I can think:

First build a blank css class:
.blank {
visibility:hidden;
}

and then add it where you want:
li> Mon-Wed: 8am - 9pm

[lukejanicke]

Dare I say... the proper way is:

<i class="fa fa-fw">&nbsp;</i>

As many have already mentioned, you’ll need to set fa-fw. Then a simple HTML _non-breaking space_ entity inside the <i> element does the trick. I tested it. It truly is the same width as the fixed-width Font Awesome icons.

[teckel12]

Of all the replies here, only one really is the answer. The problem is when you're trying to set a space using CSS and not the FA classes. You can't do a content: "\f101 " or content: " \f101" or whatever. THAT'S why people are asking for a space character, so they can specify one via custom CSS. Why would we do that? Because sometimes you need to change the DOM like on a mouse-over or when something changes.

In any case, the solution is to use content: "\f101\A0" or content: "\A0\f101" or whatever you want. The "\A0" is the "trick" to add a space to FA when using a content CSS attribute.

But really, FA should just add a space font to avoid confusion.

Tim

[tagliala]

@teckel12 you should not use a space to dynamically replace an icon because icons have not the same width by design choice. This could result in text flickering or content width changing. Please keep using fa-fw for this use case or provide an empty icon which has the same width of the icon you are going to replace

Fiddle showing the issue: https://jsfiddle.net/tagliala/hu6qksdb/2/

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

[tagliala]

@JoshMcCullough thanks for bringing this to our attention.

Since your issue is related to the SVG framework and it is a legitimate use case, could you please open a new issue? Please also add a link to this fiddle https://jsfiddle.net/tagliala/wks0e6pa/31/ which is using FA5's syntax

Meanwhile, you could fix this by removing the fa and add the display: inline-block to fa-fw class, as in: https://jsfiddle.net/tagliala/wks0e6pa/29/

[benji]

I find that setting color: transparent works pretty well:

.fa-hidden {
  color: transparent;
}

Then you can use:
<em class="fa fa-download fa-hidden"></em>

[mohsinworld]

This code helped me <i class="fa fa-blank"></i>