Symbols inline with text (emojis) in html

Question

Goal

I would like to create a web page for templating cards and other objects used in table top board games. Many games include a sort of "symbol font", i.e. a set of symbols with meaning in the context of the game, which are used inline with text. Therefore, my end goal is to be able to position several text fields over a background image and include multi-colored custom symbols with that text.

I imagine that what I am attempting requires techniques somewhat similar to whatever is done to support emojis.

I have succeeded in rendering custom symbols in the inner HTML of a <span>. However, I would like to render the symbols inline with text that can be positioned over an image. How can this be done?

What I've tried

I drew a custom symbol in Inkscape, saved as a 32x32 svg file. It is a half-yellow half-blue circle.
I uploaded the symbol to icomoon and downloaded a font package. Icomoon produces .tff, .svg, and .woff font files. It also produces some example html and css.

I pared down the html and css to a pretty minimal (not)working example:

demo.html

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Symbol font demo</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <p>This code</p>
    <xmp>
        <div>
            <span class="my-fontcircle"><span class="path1"></span><span class="path2"></span></span>
        </div>
    </xmp>
    <p>Produces this</p>
    <div>
        <span class="my-fontcircle"><span class="path1"></span><span class="path2"></span></span>
    </div>
    <p>This code</p>
    <xmp>
        <div font-family: "my-font">Let's use our symbol in line: &#xe900;</div>
    </xmp>
    <p>Produces this</p>
    <div font-family: "my-font">Let's use our symbol in line: &#xe900;</div>

</body>
</html>

style.css

@font-face {
  font-family: 'my-font';
  src:
    url('fonts/my-font.ttf?81gy7') format('truetype'),
    url('fonts/my-font.woff?81gy7') format('woff'),
    url('fonts/my-font.svg?81gy7#my-font') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="my-font"], [class*=" my-font"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'my-font' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.my-fontcircle .path1:before {
  content: "\e900";
  color: rgb(251, 236, 0);
}
.my-fontcircle .path2:before {
  content: "\e901";
  margin-left: -1em;
  color: rgb(0, 129, 255);
}

The result looks like this:

As we can see, the symbol shows up when we use the css class method, but it doesn't render in text. How can we make the symbol show up inline with text?

For the future reader: the CSS `display: grid; background-image: myimage.png` is one way to achieve this. To right-justify text in a grid cell, use `justify-self: end;` on the grid item. — DanielSank, Jun 29 '23 at 04:46

Frish · Answer 1 · 2023-06-21T23:38:10.253

First off, I'm not sure why you wouldn't be able to position text over a background image and include multi-colored custom symbols with that text with your initial implementation unless there are some limitations such as HTML escaping where you'd like to use your icons.

<span> is an inline element, and with a few alignment styles (try inline-flex with justify-content: center; to start) it should work fine. There are loads of resources for centering elements.

I've put together an example with a different icon library:.

.background {
  background-image: url(http://www.nasa.gov/sites/default/files/thumbnails/image/northseabloom_oli2_2023165_lrg.jpg);
  background-repeat: no-repeat;
  background-position: center;
  
  display: flex;
  flex-direction: column;
  
  height: 200px;
  width: 200px;
}

.background .text {
  color: white;
}

.background .icon {
  color: red;
}

.background .bottom-text {
  margin-top: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet"/>

<div class="background">
  <p class="text">Hello icons <span class="icon"><i class="fa-solid fa-icons"></i></span>, inline on a background no less!</p>
    <p class="text bottom-text">Hello icons <span class="icon"><i class="fa-solid fa-icons"></i></span>, inline on a background no less!</p>
</div>

Your primary issue appears to be that you are using a custom HTML entity, in your example . Am I correct to assume that you expect this to work based on your CSS content: "\e900";? My brief research indicates that you need to extend XHTML in order for this to work, which I don't see in your example. This could be why your icon is not rendering as expected.

First of all, thank you for pointing out that `` can go inside inner-HTML. I am trying to place multiple sets of text and symbols at various locations overlaying an image (and eventually I want to save that image plus the overlaid text and symbols to pdf, but that's out of scope for now). Is it possible, in your approach, to control the position of multiple text fields overlaying the image? Also thanks for pointing out that the way I tried to render the symbol with its unicode code point is just borked and shouldn't work. — DanielSank, Jun 21 '23 at 23:34
@DanielSank no worries! I've added another text field with custom alignment. I think that's what you're asking. I'm sure what would help you is looking into CSS Grid and CSS Flexbox, these are widely used to control alignment of elements within a container. Here's a popular guide: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ -- they have one for Grid as well. — Frish, Jun 21 '23 at 23:40
Hi Frish. Thank you for your help. I'm working through your suggestions. First, regarding my botched attempt to directly pring the unicode point: I managed to print one of my unicode characters in a text field via `String.fromCharCode(parseInt(code, 16))`. However, this only gets me *one* of the special characters, whereas my symbols are composed of two (or more) characters printed on top of one another in different colors. You can see how the CSS generated by Icomoon achieves that in HTML. So coming back to HTML, I'm studying your suggestion of CSS Grid. — DanielSank, Jun 22 '23 at 05:26

score 1 · Answer 2 · answered Jun 22 '23 at 17:32

If you don't need to replace common emoji unicode characters (e.g &#x1f600 => smiley) you could write a simple icon injection script.

/**
* define your icons
* as object
*/

let icons = {
  'screaming': "https://camo.githubusercontent.com/26d09c4725b30d28f1d4b28ae161b685fa87d432912f0b7b6dd1e4fbe3cfe2bc/68747470733a2f2f63646e2e6a7364656c6976722e6e65742f6e706d2f407376676d6f6a692f6e6f746f40302e322e302f7376672f31463633312e737667",
  "pleading": "https://camo.githubusercontent.com/dbb026248af889b4cfd2c8bfde4252958b18db090e30ae0e832bbf17cef35216/68747470733a2f2f63646e2e6a7364656c6976722e6e65742f6e706d2f407376676d6f6a692f7477656d6f6a6940322e302e302f7376672f31463937412e737667"
}

/**
* query icon placeholders
* and inject images as defined in object
*/
let iconsInline= document.querySelectorAll('[data-icon]')
iconsInline.forEach(icn=>{
  let type = icn.dataset.icon;
  let img = document.createElement('img');
  let src = icons[type];
  img.src = src;
  img.classList.add('img-emoji', `img-emoji-${type}`)
  icn.append(img)
  
})

body{
  font-size:8vmin;
}

[data-icon]{
  display:inline-block;
  height:1em;
  width:1em;
  /** adjust baseline alignment */
  transform: translateY(0.13em);
}

<p><span data-icon="pleading"></span> One morning, when Gregor Samsa woke from <span data-icon="pleading"></span> troubled dreams, he found himself transformed in his bed into a <span data-icon="screaming"></span> horrible vermin.</p>

How it works

You're defining an object containing all symbol sources and their identifier:

let icons = {
  'screaming': "icon1.svg",
  'laughing': "icon2.svg",
}

Similar to fontAwesome and other icon libray APIs you can specify the icon type by setting a readable/self-explanatory identifier for the placeholder element.

<span data-icon="screaming"></span>

In this case I'm using a data attribute instead of a class name to avoid class name conflicts and the need of prefixing (e.g. fa-icon-mame).

Now we can replace the placeholders with the actual icons:

let iconsInline= document.querySelectorAll('[data-icon]')
iconsInline.forEach(icn=>{
  let type = icn.dataset.icon;
  let img = document.createElement('img');
  let src = icons[type];
  img.src = src;
  img.classList.add('img-emoji', `img-emoji-${type}`)
  icn.append(img)
})

You could also adapt this approach to inject inline SVGs.
However you might run into troubles if your icons contain gradients, masks or clip-paths.
To circumvent these problems you could use Danny '365CSI' Engelman's <load-file> native web component to append your icons as shadow DOM elements.

Symbols inline with text (emojis) in html

Goal

What I've tried

2 Answers2

How it works