"Blank" Glyphicon

[jsetzer]

Good morning,

in a custom calendar page I have added a dropdown-button for setting filters. All dropdown options should indicate whether they are checked or not.

For checked options I can use Icon glyphgicon-ok.

Problem
As far as I know there is no "blank" glyphicon having the same width as other glyphicons, by default. So, unchecked options (without icon) will have a different indentation than checked options as you can see here:

chrome_5oF2QSo4El.png (6.55 KiB) Viewed 534 times

Personally, I dislike this. I would like to see identical text-indentation for all options.

Solution
I have found a very short CSS hack which "adds" a blank glyphicon:

Additional CSS

Code: Select all

.glyphicon-blank:before {
    content: "\2122";
    color: transparent !important;
}

• Icon for unckecked option:
  <i class="glyphicon glyphicon-blank"></i>
  Note that glyphicon-blank does not exist, by default.
• Icon for ckecked option:
  <i class="glyphicon glyphicon-ok"></i>

Now all options are well-aligned which I really prefer:

chrome_Lz62OAH4nH.png (22.07 KiB) Viewed 534 times

Just wanted to share this tiny CSS hack with you!

See also:

• Custom Pages in AppGini
• Dropdown Buttons in Bootstrap 3

[onoehring]

Hi Jan,

thanks for sharing.
Olaf