0

I'm making a paging control for a grid, and using font awesome icons for prev, next buttons.

The issue is that the icon (and any text that is in that element) appear 1 or two pixels higher than text where the font icon classes are not defined. Other font libraries such as https://icomoon.io appear to have the same behavior.

In the image below, you can see how the image and it's text do not align well vertically with the page numbers. Setting vertical-align styles on the element or pseudo element do not seem to help as none of the vertical alignment settings gives aligns perfectly.

enter image description here

enter image description here

Jeremy
  • 44,950
  • 68
  • 206
  • 332
  • Is it an alignment problem or a size problem? – Ori Drori Nov 23 '18 at 23:41
  • 1
    try to control the `line-height` – Temani Afif Nov 23 '18 at 23:43
  • line-height and font-size are the same for all elements and the icon pseudo elements – Jeremy Nov 24 '18 at 00:02
  • Even if I change the font sizes to larger fonts, it's always 1 or two pixels off. But because there are borders I can't just set the margin-top because then the borders look different for some buttons and not others – Jeremy Nov 24 '18 at 00:06
  • Hey Jeremy, if you show us some code it might be easier than having us guess which attribute you have or haven't used. Post some code here and possibly a codepen if possible. – Robster Nov 24 '18 at 01:20

1 Answers1

0

I've encountered the same problem and found the solution on another post and adding this to my css fixed it for me.
Don't forget to put the good associated icon (mine was fa-lock) and the good content value

.fa-lock:before {
  content: "\f023"; /*This is what the creator of font-awesome put in to show the lines character */
  display:block;
  margin-top:-1px;
}
LurkRedemption
  • 41
  • 1