可以使用过渡效果更改Font Awesome图标吗？

Question

不，我没有演示代码，但我一直在想：是否可能仅使用转换来更改font-awesome徽标？例如：更改类？我在w3schools上做了一些研究并发现了如何在font awesome图标中创建过渡效果这个链接，但它们并没有真正帮助我，这个问题已经困扰我很长时间。 因此，问题是：是否可以使用CSS转换使徽标更改（font awesome），还是需要JavaScript？ 如果该问题不应发布在此处，请告诉我应该在哪里发布，以便我可以将其移动。

干杯，

- user9689724

---

你需要使用JavaScript。 - Friday Ameh

你链接的问题的第一个答案的第一行说：“Fontawesome转换可以像任何其他CSS转换一样完成。”，并附有示例。你还需要什么？ - GolezTrol

嗨，如果你想实现的是将形状动画化以在两个图标之间进行切换，我建议你查找SVG：https://css-tricks.com/video-screencasts/135-three-ways-animate-svg/ - Dexter0015

但我不是在谈论字体awesome的颜色等变化。我指的是字体awesome的标志本身完全改变。我的意思是，如果这就是我刚才问的问题，那么为什么上面的人说我需要javascript呢？顺便说一句，我很喜欢被立即点踩 :) 看到人们对一些新手问题是开放的总是很可爱的。 - user9689724

我没理解你实际上想改变图标的“形状”。可能是因为我读得不好，也可能是因为你没有添加任何尝试，或者关于你想要什么样的转换的具体描述。无论如何，也许你可以看一下Fontawesome全新的SVG + Javascript框架，它有潜力支持这一点。你不能仅仅动画字体形状，但是你会对svg形状有更多的控制，正如@Dexter0015在上面所建议的那样。 - GolezTrol

问题是：是否可以使用CSS过渡来更改标志（字体awesome），还是需要JavaScript？<-这确实是我的帖子，但是是的，也许我应该更具体一些。 - user9689724

Answer 1

请看这里：

这个已经在这里完成了：https://codepen.io/toaster99/pen/BpgzQR。

查看工作示例：

html,
body {
  margin: 0;
  padding: 0;
}

#container {
  display: grid;
  align-content: center;
  justify-content: center;
  background: slateblue;
  min-height: 100vh;
}

.button {
  position: relative;
  margin-bottom: 40px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: #fe8989;
  border-radius: 2em;
  width: 25.25rem;
  padding: 1rem 0;
  font-size: 2.75rem;
  color: white;
  transition: all 0.3s ease;
  font-family: sans-serif;
}

.icons {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 2.3rem 0 0;
  width: 1.25rem;
  height: 2.6rem;
}

.icons i {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
}

.icon-default {
  transition: opacity 0.3s, transform 0.3s;
}

.icon-hover {
  transition: opacity 0.3s, transform 0.3s;
  transform: scale(0.5);
  opacity: 0;
}

.button:hover .icon-hover {
  transform: scale(1);
  opacity: 1;
}

.button:hover .icon-default {
  transform: scale(0.5);
  opacity: 0;
}

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>

<div id="container">
  <div class="button">
    <div class="icons">
      <i class="fa fa-apple icon-default"></i>
      <i class="fa fa-arrow-circle-down icon-hover"></i>
    </div>
    Download
  </div>
  <div class="button">
    <div class="icons">
      <i class="fa fa-windows icon-default"></i>
      <i class="fa fa-thumbs-up icon-hover"></i>
    </div>
    Request
  </div>
</div>

- billy.farroll

---

是的，你用代码完成了工作哈哈。我可以在4分钟内接受你的答案。谢谢你的帮助 :) 感激不尽。 - user9689724

Answer 2

是的，一旦你看到解决方案，它就非常简单了，但我也感到困惑，这导致我写下了这篇文章。

CSS

    @keyframes pulse {
      0% {
        color:transparent;

      }
      50% {
        color: #065803;

      }
      75% {
        color:rgb(113, 139, 0);

      }
      100% {
        color: #065803;

      }
      0% {
        color:rgb(189, 176, 1);

      }
    }

    #linked{
      font-size: 16.5rem;
      color: white;
      display: flex;
      justify-content: center;

    }
    i{
      animation: pulse 8s infinite ease;

    } ```

HTML

                       <i id="linked" class="fab fa-linkedin"></i>
                      </a>
                    </div>                               
                    <div class="col-2-of-2">
                      <a href="projects.html" target="_blank">
                        <i id="linked" class="fas fa-code"></i>
                      </a>
    ```

- Lukas Simianer