Menu
I am trying to get two fontawesome icons caret up and caret down to stack on stop of each other without hiding one and showing the other? Any suggestions would be greatly appreciated. Here is a plucker with Bootstrap and fontawesome: https://plnkr.co/edit/S1rSo41lkG4ZPjnaS0lf?p=preview
<div class="col-md-4 col-xs-12">
<div class="pull-left">
<i class="fa fa-caret-up pull-left" aria-hidden="true"></i>
<i class="fa fa-caret-down pull-left" aria-hidden="true"></i>
<span style="padding-right: 8px">Worker</span>
</div>
<div class="pull-left">
<i class="fa fa-caret-up pull-left" aria-hidden="true"></i>
<i class="fa fa-caret-down pull-left" aria-hidden="true"></i>
<span style="padding-right: 8px">Entitlement</span>
</div>
<div class="pull-left">
<i class="fa fa-caret-up pull-left" aria-hidden="true"></i>
<i class="fa fa-caret-down pull-left" aria-hidden="true"></i>
<span style="padding-right: 8px">Request Date</span>
</div>
</div>
852
asked Mar 10 '17 14:03
To stack multiple icons, use the fa-stack class on the parent HTML element of the 2 icons you want to stack. Then add the fa-stack-1x class for the regularly sized icon and add the fa-stack-2x class for the larger icon. fa-inverse can be added to the icon with the fa-stack-1x to help with a knock-out looking effect.
To display Caret-Down font awesome icon, add predefined class name i.e., fa-caret-down (with prefix fa- ) to the i tag. And we need to add corresponding font awesome icon style for the Caret-Down icon. Caret-Down icon has 1 icon style i.e.,solid. We need to append icon style class fas .
fas: font awesome solid. It is also free to use. fab: font awesome brands.
Another way of doing this is with .fa-stack and a bit of css and html like this:
.pull-left from your <i>
<span class="fa fa-stack"></span> around each pair.fa-stack {
text-align: center;
}
.fa-stack .fa-caret-down {
position: absolute;
bottom: 0;
}
.fa-stack .fa-caret-up {
position: absolute;
top: 0;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet" />
<div class="col-md-4 col-xs-12">
<div class="pull-left">
<span class="fa fa-stack">
<i class="fa fa-caret-down" aria-hidden="true"></i>
<i class="fa fa-caret-up" aria-hidden="true"></i>
</span>
<span style="padding-right: 8px">Worker</span>
</div>
<div class="pull-left">
<span class="fa fa-stack">
<i class="fa fa-caret-up" aria-hidden="true"></i>
<i class="fa fa-caret-down" aria-hidden="true"></i>
</span>
<span style="padding-right: 8px">Entitlement</span>
</div>
<div class="pull-left">
<span class="fa fa-stack">
<i class="fa fa-caret-up" aria-hidden="true"></i>
<i class="fa fa-caret-down" aria-hidden="true"></i>
</span>
<span style="padding-right: 8px">Request Date</span>
</div>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
