So I've read dozens of related questions, tried using all solutions however none seem to work. Am I missing something? Here's screenshot: The problem is these arrows arent in the middle of bigger icons.
CSS:
span.fa {
font-size: 50px;
}
i.fa {
font-size: 120px;
text-align: center !important;
text-decoration: none !important;
transition: 0.3s;
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-ms-transition: 0.3s;
}
i.fa-map-signs {
background: #f6f6f6;
color: #00b6ff;
}
i.fa-pencil {
background: #f6f6f6;
color: #00b6ff;
}
i.fa-credit-card {
background: #f6f6f6;
color: #00b6ff;
}
i.fa-hand-peace-o {
background: #f6f6f6;
color: #00b6ff;
}
HTML:
<div class="container-fluid bg-grey text-center">
<h2 style="margin-bottom: 100px;">Kaip tai veikia?</h2>
<div class="row slideanim">
<div class="col-sm-2">
<i class="fa fa-map-signs" style="vertical-align: middle;"></i>
<p>Susirandate norimą kursą bei datą</p>
</div>
<div class="col-sm-1">
<span class="fa fa-arrow-right" style="vertical-align: middle;"></font>
</div>
<div class="col-sm-2">
<i class="fa fa-pencil"></i>
<p>Užsiregistruojate į norimą kursą</p>
</div>
<div class="col-sm-1">
<span class="fa fa-arrow-right"></span>
</div>
<div class="col-sm-2">
<i class="fa fa-credit-card"></i>
<p>Susimokate</p>
</div>
<div class="col-sm-1">
<span class="fa fa-arrow-right"></span>
</div>
<div class="col-sm-2">
<i class="fa fa-hand-peace-o"></i>
<p>Viskas!</p>
</div>
</div>
</div>
I'm using bootstrap by the way. Thank you!
You need to set line-height
on span.fa
equal to the font-size
of your other icons:
span.fa { font-size: 50px; line-height: 120px; } i.fa { font-size: 120px; text-align: center !important; text-decoration: none !important; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; } i.fa-map-signs { background: #f6f6f6; color: #00b6ff; } i.fa-pencil { background: #f6f6f6; color: #00b6ff; } i.fa-credit-card { background: #f6f6f6; color: #00b6ff; } i.fa-hand-peace-o { background: #f6f6f6; color: #00b6ff; }
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div class="container-fluid bg-grey text-center"> <h2 style="margin-bottom: 100px;">Kaip tai veikia?</h2> <div class="row slideanim"> <div class="col-sm-2"> <i class="fa fa-map-signs" style="vertical-align: middle;"></i> <p>Susirandate norimą kursą bei datą</p> </div> <div class="col-sm-1"> <span class="fa fa-arrow-right" style="vertical-align: middle;"></font> </div> <div class="col-sm-2"> <i class="fa fa-pencil"></i> <p>Užsiregistruojate į norimą kursą</p> </div> <div class="col-sm-1"> <span class="fa fa-arrow-right"></span> </div> <div class="col-sm-2"> <i class="fa fa-credit-card"></i> <p>Susimokate</p> </div> <div class="col-sm-1"> <span class="fa fa-arrow-right"></span> </div> <div class="col-sm-2"> <i class="fa fa-hand-peace-o"></i> <p>Viskas!</p> </div> </div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.