Question

我需要知道如何在悬停时缩放图标。通常，我使用以下sass代码：

.social
  -webkit-transition-duration: 0.5s
  -moz-transition-duration: 0.5s
  -o-transition-duration: 0.5s
  -webkit-transform: scale(0.8)
  -moz-transform: scale(0.8)
  -o-transform: scale(0.8)
  &:hover
    -webkit-transform: scale(1.1)
    -moz-transform: scale(1.1)
    -o-transform: scale(1.1)

当我开始为Angular使用标准的awesome-font lib时，它停止了工作。我的代码：

<a href="https://www.facebook.com/#/">
  <fa-icon id="social-fb"
           class="social"
           [icon]="['fab','facebook-square']"
           size="3x">
  </fa-icon>
</a>

我是Angular的新手。如果这个问题很愚蠢，我真的很抱歉。

Answer 1

因为fa-icon是一个组件，所以它不像原始svg那样应用缩放。

您需要做的是访问fa-icon组件中的child元素。尝试访问子svg元素-（我记得该子是svg元素，但使用检查工具可以准确地找到它）

&:hover {
    > svg {
      transform: scale(1.1)
      -webkit-transform: scale(1.1)
      -moz-transform: scale(1.1)
      -o-transform: scale(1.1)
    }
}

请记住默认的transform: scale(1.1)，大多数现代浏览器都支持它。

如何在悬停时以动画的方式显示真棒字体

1 个答案: