From 13fd8159762b24fd34c662f3036be143e83b3a8c Mon Sep 17 00:00:00 2001 From: Alexander Ebert Date: Fri, 29 Jan 2016 12:15:48 +0100 Subject: [PATCH] Using a matching line-height for icons Previously the line-height was set to 1em which leads to a distinct misalignment due to the icon being smaller than the fixed dimensions element. Increasing the line-height to match the vertical size causes the icon to be aligned with the base-line where it previously was slightly shifted to the top of the element. --- wcfsetup/install/files/style/icon/icon.scss | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/wcfsetup/install/files/style/icon/icon.scss b/wcfsetup/install/files/style/icon/icon.scss index 2c56811ea6..e523cc3eec 100644 --- a/wcfsetup/install/files/style/icon/icon.scss +++ b/wcfsetup/install/files/style/icon/icon.scss @@ -16,7 +16,6 @@ font-family: FontAwesome; font-weight: normal !important; font-style: normal !important; - line-height: 1em; text-align: center; -webkit-user-select: none; @@ -86,18 +85,21 @@ a > span.fa:not(.pointer) { .icon16 { font-size: 14px; height: 16px; + line-height: 16px; width: 16px; } .icon24 { font-size: 18px; height: 24px; + line-height: 24px; width: 24px; } .icon32 { font-size: 28px; height: 32px; + line-height: 32px; width: 32px; vertical-align: -5px; } @@ -105,18 +107,21 @@ a > span.fa:not(.pointer) { .icon48 { font-size: 42px; height: 48px; + line-height: 48px; width: 48px; } .icon96 { font-size: 84px; height: 96px; + line-height: 96px; width: 96px; } .icon144 { font-size: 130px; // TODO height: 144px; + line-height: 144px; width: 144px; } -- 2.20.1