CODEWITHSUNDEEP
htmlcssfont-awesome
Mark
Mark

Reputation: 1872

Lining up font awesome icon with text

Per the image below, these set on the same line, but I need the text centered with the icon, not at the bottom. What am I doing wrong here?

enter image description here

My code:

<div class="alertBtns">
    <button class="naviaBtn naviaBlue" ng-show="ppt.Globals.hasDebitCard" ng-click="alertShow = (alertShow == 2 ? -1 : 2)"><i class="fa fa-exclamation-circle fa-2x" ng-show="ppt.Swipes.length>0"></i>outstanding swipes</button>
    <button class="naviaBtn naviaBlue" ng-click="showAlerts();"><i class="fa fa-exclamation-circle fa-2x" ng-show="isNotRead"></i>recent denials</button>                    
    <button class="naviaBtn naviaBlue" ng-click="alertShow = (alertShow == 4 ? -1 : 4)"><i class="fa fa-exclamation-circle fa-2x" ng-show="dateAlert"></i>upcoming dates</button>
</div>

Upvotes: 0

Views: 838

Answers (3)

Ahmad Sharif
Ahmad Sharif

Reputation: 4435

Adjust the line-height of the text.

Upvotes: 0

Ismail Farooq
Ismail Farooq

Reputation: 6837

Try display:inline-block; and vertical-align:middle; in your button

Upvotes: 0

Wowsk
Wowsk

Reputation: 3675

Use vertical-align:middle; on the i element inside of the div.

div.alertBtns i{
  vertical-align:middle;  
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">

<div class="alertBtns">
    <button class="naviaBtn naviaBlue" ng-show="ppt.Globals.hasDebitCard" ng-click="alertShow = (alertShow == 2 ? -1 : 2)"><i class="fa fa-exclamation-circle fa-2x" ng-show="ppt.Swipes.length>0"></i>outstanding swipes</button>
    <button class="naviaBtn naviaBlue" ng-click="showAlerts();"><i class="fa fa-exclamation-circle fa-2x" ng-show="isNotRead"></i>recent denials</button>                    
    <button class="naviaBtn naviaBlue" ng-click="alertShow = (alertShow == 4 ? -1 : 4)"><i class="fa fa-exclamation-circle fa-2x" ng-show="dateAlert"></i>upcoming dates</button>
</div>

Upvotes: 1

Related Questions