Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Icon Request: Spacer/Blank #1606

Closed
ds125v opened this issue Jul 18, 2013 · 22 comments
Closed

Icon Request: Spacer/Blank #1606

ds125v opened this issue Jul 18, 2013 · 22 comments

Comments

@ds125v
Copy link

ds125v commented Jul 18, 2013

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
Copy link
Member

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
Copy link
Author

ds125v commented Jul 18, 2013

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
Copy link
Member

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
Copy link
Author

ds125v commented Jul 23, 2013

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
Copy link

olr commented Aug 12, 2013

I agree with ds125v. This is an useful feature.

@tagliala
Copy link
Member

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)

This was referenced Oct 8, 2013
@rafaelsalomon
Copy link

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
Copy link
Member

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
Copy link

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
Copy link

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
Copy link
Member

tagliala commented Aug 7, 2014

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 tagliala closed this as completed Aug 7, 2014
@tagliala
Copy link
Member

tagliala commented Aug 7, 2014

closing as dup of #754

@tagliala
Copy link
Member

tagliala commented Aug 7, 2014

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
Copy link

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
Copy link

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
Copy link

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
Copy link

teckel12 commented Jan 8, 2017

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
Copy link
Member

tagliala commented Jan 8, 2017

@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
Copy link

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>

image

@tagliala
Copy link
Member

@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
Copy link

benji commented Jun 5, 2019

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests