twitter-bootstrap 使鼠标悬停时字体很棒的图标大小增加

Make font-awesome icon size increase on mouseover

提问by user3436467

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?

我正在使用带有 bootstrap 4 卡的 font-awesome，当我将鼠标悬停在按钮上时，是否可以增加 font-awesome 图标（右下角）的大小？

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

在这种情况下 <i class="fa fa-folder-open fa-5x"></i>

Here is the HTML

这是 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

这是它目前的样子

采纳答案by Philip

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

使用.card:hover > .card-block > .rotate > .fa { }目标图标。

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

然后你可以使用font-size: 6em;放大字体或使用transform: scale()css。

Both look better adding a transitionfor the .faso it will animate on hover.

两者看起来都更好，transition为 the添加一个，.fa这样它就会在悬停时动画。

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

编辑：transition应该设置为.card > .card-block > .rotate > .fa { }（所以没有:hover）。

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

例子： .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.)

（不要忘记添加带有前缀的额外规则以实现跨浏览器兼容性，请参阅 caniuse.com 或 W3schools 以供参考。）

回答by alfredohb.q

look maybe this help you

看也许这对你有帮助

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

example

例子