mardi 21 avril 2015

Center custom glyph in a CSS pseudo element

I have define a "cross" like symbol in a svg file as

<glyph unicode="&#xe604;" d="M784.646 720.646c-30.038 30.038-79.328 30.038-109.367 0l-163.282-163.282-163.282 163.282c-30.038 30.038-79.328 30.038-109.367 0s-30.039-79.328 0-109.367l163.282-163.282-163.282-163.282c-30.039-30.038-30.039-79.328 0-109.367s79.328-30.038 109.367 0l163.282 163.282 163.282-163.282c30.038-30.038 79.328-30.038 109.366 0s30.038 79.328 0 109.367l-163.282 163.282 163.282 163.282c30.038 30.038 30.038 79.328 0 109.366z" />

And I tried to put this icon to a pseudo element in css as I have html

<span class="icon icon-close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true"></span></span>

and css .icon-close:before { content: '\e604'; color: #474747;

But the cross in the element is drifting by 1 pixel depending on the place the popup appears on the screen (the cross icon is meant to be the close button on the popup)

drift to left:left drifting drift to right:right drifting (I give the psuedo element a grey background to illustrate clearer)

Do you have any ideas why this happens and how should I make the icon stick to the center?

Aucun commentaire:

Enregistrer un commentaire