如何使用CSS填充文本颜色？

我正在使用这个奇妙的字体来制作预测图标,当我尝试在图标之间使用CSS3来动画它们时,我试图用云来隐藏太阳,但我需要用颜色填充云,这是可能的CSS,还是我需要把它作为SVG或Canvas？

这是图片:

而不是使用图标,为什么不尝试自己制作？这是仅使用css的"云和太阳"示例的基本模型:

.cloud{
  height:30px;
  width:30px;
  border-radius:50%;
  background:lightgray;
  border:5px solid lightgray;
  margin-left:20px;
  position:relative;
  z-index:8;
  }
.cloud:before{
  content:"";
  position:absolute;
  height:15px;
  width:30px;
  background:lightgray;
  border-radius:15px;
  border:5px solid lightgray;
  left:-15px;
  bottom:-5px;
  }

.cloud:after{
    content:"";
  position:absolute;
  height:10px;
  width:25px;
  background:lightgray;
  border-radius:10px;
  border:5px solid lightgray;
  right:-15px;
  bottom:-5px;
  }
.wap {
  display: inline-block;
  width: 90px;
  height: 80px;
}
.sun {
  height: 30px;
  width: 30px;
  background: yellow;
  border-radius: 50%;
  position: absolute;
  left: 55px;
  top: 10px;
  box-shadow: 0 0 2px 2px white, 0 0 4px 4px yellow;
}