Apple Logo Emoji - Colors or Original Apple Rainbow Equivalent-CodePudding

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?

CodePudding user response：

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.

CodePudding user response：

Check out feather icons & font awesome icons. If neither of those have it look to react-icons