.icon-demo {
  $ren: #f00;
  $orange: #ffa500;
  $yellow: #ffc107;
  $green: #008000;
  $blue: #00f;
  $indigo: #0ff;
  $purple: #800080;
  $black: #000;
  $default: #666;

  .icon-big {
    font-size: 22px;
  }

  ul {
    display: block;
    color: $default;

    &::after {
      clear: both;
      content: " ";
      display: block;
      height: 0;
      width: 0;
    }

    &.icon-red {
      color: $ren;
    }

    &.icon-orange {
      color: $orange;
    }

    &.icon-yellow {
      color: darken($yellow, 15%);
    }

    &.icon-green {
      color: $green;
    }

    &.icon-blue {
      color: $blue;
    }

    &.icon-indigo {
      color: $indigo;
    }

    &.icon-purple {
      color: $purple;
    }

    &.icon-black {
      color: $black;
    }
  }

  li {
    display: block;
    float: left;
    height: 80px;
    width: 130px;

    .im-icon {
      display: inherit;
      line-height: 40px;
      text-align: center;
      font-size: 36px;
    }

    span {
      display: inherit;
      text-align: center;
    }
  }
}