Grey out emoji characters (HTML / CSS)
My current issue is that I am trying to grey out a button with emojis in it.
Nevertheless it seems that, due the nature of emojis, it is not possible to change the color using HTML / CSS properties.
I.e.:
<button disabled> 🎨_myText </button>
<p style="color:grey">
👎_myText2
</p>html css colors emoji
edited yesterday
Peter Mortensen
13.8k1987113
asked yesterday
Ikerlu.Ikerlu.
361
New contributor
Ikerlu. is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
add a comment |
My current issue is that I am trying to grey out a button with emojis in it.
Nevertheless it seems that, due the nature of emojis, it is not possible to change the color using HTML / CSS properties.
I.e.:
<button disabled> 🎨_myText </button>
<p style="color:grey">
👎_myText2
</p>html css colors emoji
edited yesterday
Peter Mortensen
13.8k1987113
asked yesterday
Ikerlu.Ikerlu.
361
New contributor
Ikerlu. is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
Checked in Chrome / firefox
– Ikerlu.
yesterday
Tried with CSS filters. But they are only applicable to real images.
– Ikerlu.
yesterday
Possible duplicate of Color for Unicode Emoji
– Amit
yesterday
add a comment |
My current issue is that I am trying to grey out a button with emojis in it.
Nevertheless it seems that, due the nature of emojis, it is not possible to change the color using HTML / CSS properties.
I.e.:
<button disabled> 🎨_myText </button>
<p style="color:grey">
👎_myText2
</p>html css colors emoji
edited yesterday
Peter Mortensen
13.8k1987113
asked yesterday
Ikerlu.Ikerlu.
361
New contributor
Ikerlu. is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
My current issue is that I am trying to grey out a button with emojis in it.
Nevertheless it seems that, due the nature of emojis, it is not possible to change the color using HTML / CSS properties.
I.e.:
<button disabled> 🎨_myText </button>
<p style="color:grey">
👎_myText2
</p><button disabled> 🎨_myText </button>
<p style="color:grey">
👎_myText2
</p><button disabled> 🎨_myText </button>
<p style="color:grey">
👎_myText2
</p>html css colors emoji
html css colors emoji
edited yesterday
Peter Mortensen
13.8k1987113
asked yesterday
Ikerlu.Ikerlu.
361
New contributor
Ikerlu. is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
edited yesterday
Peter Mortensen
13.8k1987113
asked yesterday
Ikerlu.Ikerlu.
361
New contributor
Ikerlu. is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
edited yesterday
Peter Mortensen
13.8k1987113
edited yesterday
Peter Mortensen
13.8k1987113
edited yesterday
Peter Mortensen
13.8k1987113
13.8k1987113
asked yesterday
Ikerlu.Ikerlu.
361
New contributor
Ikerlu. is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
asked yesterday
Ikerlu.Ikerlu.
361
asked yesterday
Ikerlu.Ikerlu.
361
361
New contributor
Ikerlu. is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
New contributor
Ikerlu. is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
Ikerlu. is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
Checked in Chrome / firefox
– Ikerlu.
yesterday
Tried with CSS filters. But they are only applicable to real images.
– Ikerlu.
yesterday
Possible duplicate of Color for Unicode Emoji
– Amit
yesterday
add a comment |
Checked in Chrome / firefox
– Ikerlu.
yesterday
Tried with CSS filters. But they are only applicable to real images.
– Ikerlu.
yesterday
Possible duplicate of Color for Unicode Emoji
– Amit
yesterday
Checked in Chrome / firefox
– Ikerlu.
yesterday
Checked in Chrome / firefox
– Ikerlu.
yesterday
Tried with CSS filters. But they are only applicable to real images.
– Ikerlu.
yesterday
Tried with CSS filters. But they are only applicable to real images.
– Ikerlu.
yesterday
Possible duplicate of Color for Unicode Emoji
– Amit
yesterday
Possible duplicate of Color for Unicode Emoji
– Amit
yesterday
add a comment |
2 Answers
2
active
oldest
votes
If you're looking to just change the emoji color to grey, you can do so using filter: grayscale:
<button style="filter: grayscale(100%);" disabled>🎨_myText</button>
<p style="color:grey; filter: grayscale(100%);">👎_myText2</p>As a side note, I suggest you use HTML entities for representing Emojis. Not all text editors support Emjois and thus they may become corrupt if opened in one. You can use this unicode lookup to find the HTML entity version of your unicode characters.
answered yesterday
Nick ParsonsNick Parsons
10k2926
add a comment |
You can use text shadow
<button disabled> 🎨_myText </button>
<p style="color:transparent; text-shadow: 0 0 0 grey;">
👎_myText2
</p>
answered yesterday
AmitAmit
1,22211428
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Ikerlu. is a new contributor. Be nice, and check out our Code of Conduct.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55220093%2fgrey-out-emoji-characters-html-css%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
If you're looking to just change the emoji color to grey, you can do so using filter: grayscale:
<button style="filter: grayscale(100%);" disabled>🎨_myText</button>
<p style="color:grey; filter: grayscale(100%);">👎_myText2</p>As a side note, I suggest you use HTML entities for representing Emojis. Not all text editors support Emjois and thus they may become corrupt if opened in one. You can use this unicode lookup to find the HTML entity version of your unicode characters.
answered yesterday
Nick ParsonsNick Parsons
10k2926
add a comment |
If you're looking to just change the emoji color to grey, you can do so using filter: grayscale:
<button style="filter: grayscale(100%);" disabled>🎨_myText</button>
<p style="color:grey; filter: grayscale(100%);">👎_myText2</p>As a side note, I suggest you use HTML entities for representing Emojis. Not all text editors support Emjois and thus they may become corrupt if opened in one. You can use this unicode lookup to find the HTML entity version of your unicode characters.
answered yesterday
Nick ParsonsNick Parsons
10k2926
add a comment |
If you're looking to just change the emoji color to grey, you can do so using filter: grayscale:
<button style="filter: grayscale(100%);" disabled>🎨_myText</button>
<p style="color:grey; filter: grayscale(100%);">👎_myText2</p>As a side note, I suggest you use HTML entities for representing Emojis. Not all text editors support Emjois and thus they may become corrupt if opened in one. You can use this unicode lookup to find the HTML entity version of your unicode characters.
answered yesterday
Nick ParsonsNick Parsons
10k2926
If you're looking to just change the emoji color to grey, you can do so using filter: grayscale:
<button style="filter: grayscale(100%);" disabled>🎨_myText</button>
<p style="color:grey; filter: grayscale(100%);">👎_myText2</p>As a side note, I suggest you use HTML entities for representing Emojis. Not all text editors support Emjois and thus they may become corrupt if opened in one. You can use this unicode lookup to find the HTML entity version of your unicode characters.
<button style="filter: grayscale(100%);" disabled>🎨_myText</button>
<p style="color:grey; filter: grayscale(100%);">👎_myText2</p><button style="filter: grayscale(100%);" disabled>🎨_myText</button>
<p style="color:grey; filter: grayscale(100%);">👎_myText2</p>answered yesterday
Nick ParsonsNick Parsons
10k2926
edited yesterday
answered yesterday
Nick ParsonsNick Parsons
10k2926
answered yesterday
Nick ParsonsNick Parsons
10k2926
answered yesterday
Nick ParsonsNick Parsons
10k2926
10k2926
add a comment |
add a comment |
You can use text shadow
<button disabled> 🎨_myText </button>
<p style="color:transparent; text-shadow: 0 0 0 grey;">
👎_myText2
</p>
answered yesterday
AmitAmit
1,22211428
add a comment |
You can use text shadow
<button disabled> 🎨_myText </button>
<p style="color:transparent; text-shadow: 0 0 0 grey;">
👎_myText2
</p>
answered yesterday
AmitAmit
1,22211428
add a comment |
You can use text shadow
<button disabled> 🎨_myText </button>
<p style="color:transparent; text-shadow: 0 0 0 grey;">
👎_myText2
</p>
answered yesterday
AmitAmit
1,22211428
You can use text shadow
<button disabled> 🎨_myText </button>
<p style="color:transparent; text-shadow: 0 0 0 grey;">
👎_myText2
</p>
answered yesterday
AmitAmit
1,22211428
answered yesterday
AmitAmit
1,22211428
answered yesterday
AmitAmit
1,22211428
answered yesterday
AmitAmit
1,22211428
1,22211428
add a comment |
add a comment |
Ikerlu. is a new contributor. Be nice, and check out our Code of Conduct.
Ikerlu. is a new contributor. Be nice, and check out our Code of Conduct.
Ikerlu. is a new contributor. Be nice, and check out our Code of Conduct.
Ikerlu. is a new contributor. Be nice, and check out our Code of Conduct.
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55220093%2fgrey-out-emoji-characters-html-css%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Checked in Chrome / firefox
– Ikerlu.
yesterday
Tried with CSS filters. But they are only applicable to real images.
– Ikerlu.
yesterday
Possible duplicate of Color for Unicode Emoji
– Amit
yesterday