Make font-awesome icon size increase on mouseover

3
votes

I am using font-awesome with bootstrap 4 cards, is there anyway to increase the size of the font-awesome icon (bottom right) when I mouse over the button?

in this case <i class="fa fa-folder-open fa-5x"></i>

Here is the HTML

                <div class="col-md-3 col-sm-6">
                    <div class="card card-inverse card-success">
                        <div class="card-block bg-success">
                            <div class="rotate">
                                <i class="fa fa-folder-open fa-5x"></i>
                            </div>
                            <center><a class="btn btn-success show" target="1" role="button"><h5 class="text-uppercase">open cases &nbsp;&nbsp;<i class="fa fa-arrow-circle-right fa-1x"></i></h5></a></center>
                            <h1 class="display-1"><center>7</center></h1>
                        </div>
                    </div>
                </div>

Here is what it presently looks like

enter image description here

2
csstwitter-bootstrapfont-awesome
.card:hover .fa { font-size: 6em; } ? – Philip
or use the transform: scale() css. Both look better adding a transition for the .fa so it will animate. – Philip
not without javascript, there is no parent selector, to target icon when you hover over the button – The Process
There's no need for JavaScript. CSS :hover should work. – Philip
@Philip, is there a way to target a specific fa ? you see if i use your solution it is expanding the arrow on the button which i dont want. – user3436467

2 Answers

6
votes

look maybe this help you

.rotate .fa.fa-folder-open:hover{
  font-size:6em;
  transition: 1s ease-out;
}

example

2
votes

Use .card:hover > .card-block > .rotate > .fa { } to target the icon.

Then you can use font-size: 6em; to enlarge the font or use the transform: scale() css.

Both look better adding a transition for the .fa so it will animate on hover.

EDIT: The transition should be set on .card > .card-block > .rotate > .fa { } (so without the :hover).

Example: .card > .card-block > .rotate > .fa { transition: font-size 0.35s ease; } .card:hover > .card-block > .rotate > .fa { font-size: 5em; }

(Don't forget to add extra rules with prefixes for cross-browser compatibility, see caniuse.com or W3schools for reference.)