Search code examples
htmlcssunicode

Apple Logo Emoji - Colors or Original Apple Rainbow Equivalent

Is the apple Unicode char logo,  available in other colors or the original rainbow Apple logo?

Realize  displays as black and white glyph but looking for any alternative equivalent (to display as a solid color or rainbow Apple) other than a basic image on an HTML page?

Solution

  • Is the apple Unicode char logo,  available in other colors...? Realize  displays as black and white glyph...

    It's not clear to me how you reached the conclusion that the display color of the  can't be modified. By nature of being a glyph, the  can be styled as any text might be:

    body {
  font-size: 36px;
}

#red {
  color: red;
}

#yellow {
  color: yellow;
}

#green {
  color: green;
}

#white {
  color: white;
  background-color: black;
}
    <span id></span>
<span id="red"></span>
<span id="yellow"></span>
<span id="green"></span>
<span id="white"></span>

    ... looking for any alternative equivalent (to display as[...] rainbow Apple)...

    This is a bit trickier to accomplish with full support of all user agents, but you can get pretty good results using the appropriate vendor prefixes for things like background-clip and text-fill-color:

    body {
  font-size: 36px;
}

#rainbow {
  background: -webkit-linear-gradient(#5EBD3E 0% 32%, #FFB900 32% 41.5%, #F78200 41.5% 51%, #E23838 51% 60.5%, #973999 60.5% 70%, #009CDF 70% 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
    <span id="rainbow"></span>

    In the example above I've done a bit of free-handing to visually match closely with the original Apple "rainbow logo" coloring; if exact replication of the color stop positions is important to you, you might wish to tweak them a bit.

    It is important to note, however that support for styling with these attributes is not universal, and you should have a fallback plan for users without compatible user agents. See Can I use... "text-fill-color" and Can I use... "background-clip" for more information in making your determination if the trade-offs are acceptable considering your userbase.