Styjun

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 inside the font awesome icon. So all I basically want to do is put that fill effect that you can see below inside of the font awesome icon.

Here is the CodePen for the question

At the moment it is sitting underneath the font awesome icon. Which you can see below:

Code

So my HTML is as follows:

<i class="fas fa-cannabis" id="banner">
 <div class="fill">
 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
 <path fill="#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>
</i>

With the following CSS that is creating the fill effect:

#banner 
 width: 150px;
 height: 150px;
 overflow: hidden;
 backface-visibility: hidden;
 transform: translate3d(0, 0, 0);

#banner .fill 
 animation-name: fillAction;
 animation-iteration-count: 1;
 animation-timing-function: cubic-bezier(.2, .6, .8, .4);
 animation-duration: 4s;
 animation-fill-mode: forwards;

#banner #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);
 

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

#wrapheight: 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);
 

ifont-size:147px; background:#fff;


#wrap iposition:absolute

<div id="wrap">
<i class="fas fa-cannabis" id="banner"></i>
<div class="fill">
<svg version="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">
 <path fill="#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>

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/