How to fill a text with color using CSS?

Question

I am using this wonderful font to make forecast icons, and while I try to combine between the icons to animate them using CSS3, I tried to hide the sun using the cloud, but I need to fill the cloud with color, is that possible with CSS, or I need to it put as SVG or in Canvas?

Here is the picture:

Answer 1

Rather than using icons, why not try making them yourself? Here's a basic mockup of a 'cloud and sun' example using only 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;
}

<div class="wap">
  <div class="cloud"></div>
  <div class="sun"></div>
</div>

---

Rain?

.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;
}
.rain {
  height: 30px;
  width: 55px;
  transform:rotate(10deg);
  background: -moz-linear-gradient(left,  rgba(108,144,252,1) 0%, rgba(108,144,252,0) 1%, rgba(108,144,252,0) 9%, rgba(108,144,252,1) 10%, rgba(108,144,252,0) 11%, rgba(108,144,252,0) 19%, rgba(108,144,252,1) 20%, rgba(108,144,252,0) 21%, rgba(108,144,252,0) 29%, rgba(108,144,252,1) 30%, rgba(108,144,252,0) 31%, rgba(108,144,252,0) 39%, rgba(108,144,252,1) 40%, rgba(108,144,252,0) 41%, rgba(108,144,252,0) 49%, rgba(108,144,252,1) 50%, rgba(108,144,252,0) 51%, rgba(108,144,252,0) 59%, rgba(108,144,252,1) 60%, rgba(108,144,252,0) 61%, rgba(108,144,252,0) 69%, rgba(108,144,252,1) 70%, rgba(108,144,252,0) 71%, rgba(108,144,252,0) 79%, rgba(108,144,252,1) 80%, rgba(108,144,252,0) 81%, rgba(108,144,252,0) 89%, rgba(108,144,252,1) 90%, rgba(108,144,252,0) 91%, rgba(108,144,252,0) 99%, rgba(108,144,252,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(108,144,252,1)), color-stop(1%,rgba(108,144,252,0)), color-stop(9%,rgba(108,144,252,0)), color-stop(10%,rgba(108,144,252,1)), color-stop(11%,rgba(108,144,252,0)), color-stop(19%,rgba(108,144,252,0)), color-stop(20%,rgba(108,144,252,1)), color-stop(21%,rgba(108,144,252,0)), color-stop(29%,rgba(108,144,252,0)), color-stop(30%,rgba(108,144,252,1)), color-stop(31%,rgba(108,144,252,0)), color-stop(39%,rgba(108,144,252,0)), color-stop(40%,rgba(108,144,252,1)), color-stop(41%,rgba(108,144,252,0)), color-stop(49%,rgba(108,144,252,0)), color-stop(50%,rgba(108,144,252,1)), color-stop(51%,rgba(108,144,252,0)), color-stop(59%,rgba(108,144,252,0)), color-stop(60%,rgba(108,144,252,1)), color-stop(61%,rgba(108,144,252,0)), color-stop(69%,rgba(108,144,252,0)), color-stop(70%,rgba(108,144,252,1)), color-stop(71%,rgba(108,144,252,0)), color-stop(79%,rgba(108,144,252,0)), color-stop(80%,rgba(108,144,252,1)), color-stop(81%,rgba(108,144,252,0)), color-stop(89%,rgba(108,144,252,0)), color-stop(90%,rgba(108,144,252,1)), color-stop(91%,rgba(108,144,252,0)), color-stop(99%,rgba(108,144,252,0)), color-stop(100%,rgba(108,144,252,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  rgba(108,144,252,1) 0%,rgba(108,144,252,0) 1%,rgba(108,144,252,0) 9%,rgba(108,144,252,1) 10%,rgba(108,144,252,0) 11%,rgba(108,144,252,0) 19%,rgba(108,144,252,1) 20%,rgba(108,144,252,0) 21%,rgba(108,144,252,0) 29%,rgba(108,144,252,1) 30%,rgba(108,144,252,0) 31%,rgba(108,144,252,0) 39%,rgba(108,144,252,1) 40%,rgba(108,144,252,0) 41%,rgba(108,144,252,0) 49%,rgba(108,144,252,1) 50%,rgba(108,144,252,0) 51%,rgba(108,144,252,0) 59%,rgba(108,144,252,1) 60%,rgba(108,144,252,0) 61%,rgba(108,144,252,0) 69%,rgba(108,144,252,1) 70%,rgba(108,144,252,0) 71%,rgba(108,144,252,0) 79%,rgba(108,144,252,1) 80%,rgba(108,144,252,0) 81%,rgba(108,144,252,0) 89%,rgba(108,144,252,1) 90%,rgba(108,144,252,0) 91%,rgba(108,144,252,0) 99%,rgba(108,144,252,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  rgba(108,144,252,1) 0%,rgba(108,144,252,0) 1%,rgba(108,144,252,0) 9%,rgba(108,144,252,1) 10%,rgba(108,144,252,0) 11%,rgba(108,144,252,0) 19%,rgba(108,144,252,1) 20%,rgba(108,144,252,0) 21%,rgba(108,144,252,0) 29%,rgba(108,144,252,1) 30%,rgba(108,144,252,0) 31%,rgba(108,144,252,0) 39%,rgba(108,144,252,1) 40%,rgba(108,144,252,0) 41%,rgba(108,144,252,0) 49%,rgba(108,144,252,1) 50%,rgba(108,144,252,0) 51%,rgba(108,144,252,0) 59%,rgba(108,144,252,1) 60%,rgba(108,144,252,0) 61%,rgba(108,144,252,0) 69%,rgba(108,144,252,1) 70%,rgba(108,144,252,0) 71%,rgba(108,144,252,0) 79%,rgba(108,144,252,1) 80%,rgba(108,144,252,0) 81%,rgba(108,144,252,0) 89%,rgba(108,144,252,1) 90%,rgba(108,144,252,0) 91%,rgba(108,144,252,0) 99%,rgba(108,144,252,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  rgba(108,144,252,1) 0%,rgba(108,144,252,0) 1%,rgba(108,144,252,0) 9%,rgba(108,144,252,1) 10%,rgba(108,144,252,0) 11%,rgba(108,144,252,0) 19%,rgba(108,144,252,1) 20%,rgba(108,144,252,0) 21%,rgba(108,144,252,0) 29%,rgba(108,144,252,1) 30%,rgba(108,144,252,0) 31%,rgba(108,144,252,0) 39%,rgba(108,144,252,1) 40%,rgba(108,144,252,0) 41%,rgba(108,144,252,0) 49%,rgba(108,144,252,1) 50%,rgba(108,144,252,0) 51%,rgba(108,144,252,0) 59%,rgba(108,144,252,1) 60%,rgba(108,144,252,0) 61%,rgba(108,144,252,0) 69%,rgba(108,144,252,1) 70%,rgba(108,144,252,0) 71%,rgba(108,144,252,0) 79%,rgba(108,144,252,1) 80%,rgba(108,144,252,0) 81%,rgba(108,144,252,0) 89%,rgba(108,144,252,1) 90%,rgba(108,144,252,0) 91%,rgba(108,144,252,0) 99%,rgba(108,144,252,1) 100%); /* IE10+ */
background: linear-gradient(to right,  rgba(108,144,252,1) 0%,rgba(108,144,252,0) 1%,rgba(108,144,252,0) 9%,rgba(108,144,252,1) 10%,rgba(108,144,252,0) 11%,rgba(108,144,252,0) 19%,rgba(108,144,252,1) 20%,rgba(108,144,252,0) 21%,rgba(108,144,252,0) 29%,rgba(108,144,252,1) 30%,rgba(108,144,252,0) 31%,rgba(108,144,252,0) 39%,rgba(108,144,252,1) 40%,rgba(108,144,252,0) 41%,rgba(108,144,252,0) 49%,rgba(108,144,252,1) 50%,rgba(108,144,252,0) 51%,rgba(108,144,252,0) 59%,rgba(108,144,252,1) 60%,rgba(108,144,252,0) 61%,rgba(108,144,252,0) 69%,rgba(108,144,252,1) 70%,rgba(108,144,252,0) 71%,rgba(108,144,252,0) 79%,rgba(108,144,252,1) 80%,rgba(108,144,252,0) 81%,rgba(108,144,252,0) 89%,rgba(108,144,252,1) 90%,rgba(108,144,252,0) 91%,rgba(108,144,252,0) 99%,rgba(108,144,252,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6c90fc', endColorstr='#6c90fc',GradientType=1 ); /* IE6-9 */

  position: absolute;
  left: 18px;
  top: 35px;
 }

<div class="wap">
  <div class="cloud"></div>
  <div class="rain"></div>
</div>

---

Thunder?

.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;
}
.thunder {
  height: 20px;
  width: 20px;
  border-right: 2px solid yellow;
  border-top: 2px solid yellow;
  transform: rotate(55deg);
  position: absolute;
  left: 15px;
  top: 40px;
}
.thunder:before {
  content: "";
  position: absolute;
  top: -20px;
  left: 5px;
  height: 20px;
  width: 30px;
  border-right: 2px solid yellow;
  border-top: 2px solid yellow;

<div class="wap">
  <div class="cloud"></div>
  <div class="thunder"></div>
</div>

Answer 2

since answer is already given, this is only for the curious part of eventually, using text-shadow.

Run the snippet below to find out what it's about or play with this codepen.

@font-face {
	font-family: "iconvault";
	src: url("http://web.arjentienkamp.com/codepen/forecast-font/iconvault_forecastfont.eot");
	src: url("http://web.arjentienkamp.com/codepen/forecast-font/iconvault_forecastfont.eot?#iefix") format("embedded-opentype"),
	   url("http://web.arjentienkamp.com/codepen/forecast-font/iconvault_forecastfont.woff") format("woff"),
	   url("http://web.arjentienkamp.com/codepen/forecast-font/iconvault_forecastfont.ttf") format("truetype"),
	   url("http://web.arjentienkamp.com/codepen/forecast-font/iconvault_forecastfont.svg#iconvault") format("svg");
	font-weight: normal;
	font-style: normal;
}
	
	
	

[class^="icon-"],
[class*=" icon-"] {
  font-family: 'iconvault';
  font-weight: normal;
  font-style: normal;
  text-decoration: inherit;
  -webkit-font-smoothing: antialiased;
  font-size: 86px;

}





body {
  background:lightblue;
  font-size:1.25em;
}



/* -----Cloud----- */
.icon-cloud{
position:relative;
}
	.icon-cloud::after {
	content: "\f106";
	color:rgb(204, 204, 204);
	position: absolute;
    text-shadow:0 0 2px #aaa;

	}
.icon-cloud::before {
	content: "\f106";
	color:rgb(204, 204, 204);
	position: absolute;
font-size:0.55em;
top:.45em;
left:.45em;
text-shadow:2px 0 , -2px 0, 2px 2px, -2px -2px, 0 2px , 0-2px,
4px 0 , -4px 0, 4px 4px, -4px -4px, 0 4px , 0-4px,
6px 0 , -6px 0, 6px 6px, -6px -6px, 0 6px , 0-6px,
8px 0 , -8px 0, 8px 7px, -8px -8px, 0 7px , 0 -8px,
11px 0 , -11px 0px, -12px 5px, -14px 0px, -10px 3px , -9px 3px,
 0 -6px , 0 -10px , 0 -11px, 2px -11px, 4px -11px;
font-weight:bold

	}
.inherit.icon-cloud::before {
  color:inherit;
}
.yellow.icon-cloud::before {
  color:yellow;
}
.purple.icon-cloud::before {
  color:purple;
}
.red.icon-cloud::before {
  color:red;
}
.white.icon-cloud::before {
  color:white;
}
.transparent.icon-cloud::before {
  color:transparent;
}.cotton.icon-cloud::before {
  text-shadow:5px 5px 10px gray,-5px -5px 10px gray,-5px -5px 20px gray,-5px -5px  20px gray;
}
div {
  display:inline-block;
}
li {
  list-style-type:none;
}

<div class='two columns'>
  <ul>
    <li class="icon-cloud"></li>
    <p>Cloudy</p>
  </ul>
</div>
<div class='two columns'>
  <ul>
    <li class="icon-cloud cotton transparent"></li>
    <p>Cloudy</p>
  </ul>
</div>
<div class='two columns'>
  <ul>
    <li class="icon-cloud red"></li>
    <p>Cloudy</p>
  </ul>
</div>
<div class='two columns'>
  <ul>
    <li class="icon-cloud purple"></li>
    <p>Cloudy</p>
  </ul>
</div>
<div class='two columns'>
  <ul>
    <li class="icon-cloud yellow"></li>
    <p>Cloudy</p>
  </ul>
</div>
<div class='two columns'>
  <ul>
    <li class="icon-cloud inherit"></li>
    <p>Cloudy</p>
  </ul>
</div>
<div class='two columns'>
  <ul>
    <li class="icon-cloud white"></li>
    <p>Cloudy</p>
  </ul>
</div>

<div class='two columns'>
  <ul>
    <li class="icon-cloud transparent"></li>
    <p>Cloudy</p>
  </ul>
</div>

Answer 3

It's not possible to do this in CSS if the font doesn't contain a solid cloud image.

It is possible to do this with an SVG image. Fortunately, the font download contains a number of examples and the SVG version of the font, so maybe you can extract the image from there and modify it to your needs.

Actually, since all you need is a white background between the cloud and the sun, you might get away with using one or two CSS basic circle shapes, and use the font itself for the more detailed cloud and sun shapes.