CODEWITHSUNDEEP
cssfontsemojifontastic
csf30816
csf30816

Reputation: 129

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!

Upvotes: 1

Views: 4328

Answers (3)

Sarah Dayan
Sarah Dayan

Reputation: 468

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).

Upvotes: 2

Xavier Hendrickx
Xavier Hendrickx

Reputation: 550

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.

Upvotes: 2

Dekel
Dekel

Reputation: 62556

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>

Upvotes: 1

Related Questions