Font icons 1 or 2 pixels too high
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.
css font-awesome
asked Nov 23 '18 at 23:37
JeremyJeremy
23.7k58167287
add a comment |
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.
css font-awesome
asked Nov 23 '18 at 23:37
JeremyJeremy
23.7k58167287
Is it an alignment problem or a size problem?
– Ori Drori
Nov 23 '18 at 23:41
1
try to control theline-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 0: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 0: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.
– Robert Perez
Nov 24 '18 at 1:20
add a comment |
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.
css font-awesome
asked Nov 23 '18 at 23:37
JeremyJeremy
23.7k58167287
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.
css font-awesome
css font-awesome
asked Nov 23 '18 at 23:37
JeremyJeremy
23.7k58167287
asked Nov 23 '18 at 23:37
JeremyJeremy
23.7k58167287
asked Nov 23 '18 at 23:37
JeremyJeremy
23.7k58167287
asked Nov 23 '18 at 23:37
JeremyJeremy
23.7k58167287
asked Nov 23 '18 at 23:37
JeremyJeremy
23.7k58167287
23.7k58167287
Is it an alignment problem or a size problem?
– Ori Drori
Nov 23 '18 at 23:41
1
try to control theline-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 0: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 0: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.
– Robert Perez
Nov 24 '18 at 1:20
add a comment |
Is it an alignment problem or a size problem?
– Ori Drori
Nov 23 '18 at 23:41
1
try to control theline-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 0: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 0: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.
– Robert Perez
Nov 24 '18 at 1:20
Is it an alignment problem or a size problem?
– Ori Drori
Nov 23 '18 at 23:41
Is it an alignment problem or a size problem?
– Ori Drori
Nov 23 '18 at 23:41
1
1
try to control the
line-height– Temani Afif
Nov 23 '18 at 23:43
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 0:02
line-height and font-size are the same for all elements and the icon pseudo elements
– Jeremy
Nov 24 '18 at 0: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 0:06
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 0: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.
– Robert Perez
Nov 24 '18 at 1:20
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.
– Robert Perez
Nov 24 '18 at 1:20
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53453906%2ffont-icons-1-or-2-pixels-too-high%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53453906%2ffont-icons-1-or-2-pixels-too-high%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
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 0: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 0: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.
– Robert Perez
Nov 24 '18 at 1:20