[FIXED] how to place font-awesome arrow icon center vertically

Issue

.btnup, .btndown{
    	display:inline-block;
    	font-size:20px;
    	background:#ddd;
    	border-radius:5px;
    	cursor:pointer;
    	width:25px;
    	line-height:30px;
    	height:30px;
    	color:#999;
    	text-align:center;
    	margin:0 5px;
    }

    <link href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" rel="stylesheet"/>

    <i class="fas fa-angle-up btnup" id='btnup'></i>
    <i class="fas fa-angle-down btndown" id='btndown'></i>

How to place the arrows on center vertically ?

Solution

You can add top and bottom padding (and subtract those values from the heightsetting):

.btnup, .btndown{
    	display:inline-block;
    	font-size:20px;
    	background:#ddd;
    	border-radius:5px;
    	cursor:pointer;
    	width:25px;
    	line-height:30px;
    	height:20px;
    	color:#999;
    	text-align:center;
    	margin:0 5px;
      padding: 5px 0 5px 0;
    }

<link href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" rel="stylesheet"/>

    <i class="fas fa-angle-up btnup" id='btnup'></i>
    <i class="fas fa-angle-down btndown" id='btndown'></i>

Answered By - Johannes

Answer Checked By - Marilyn (PHPFixing Volunteer)