The Unicode Consortium provides an overview of emojis by style (beta version). You should be able to append ︎ in HTML to select the textual variant ...
Home
Public
Questions
Tags
Users
Collectives
ExploreCollectives
FindaJob
Jobs
Companies
Teams
StackOverflowforTeams
–Collaborateandshareknowledgewithaprivategroup.
CreateafreeTeam
WhatisTeams?
Teams
CreatefreeTeam
CollectivesonStackOverflow
Findcentralized,trustedcontentandcollaboratearoundthetechnologiesyouusemost.
Learnmore
Teams
Q&Aforwork
Connectandshareknowledgewithinasinglelocationthatisstructuredandeasytosearch.
Learnmore
ColorforUnicodeEmoji
AskQuestion
Asked
6years,3monthsago
Active
4monthsago
Viewed
52ktimes
56
23
It'spossibletoincludeEmojicharactersinmodernbrowsers,buthowcanonemakeitasinglecolorandchoosethatcolor?
Forexample,hereissomeEmojiandsomeregular(plane0)Unicodesymbols.Allshouldbered,butonlythesymbolsarerenderedinred.
AssociatedHTML+CSS:
🐘🐧🐼
♥★ℹ
p{
font-size:3em;
color:red
}
htmlcssunicodeemoji
Share
Follow
editedOct27'15at5:30
mahemoff
askedSep5'15at13:40
mahemoffmahemoff
40.1k3333goldbadges142142silverbadges206206bronzebadges
1
noneofthebelowanswersworkinFirefoxandEdge
– phuclv
May22'17at13:53
Addacomment
|
8Answers
8
Active
Oldest
Votes
131
Yes,youcancolorthem!
div{
color:transparent;
text-shadow:000red;
}
🚀🎭😻
Share
Follow
editedSep29'16at19:44
mahemoff
40.1k3333goldbadges142142silverbadges206206bronzebadges
answeredSep29'16at17:13
TigranTigran
2,13211goldbadge1515silverbadges1515bronzebadges
17
4
Niceone!Iconvertedittoastacksnippet.Unfortunatelythiscanonlydosilhouettesasthere'snorealencodingfortransparency.Soe.g.smileyrenderssameasgrimace.Doubtthere'smuchwecandoaboutthat.
– mahemoff
Sep29'16at19:48
5
IsthisaaMacexclusive:-P,becauseitdoesn’tworkonWindows10(inanybrowser).
– ŠimeVidas
Sep30'16at4:50
4
InChrome53itworksfortheoutlines,yes.ButthisdoesnotworkinFirefox49(emojisstaythesame)
– nylki
Sep30'16at9:20
3
Thx,@nylki.Comesouttherewasabugreportonthetopic-bugzilla.mozilla.org/show_bug.cgi?id=1128190,whichwasforsomereasonmarkedasresolved.Iaddedacommentthere.Let'swaitforMozilla'sresponse.
– Tigran
Sep30'16at10:03
3
color:transparentdoesnotworkonFirefoxversion61.0.1(onUbuntuLinux).Allnormaltextbecomestransparentbutthefullcoloremojiareunaffected.
– PatrickHorn
Jul14'18at0:58
|
Show12morecomments
44
Noteveryemojiworksthesame.Someareoldtextualsymbolsthatnowhavean(optionalordefault)colorfulrepresentation,otherswereexplicitly(only)asemojis.Thatmeans,someUnicodecodepointsshouldhavetwopossiblerepresentations,textandemoji.Authorsandusersshouldbeabletoexpresstheirpreferenceforoneortheother.ThisiscurrentlydonewithotherwiseinvisiblevariationselectorsU+FE0E(text,VS-15)andU+FE0F(emoji,VS-16),buthigher-levelsolutions(e.g.forCSS)havebeenproposed.
Thetext-styleemojisaremonochromaticandshouldbedisplayedintheforegroundcolor,i.e.currentcolorinCSS,justlikeanyotherglyph.TheUnicodeConsortiumprovidesanoverviewofemojisbystyle(betaversion).Youshouldbeabletoappend︎inHTMLtoselectthetextualvariantwithanythinginthecolumnslabeled“DefaultTextStyle;hasVSs”and“DefaultEmojiStyle;hasVSs”.Thisdoesn’tincludetheexampleemojis🐘🐧🐼andmanyothers,though.
p{
color:red;font-size:3em;margin:0;
text-transform:text;/*proposed*/
font-variant-emoji:text;/*proposed*/
font-variant-color:monochrome;/*proposed*/
font-color:monochrome;/*proposed*/
font-palette:dark;/*draftedforCSSFontsLevel4*/
}
p.hack{
color:rgba(100%,0%,0%,0);
text-shadow:000red;
}
p.font{
font-family:Emojione,Noto,Twemoji,Symbola;
}
@font-face{/*http://emojione.com/developers/*/
font-family:Emojione;
src:local("EmojiOneBW"),local("EmojiOne"),local("EmojiOne"),
/*https://cdn.rawgit.com/Ranks/emojione/master/assets/fonts/emojione-bw.otf–monochromeonly,deprecated,removed
https://cdn.rawgit.com/Ranks/emojione/master/assets/fonts/emojione-android.ttf– withhack
https://cdn.rawgit.com/Ranks/emojione/master/assets/fonts/emojione-apple.ttf–withhack*/
url("https://cdn.rawgit.com/Ranks/emojione/master/assets/fonts/emojione-svg.woff2")format("woff2"),
url("https://cdn.rawgit.com/Ranks/emojione/master/assets/fonts/emojione-svg.woff")format("woff"),
url("https://cdn.rawgit.com/Ranks/emojione/master/assets/fonts/emojione-svg.otf")format("truetype");
}
@font-face{/*https://www.google.com/get/noto/#noto-emoji-zsye*/
font-family:Noto;
src:local("NotoEmoji"),local("NotoColorEmoji"),local("Noto"),
url("https://cdn.rawgit.com/googlei18n/noto-emoji/master/fonts/NotoEmoji-Regular.ttf");
}
@font-face{/*https://github.com/eosrei/twemoji-color-font/releases*/
font-family:Twemoji;
src:local("Twemoji");
}
@font-face{/*http://users.teilar.gr/~g1951d/*/
font-family:Symbola;
src:local("Symbola");
}
🐘🐧🐼♥★ℹ💀👌
🐘︎🐧︎🐼︎♥︎★︎ℹ︎💀︎👌︎
🐘️🐧️🐼️♥️★️ℹ️💀️👌️
🐘🐧🐼♥★ℹ💀👌
🐘🐧🐼♥★ℹ💀👌
I’veadded💀U+1F480Skulland👌U+1F44COKHandSignbecausethebackgroundshouldshowthroughtheir“eyes”andI’veusednumericcharacterreferencesjusttomakethecodemoreobviousandmorerobustagainstcopy-and-pasteerrors.
Ithasbeenproposed,however,thatbothvariationselectorscanbeappliedtoanycharacter,whichwouldhavenoeffectinmostcases.Notethatsomevendors,especiallySamsung,arealreadyshipping(default)emojiglyphsforseveralothercharacters(goo.gl/a4yK6porgoo.gl/DqtHcc).
Share
Follow
editedOct13'16at13:37
answeredOct13'16at12:08
CrissovCrissov
86588silverbadges1313bronzebadges
2
1
Textvariationselectorisdefinitelythebestanswerfortheoriginalquestion!👍
– Sygmoral
Feb8'20at13:31
2
Thelinktothevariationselectordoconunicode.orgseemstobedown,althoughunicode.org/faq/vs.htmlisnowtheofficialFAQpage.
– BenXO
Jun21at21:25
Addacomment
|
23
IwantedtodothismyselfsoI'verecentlycomeupwithasolutionusingnewerCSSeffectsthatworksonFirefoxandEdgeaswell.
Usingfilter,youfirstnormalizethecolorbyusingsepia(1),youthensaturatetheheckoutofittogetapurered.Ifyouwanttogetridofblacklines,suckthecontrastoutoftheemojibeforeapplyingotherfiltersusingcontrast(0).Afterthatyoujustspinthecolourwheelfromredtowhatevercoloryou'dlikeusinghue-rotate().NotethatbecauseIuseddecimalvaluesinsteadof%'s,avalueof100means10000%.
Hueoffsetsaredefinedasbeginningatred.Weareluckythatsepiaismostlyredsothewheelstartsoffperfectlyat0-degrees.YoucancalculatewhatoffsetyouwantusingaRGBtoHSLconverter.IfoundaniceonewritteninJavascripthere:https://web.archive.org/web/20180808220922/http://axonflux.com/handy-rgb-to-hsl-and-rgb-to-hsv-color-model-c
Youmustmultiplythehuevalueby360togetthedesiredresultfromthatfunction.AnexamplewouldbergbToHsl(0,100,100)[0]*360.Whichwouldreturn180.Sincethereisnored,thiswouldbetheexpectedresult,youwouldbespinning180degreesawayfromred.
AsLitheriumanCrissovpointedout,therearetextemojisaswell.Theseworkbetterwithtransformationsandoftenlookbetter.Youcan'tapplythemethodIhavedescribedabovehowever,untilyoufirstapplyinvert(.5)onthetextemojis,thisisbecausethefunctionsneedsomesortofshadetooperateon.Sosimplyaddinginvert(.5)tothebeginningofeachformula,allowsforthemtooperateonbothcodepointsonallbrowsers.
.a{/*Normalizecolourtoaprimaryred*/
filter:sepia(1)saturate(100);
}
.b{/*Lesssaturationsomorefeatures,shiftedcolour90-degrees*/
filter:sepia(1)saturate(5)hue-rotate(90deg);
}
.c{/*Removeblackoutlinesifdesiredbyremovingcontrast*/
filter:contrast(0)sepia(1)saturate(100)hue-rotate(180deg);
}
.d{/*Othershadespossiblebyloweringbrightness*/
filter:contrast(0)sepia(1)saturate(100)brightness(.05)hue-rotate(180deg);
}
.e{/*Weirdpossibilitieswithnocolournormalization*/
filter:contrast(100)hue-rotate(180deg);
}
.ma{/*Inverttoprovideagrayshadetoapplysepia*/
filter:invert(.5)sepia(1)saturate(100);
}
div{
font-size:25px;
}
.emo>div::after{
content:"🌍⛄😍🐱";
}
.mono>div::after{
content:"\1F30D\FE0E\26C4\FE0E\1F60D\FE0E\1F431\FE0E";
}
-:
a:
b:
c:
d:
e:
Changethecodepointtotextmode:
a:
ma:
Update:
Therearenewerpackagesavailableonnpmnowthatcancalculatehuesetc.Youdon'tneedtousethatsnippetonthewebsiteIhadpreviouslylinked.Here'sanexample:https://stackoverflow.com/a/56082323/5078765
Share
Follow
editedJun17'20at23:22
answeredMay23'18at1:30
ADJenksADJenks
2,0892020silverbadges2828bronzebadges
2
@MasGladIcouldhelp.Becausethistechniquerequirescssfiltereffects,pleasechecktomakesurethebrowsersthatyouwanttobesupportedaresupported:caniuse.com/#search=filterThatbeingsaid,specifyingthetextvariantbyappendingtheunicodeFE0Eandthenapplyingatext-shadowasCrissovmentions,isalsoeffective.Ifyouonlywanttosupportmodernbrowsershowever,themethodusingfiltersallowsyoutousetheemojiformat,whichmaybeusefulifyouareapplyingittodynamictext.
– ADJenks
Oct23'18at4:43
ItlookslikeEdgenowsupportscoloringthemviatext-shadownowaswell...SoIguessyoucandisregardallthisvoodoothatIdidhereifyou'reonlysupportingthethelatestbrowsers.
– ADJenks
Nov27'20at18:59
Addacomment
|
19
Youcanfillthemwithasolidcolor:
p{
font-size:20px;
color:transparent;
text-shadow:000blue;
}
🚀
🎭
😻
Oryoucanoutlinethem:
body{
background:#fff;
}
p{
margin:0;
color:transparent;
text-shadow:003pxblue;
font-size:20px;
position:relative;
}
p::before{
content:attr(title);
position:absolute;
text-shadow:000#fff;
}
🚀
🎭
😻
Share
Follow
answeredSep30'16at15:55
JeremyDanyowJeremyDanyow
25.7k1212goldbadges8282silverbadges128128bronzebadges
1
Iprefertouseanotherattributesuchasnamefortheoutlinesothatwhenusershavetheemojiitdoesn'tshowinatooltip.Greatanswer!
– ZachSaucier
Apr11'17at21:45
Addacomment
|
10
Ifyouwanttokeepthedetailswithintheemojiyoucanusefilter:url(svg)whereurl()willtakeansvgfilter
svg{
display:none;
}
div{
-webkit-filter:url(#red);
filter:url(#red);
}
🐘🐧🐼
WhiletheuseoffeColorMatrixmayseemdauntingatfirst,itisactuallystraightforwardtodefineyourowncolors.Takethefollowingexamplewhichrepresentsthecolorred:
10000
00000
00000
00010
Ifyougrabtheboldvaluesfromabove,wecanseehowtheyrelatetotheRGBAcolormode:
1-red(r)
0-green(g)
0-blue(b)
1-alpha(a)
Hereeachcolorrelatestoavaluefrom0to255dividedby255.Thus,ifyouhadthecolorgreen,whichhasaRGBAof:
RGBA
(0,255,0,1)
Thenyourvalueswouldbe:
0/255->0(r)
255/255->1(g)
0/255->0(b)
1->1(a)-don'tdivide
Andso,usingthesevaluesinourmatrixweget:
00000
01000
00000
00010
Youcannowaddthisasanadditionalfilter(orremovetheoldone)andgiveitanidsothatitcanbereferencedwithincssfilter:url(#filterID)
Seeimplementedversionbelow:
svg{
display:none;
}
.red{
-webkit-filter:url(#red);
filter:url(#red);
}
.green{
-webkit-filter:url(#green);
filter:url(#green);
}
🐘🐧🐼
🐘🐧🐼
1
🐘🐧🐼
PleasenoteCurrently,thissolutionhasverylimitedbrowsersupport.Toseeafulllistofbrowserssupportedbythisfeaturepleaseseehere.
Share
Follow
editedJul22at13:51
answeredMar18'19at12:50
NickParsonsNickParsons
35.1k66goldbadges3030silverbadges5353bronzebadges
Addacomment
|
7
Some,butnotall,codepointscanbedrawnineithertextform(non-picture-basedglyph)oremojiform(picture-basedglyph).Unicodedescribesthatthesetwoformscanbeselectedbyusingoneoftwovariationselectors:eitherU+FE0E(VARIATIONSELECTOR-15)orU+FE0F(VARIATIONSELECTOR-16).Whendrawninnon-picture-basedform,thecolorCSSpropertyshouldapply.
Example:
U+2603(SNOWMAN)isdrawnthisway:☃
ThesequenceofcodepointsU+2603U+FE0Eisdrawnthisway:☃︎
ThesequenceofcodepointsU+2603U+FE0Fisdrawnthisway:☃️
Moreinformation,alongwithafulllistofthecodepointswhichparticipateinthesevariationsequences,canbefoundathttp://unicode.org/emoji/charts/emoji-variants.html
(Notethatdifferentoperatingsystemsmaychooseadifferentdefaultwhenthebarecodepointisused.Forexample,tryviewingthispostinmacOSandiOS-thebarecodepointabovelooksdifferent!)
Share
Follow
answeredOct15'16at16:51
LitherumLitherum
20.5k33goldbadges2121silverbadges2727bronzebadges
2
Howdoyouuseasequenceofcodepoints?☃showstheplainone.HowtoIshowthecolorone?
– Curtis
Sep12'19at4:30
Justputthetwocharactersnexttoeachother.
– Litherum
Sep15'19at7:39
Addacomment
|
2
AsEmojiisquitenew,stylingitisnotyetsupportednatively.
TheworkaroundistouseanEmojifontsuchasTwitter'sTwemoji.ThenitcanbestyledmuchthesamewayFontAwesomeornativeUnicodecanbestyled.
Share
Follow
answeredSep5'15at13:42
mahemoffmahemoff
40.1k3333goldbadges142142silverbadges206206bronzebadges
Addacomment
|
-2
IFYOUNEEDTOUSECSSAFTER,BEFOREPSEUDOELEMENTYOUCANPROCEDLIKETHIS
THENWRITETHISFORCSS
.react-toggle-icon-thumb{
width:20pt;
height:20pt;
font-size:30pt;
position:relative;
color:gray;
cursor:pointer;
border:none;
background:transparent;
margin-left:0px;
margin-right:8px;
top:-0px;
}
.react-toggle-icon-thumb:before,.react-toggle-icon-thumb:after{
position:absolute;
top:0;
left:0;
transition:all.3sease-out;
content:"👍";
font-family:fontawesome;
color:transparent;
text-shadow:000#3498db;
}
.react-toggle-icon-thumb:hover:before{
transform:scale(1.2);
animation:thumbs-up2slinearinfinite;
}
@keyframesthumbs-up{
25%{
transform:rotate(20deg);
}
50%,100%{
transform:rotate(5deg);
}
}
Share
Follow
answeredAug7'17at7:05
IrCalifIrCalif
43855silverbadges66bronzebadges
0
Addacomment
|
YourAnswer
ThanksforcontributingananswertoStackOverflow!Pleasebesuretoanswerthequestion.Providedetailsandshareyourresearch!Butavoid…Askingforhelp,clarification,orrespondingtootheranswers.Makingstatementsbasedonopinion;backthemupwithreferencesorpersonalexperience.Tolearnmore,seeourtipsonwritinggreatanswers.
Draftsaved
Draftdiscarded
Signuporlogin
SignupusingGoogle
SignupusingFacebook
SignupusingEmailandPassword
Submit
Postasaguest
Name
Email
Required,butnevershown
PostYourAnswer
Discard
Byclicking“PostYourAnswer”,youagreetoourtermsofservice,privacypolicyandcookiepolicy
Nottheansweryou'relookingfor?Browseotherquestionstaggedhtmlcssunicodeemojioraskyourownquestion.
TheOverflowBlog
Podcast398:Feelinginsecureaboutcode’ssecurity
Newdata:Whatdeveloperslookforinfuturejobopportunities
FeaturedonMeta
Reducingtheweightofourfooter
NewresponsiveActivitypage
TwoBornottwoB-Farewell,BoltClockandBhargav!
Communityinputneeded:Therulesforcollectivesarticles
Linked
5
Howtostyleaunicodecharacter?
0
FirefoxBrowserspanstylewrongcolor(red).Whatswrongonit?
0
WhydoestextshadownotworkinFirefoxonUnicodethoughtbubble💭?
152
HowtopreventUnicodecharactersfromrenderingasemojiinHTMLfromJavaScript?
36
Howdoyougetthehueofa#xxxxxxcolour?
10
Greyoutemojicharacters(HTML/CSS)
13
CSSstylecoloruneffectiveonstarcharacter(★)onSamsungwithAndroid4.4KitKat
16
Unicodecharactercolorissue
3
HowwouldIchangethecolorofanemoji?
3
HowdowechangethecolorandsizeofdingbatunicodecharactersinmobileSafari?(htmlentities)
Seemorelinkedquestions
Related
2163
WhatarevalidvaluesfortheidattributeinHTML?
550
Howtoaddsomenon-standardfonttoawebsite?
4289
Which"href"valueshouldIuseforJavaScriptlinks,"#"or"javascript:void(0)"?
4187
ChangeaHTML5input'splaceholdercolorwithCSS
8273
WhydoesHTMLthink“chucknorris”isacolor?
1392
WhyisexecutingJavacodeincommentswithcertainUnicodecharactersallowed?
152
HowtopreventUnicodecharactersfromrenderingasemojiinHTMLfromJavaScript?
HotNetworkQuestions
ImpresspotentialPhDadvisorwithmywork,willitbackfire?
Iamlookingforawordtodescribeapersonorentitywhoispermittedbysocietytodobad/greedythingsbecausetheyhavebeencharitable
Whatconstituteshumoronthis"ibeforee"coffeemugtext?
Howtoselfteachmathematics?
Findingcategorywithmaximumlikelihoodmethod
AddComposertoexistingDrupal8.9site
Isitoktoshareapaperacceptedforpublicationwithasingleperson?
EnergygetspairedwithtimeandMomentumwithspaceinbothQMandSR.Anyconnectionsthere?
Systemofcongruenceswithboundcondition
Whatisthisbridgelikecomponent?
Whydobrowsersknowtolookupthe`www`recordifDNSqueryfor@getsNXDOMAIN?
WhyisthesnowlinehigherintheHimalayasthanontheequator?
Themissingsquare
DoesGDPRapplyifmywebappstorespersonaldataontheuser'sphoneonly?
WhatisthedifferencebetweenTextVectorizationandTokenizer?
AreILSapproachestaughtaspartofinstrumentrating?
Aresomeprotonsmoremassivethanothersduetospinningatadifferentrateorbeinginamoreexcitedstate?
Examplesoflocallycompactgroupsthatdonotadmitenoughfinitedimensionalrepresentations
PartialmoveofVecoftuple
Vimpluginwherethefirstlinesintheeditorshowthefirstline(s)withlessindendationthatarenotvisible
Helpmefindthetitleofasci-fiapocalypticmoviefollowingabrother-sisterduo,butthesisterisdifferentsomehow
Morecommittedthanphysicalmemory,howisthatpossible?
Helpwithtitleofbookaboutcatlikepeople
PointstopathdoesnotgrouppointstolinesinQGIS
morehotquestions
Questionfeed
SubscribetoRSS
Questionfeed
TosubscribetothisRSSfeed,copyandpastethisURLintoyourRSSreader.
lang-html
Yourprivacy
Byclicking“Acceptallcookies”,youagreeStackExchangecanstorecookiesonyourdeviceanddiscloseinformationinaccordancewithourCookiePolicy.
Acceptallcookies
Customizesettings
