Retro Apple logo with Font Awesome and CSS.

<!DOCTYPE html>
<html>

  <head>
    <link data-require="font-awesome@*" data-semver="4.1.0" rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Retro Apple Logo!</h1>
    
    <p>Hover over the logos.</p>
    
    <i class="fa fa-apple fa-retro-alt"></i>
    <i class="fa fa-apple fa-retro-alt fa-lg"></i>
    <i class="fa fa-apple fa-retro-alt fa-2x"></i>
    <i class="fa fa-apple fa-retro-alt fa-3x"></i>
    <i class="fa fa-apple fa-retro-alt fa-4x"></i>
    <i class="fa fa-apple fa-retro-alt fa-5x"></i>
    
    <p></p>
    
    <i class="fa fa-apple fa-retro"></i>
    <i class="fa fa-apple fa-retro fa-lg"></i>
    <i class="fa fa-apple fa-retro fa-2x"></i>
    <i class="fa fa-apple fa-retro fa-3x"></i>
    <i class="fa fa-apple fa-retro fa-4x"></i>
    <i class="fa fa-apple fa-retro fa-5x"></i>
    
    <p>
      The major downside of this effect is that <code>background-clip: text</code>
      is only available in Webkit-based browsers, so no Firefox for you. Also it's
      currently impossible to detect this capability with Modernizr.
    </p>
    
    
  </body>

</html>

// Code goes here

/* Styles go here */
body {
  font-family: Helvetica, sans-serif;
  
}


.fa-apple.fa-retro {
    transition: .5s ease-out color;
    -webkit-background-clip: text;
    background-image:linear-gradient(
                        to bottom,
                        #70c25c 0%, #70c25c 30%,
                        #ffc04a 30%, #ffc04a 42.5%,
                        #fc903d 42.5%, #fc903d 55%,
                        #e94752 55%, #e94752 67.5%,
                        #a954a5 67.5%, #a954a5 80%,
                        #00afe0 80%, #00afe0 100%);
    color: transparent;
}

.fa-apple.fa-retro:hover {
  color: #16161d;
}

.fa-apple.fa-retro-alt {
  transition: .5s ease-out color;
  color: #16161d;
  -webkit-background-clip: text;
  background-image:linear-gradient(
                      to bottom,
                      #70c25c 0%, #70c25c 30%,
                      #ffc04a 30%, #ffc04a 42.5%,
                      #fc903d 42.5%, #fc903d 55%,
                      #e94752 55%, #e94752 67.5%,
                      #a954a5 67.5%, #a954a5 80%,
                      #00afe0 80%, #00afe0 100%);
}

.fa-apple.fa-retro-alt:hover {
  color: transparent;
}