Creating a ban icon with CSS

HTML

<span class='sq sq-green'></span>
  <span class='sq-blue'>Forecasted Rain Clean</span>
   <span class='sq-orrange'>Forecasted Rain Clean</span>
    <span class='sq-yellow'>Forecasted Rain Clean</span>
     <span class='sq-cyon'>Forecasted Rain Clean</span>
      <span class='sq-saffron'>Forecasted Rain Clean</span>
       <span class='sq-red'>Forecasted Rain Clean</span>
        <span class='sq-saffron-light'>Forecasted Rain Clean</span>

CSS

.ban-stem-container {
    display:inline-block;
    width: 22px;
    height:22px;
    -ms-transform: rotate(45deg); /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    transform: rotate(45deg);
}

.ban-stem {
    position: absolute;
    width: 3px;
    height: 20px;
    background-color: #333;
    left: 5px;
}

.ban-icon-circle {
  border: 3px solid #333;
    border-radius: 18px;
    height: 16px;
    width: 16px;
} 
.square-green {background:#78c978;width:8px;height:8px; border-radius:2px}


sq:before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 5px;
}
.sq-green:before {
  background: #78c978;
}
.sq-blue:before {
  background: #003366;
}
.sq-orrange:before {
  background: #ffb020;
}
.sq-yellow:before {
  background: #ffd35b;
}
.sq-cyon:before {
  background: #2496d1;
}
.sq-saffron:before {
  background: #ff6600;
}
.sq-red:before {
  background: #b01717;
}
.sq-saffron-light:before {
  background: #ffa060;
}