[Solved] center align icon fonts horizontally

[bgbs]

I can’t figure out how to txt-center icon fonts. They just don’t center no matter what you do.
example of css and html below

<div>
   <i class="icon-design">nbsp;</i>
</div>

.icon-design:before {
    content: "\e610";color:#f16822;text-align: center;
}

Any ideas what’s going on?

[gilgimech]

From the example you give the before element doesn’t have a width, so the element is only as wide as the content. There’s no space for it to “center”.

Now, if you add width like this.

.icon-design:before{
    content: "\e610";
    color:#f16822;
    text-align: center;
    display: block;
    width:100px;
}

that will let it be centered. Also you need the display: block for it to work. If you have other content in the div and you want the before element to be to the left of it. You’ll need to use display: inline-block;

[gilgimech]

You can check out this pen for an example.
http://codepen.io/jawittdesigns/pen/Feckf/

[bgbs]

Thank you, that saved the day

[Author]

Posts