CODEWITHSUNDEEP
htmlcssfont-awesome
user9689724
user9689724

Reputation:

Possibility to change a font awesome icon with transition

No, I have no code to demonstrate but I have been wondering: Is it possible to change a font-awesome logo with just transition? Such as: Change the class? I did a little bit of research on w3schools and How can create transition effect in font awesome icon found this link aswell, but they didn't really help and this question has been with me for a long time. so, the question is: Is it possible to make a logo change (font awesome) with css transition or do I need javascript for it? in case the question shouldn't be posted here. please tell me where it should so I can move it.

Cheers,

Upvotes: 6

Views: 23347

Answers (2)

billy.farroll
billy.farroll

Reputation: 1931

Here you go:

This has been done here: https://codepen.io/toaster99/pen/BpgzQR.

See working example:

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>

Upvotes: 27

Lukas Simianer
Lukas Simianer

Reputation: 1

yes, its pretty simple after you see the solution but I was confused too which led me to this post.

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>
    ```

Upvotes: 0

Related Questions