1

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!

csf30816
  • 131
  • 3
  • 11

3 Answers3

2

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.

Xavier Hendrickx
  • 540
  • 3
  • 8
2

First, you cannot directly style a character in CSS. You can style based on tag names, ids, classes, pseudo-elements, pseudo-classes and attributes.

So if you want to replace every "" with your own SVG in your code, you have several ways to achieve it:

  1. If you're using PHP, use str_replace to look for every instance of your character and replace it with your SVG file as an <img> element or an empty tag (e.g.: a <span>) with your SVG as a background-image.

    // CSS
.my-emoji {
    background-image: url(my-emoji.svg);
    // don't forget "display", "height" and "width" attributes
}

// PHP
str_replace("", "<span class='my-emoji'></span>", $my_content);
// Then output $my_content where you want it.

  2. If you're using Javascript, you can do the same with replace().

    // CSS
//same as #1

// JS
var res = my_content.replace("", "<span class='my-emoji'></span>");
// Then output my_content where you want it.

  3. If you have full control on your HTML, you can wrap every instance of "" with a tag and style it with CSS.

    // HTML
<span class="my-emoji"></span>

// CSS
.my-emoji {
    text-indent: -9999px;
    background-image: url(my-emoji.svg);
    // don't forget "display", "height" and "width" attributes
}

Careful not to forget url() when using background-image in CSS. In your example you gave background-image: new-emoji.svg; it would have never worked, it's background-image: url(new-emoji.svg).

Sarah Dayan
  • 448
  • 3
  • 9
1

You can't do this because there are no selectors for letters in css. If you want you can wrap that specific letter in some tag (with/without class) and use this tag/class to add the css.

If you want you can use javascript for that:

$(function() {
  $('div').html(
    $('div').html().split(/i/).join("<span class='colored'>i</span>")
  );
});
div span.colored {
  color: white;
  background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>This is my text</div>
Dekel
  • 60,707
  • 10
  • 101
  • 129