Question

我有一个编辑按钮，当用户将鼠标悬停在它上面时我希望增加它。然而它确实与文本保持一致，并且在图标的每一侧都不会均匀扩展，它只会在右上角扩展。

#quiznavn::after {
    font-size: 10pt;
    font-family: "FontAwesome";
    content: "\f044";
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    -webkit-font-smoothing: antialiased;
    width: 1em;
    display: inline-block;
    margin-left: 10px;
    margin-right: 5px;
    color: black;
}
#quiznavn:hover::after {
    font-size: 13pt;
    font-family: "FontAwesome";
    content: "\f044";
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    -webkit-font-smoothing: antialiased;
    width: 1em;
    display: inline-block;
    margin-left: 10px;
    margin-right: 5px;
}

https://jsfiddle.net/kbw1yurh/

Answer 1

使用

transform:scale(1.5)

而是将transform-origin设置为50％50％。

https://jsfiddle.net/foreyez/c17fjsx8/

注意：如果您在iOS上使用此功能，则需要使用-webkit-transform，-webkit-transform-origin等作为前缀，否则它将无法正常工作。

Answer 2

我没有在你的代码中看到你所指的这个按钮，所以我假设你有一个。

.btn {
  width: 120px;
  height: 60px;
  padding: 0;
  font-size: 12pt;
  display: table;
}

.btn span {
  padding: 0;
  vertical-align:middle;
  display: table-cell;
  width: 70px;
}

.btn span:nth-of-type(1) {
  width: 30px;
}

.btn:hover i {
  font-size: 17pt;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<button class="btn">
  <span><i class="fa fa-user"></i></span><span>Click me!</span>
</button>

AwesomeFont在悬停时从中心平等扩展

2 个答案: