bootstrap button with css.gg icon not in one line about css.gg HOT 7 CLOSED

@shaozi

Add flex class to the button like this:

<div class="btn btn-primary d-flex align-items-center">
      A button <span class="gg-sort-az"></span>
</div>

from css.gg.

But what about in a div or p element? I cannot put flexbox everywhere.
Why it is display as block not inline anyway?

from css.gg.

This is designed to be as standalone as possible, you can create a class and add it to every icon where you need and overwrite the display, or you can

 [class^="gg-"] {
   display: inline-flex; 
}

from css.gg.

Is there an easy way to unify all their size (same height) and alignment (align center)?

from css.gg.

Yes, you can just create a div with class .icon-wrapper and then do t he following

    .icon-wrapper {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 24px;
        height: 24px;
    }

And then your markup would look like:

    <div class="icon-wrapper>
          <i class="gg-add"></i>
    </div>

Also you can use the SVG version if don't like doing it with CSS.

from css.gg.

Did you eventually figure out how to do this in css only?
Having the same problem at the moment and im wondering why the css icons dont behave correctly.

Looks like this with astrits code:

from css.gg.

This can fix vertical alignment of the Format Bold Icon:

margin-top: calc(-4px * var(--ggs));

Maybe @astrit can merge this, if approved.

from css.gg.