0

I'm using '\2714' as a check sign so I can style it in css, and it works perfectly in most browsers, but Microsoft Edge insists on rendering it as an emoji. I've seen and tried several things like using 'Segoe UI Symbol' or 'Symbola' as font-family or using'\2714\FE0E' as content but Edge doesn't care.

Here's the css:

.regular-checkbox:checked + label:after {
    content: '\2714';
    font-size: 14px;
    position: absolute;
    top: -1px;
    left: 3px;
}

And the HTML:

<div class="checkbox-tag">
    <input type="checkbox" class="regular-checkbox" name="default_server_data" id="default_server_data"/>
    <label for="default_server_data"></label>
</div>

Here's the correct symbol: enter image description here

And the symbol in Edge: enter image description here

Any ideas?

Martijn Pieters
  • 1,048,767
  • 296
  • 4,058
  • 3,343
Marcel Puy
  • 23
  • 1
  • 4
  • If you want full control of how a character displays, the easy option is to use an image. A custom font might be an option, but I imagine Edge may override that. I doubt there's any way you can disable this yourself, it feels like something that would be a client side setting. – DBS Jul 16 '20 at 09:20
  • 2
    The symbol will be different on different OS and software. In Chrome on Mac it looks completely different from your sample image. – Turnip Jul 16 '20 at 09:23
  • @Turnip The platform I'm working on is only for Windows, so no problem there, but the answer DBS gave would solve this problem anyway and I think it might be the only way, or at least the easiest way, to fix this – Marcel Puy Jul 16 '20 at 09:40

0 Answers0