Search code examples
cssfontsemojifontastic

CSS - Change style of a certain letter

I want to change the style of a certain letter. So the letter 😀 (U+1F600) has the style background-image: new-emoji-url;. Is there any way to do this in CSS? I have tried

😀 {
    background-image: new-emoji.svg;
}

But that did not work. What I am I doing wrong? Is this even possible?

I have also tried making an Icon Font on fontastic, but the SVG icon gets distorted.

Thanks for your help!

Solution

  • There's no way to do this using CSS, you can however use javascript to scan the page on load and wrap all instances of your letter in a span with your custom background, here's an implementation using jQuery:

    $('div').each(function () {
    $(this).html($(this).html().replace(/(\&#128512;)/g, '<span style="background-image: new-emoji.svg; yellow">$1</span>'));
});

    Replace the 'div' with the element that contains the character you wish to replace.