Help creating icons/emojis

Help
1

I want to be able to use custom emoji in my Jekyll site without having to always write
![icon](/path/to/icon.png).
Is there a way I could set some placeholders for my icons (e.g. {{ icons.smiley }})?

2

Emojis are unicode characters that can be used in code. No need to escape them or insert as images.

<p>hello 🌍</p>


**hello 🌍**

console.log("hello 🌍")
1 Like
3

If you still need to insert icons from your assets, I’d recommend an include file.

Typically HTML for more control but you can rename as .md if you need. Also what’s nice about HTML is it won’t automatically convert text to a p tag (which means an awkward line break)

_includes/icon.html

{%- capture path -%}
{{ site.baseurl }}/assets/icons/{{ include.name }}.png
{%- endcapture -%}
<img src={% link path %}" alt="Icon" />

Note use of link tag to tell you at build time if a path is broken.

Then use as

Hello {% include icon.html name="world" %}
4

You could use a Liquid include, something like:

{% include icon.html name="smiley" %}
1 Like
5

I do something similar here with logo.html and referencing items in logos directory.

Except I am using SVG and also I am actually embedding the finished SVG into the HTML and not load loading by URL. So it less jarring than seeing icons load one at a time

6

There is a plug-in you can install. It even supports custom emoji images. I believe it’s officially supported by GitHub Pages which is a plus if you host there.

2 Likes
7

I believe that plugin is specifically to support text to emoji conversion

:smiley:

Becomes

:grinning:

But as mentioned before, you can also just insert the emoji directly into the text. using your system’s on screen keyboard.

Mac has ctrl + cmd + spacebar to bring up the emoji keyboard.

And I like a VS Code extension which does something similar letting you search for am emoji and insert either the plain text or unicode version. And it shows a visual preview of your plain text emojis on the page.

8

I think OP was asking how to insert “custom” emoji using placeholders. If using the system emoji picker those can’t be customized…

Using the plugin provides a simple way of inserting them using text placeholders. The images that are replaced can be customized and you can even add your own placeholders.

Or Jekyll includes could be used as already suggested.

1 Like
9

No, jemoji supports custom emojis. I ended up using jemoji, but thanks for all of the help!

1 Like