From: Alexander Ebert <ebert@woltlab.com>
Date: Fri, 29 Jan 2016 11:15:48 +0000 (+0100)
Subject: Using a matching line-height for icons
X-Git-Tag: 3.0.0_Beta_1~2030^2~116
X-Git-Url: https://git.stricted.de/?a=commitdiff_plain;h=13fd8159762b24fd34c662f3036be143e83b3a8c;p=GitHub%2FWoltLab%2FWCF.git

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.
---

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;
 }