Fill Font Awesome Icon With Loading Animation

Issue I am trying to use a font awesome icon fas fa-cannabis and add a fill effect, now I have part of the CSS down, I can see the loading animation but I can't get it to fill insi

Solution 1:

You can use mix-blend-mode:screen; For this I'm wrapping both the i and the fill in a div and set i{position:absolute}. Please take a look at the codepen demo

#wrap{height: 150px;
  width:150px;
  overflow: hidden;
  border:1px solid;
}
#banner {
  height: 150px;
  width:150px;

}
.fill {
  animation-name: fillAction;
  animation-iteration-count: 1;
  animation-timing-function: cubic-bezier(.2, .6, .8, .4);
  animation-duration: 4s;
  animation-fill-mode: forwards;
  mix-blend-mode:screen;
}
#waveShape {
  animation-name: waveAction;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-duration: 0.5s;
  width:300px;
  height: 150px;
  fill: #04ACFF;

}
@keyframes fillAction {
  0% {
    transform: translate(0, 150px);
  }
  100% {
    transform: translate(0, -5px);
  }
}
@keyframes waveAction {
  0% {
    transform: translate(-150px, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}
i{font-size:147px; background:#fff;}


#wrapi{position:absolute}

<divid="wrap"><iclass="fas fa-cannabis"id="banner"></i><divclass="fill"><svgversion="1.1"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"x="0px"y="0px"width="300px"viewBox="0 0 300 300"enable-background="new 0 0 300 300"xml:space="preserve"><pathfill="#04ACFF"id="waveShape"d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
    c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
    c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z"/></svg></div></div>

Solution 2:

You might need to use clipping paths to apply the fill only to the icon. You might also need to use an svg rather than an icon...

This article has some interesting info that may help: https://css-tricks.com/masking-vs-clipping-use/