Editable Emote Set with CSS

This is a little walk-through on making a bunch of emotes for your site that are easy to access using a SPAN class as a short cut. I will give you tips on how to keep it from stretching your content. This requires basic understanding of what CSS and HTML are.

This was inspired by Font Awesome, and how their icons are styled with CSS linked to your page, and called using <i> tags. I recommend you check them out for social media icons and navigation icons, etc.

Just a forward, I'm not like...an educator or a professional or anything. This is just me, some queer dude on Neocities, trying to share my thoughts. So keep that in mind! ^^;;

For this tutorial, I will be helped by GIR, so you better get used to this little guy! Found on Glitter-Graphics.

Why use CSS over images?

Picking Emotes

There are a few things you should keep in mind when picking the emotes you want to use. While these are not laws by any means, I have a few personal tips on how to make sure you get the best results from your emotes. This is not a drawing tutorial, and I am not going to be teaching you how to make emotes here (Although I would consider doing so down the line!)

  1. Size Matters. Your emotes should be close to or smaller than your font size for readability. I will show you how to do some formatting to accomodate images that are pushing in size.
  2. Consistent Sizes. I personally think it is best practice and reads the best to keep your emotes the same size or within the same size range. The intent with this is to be used inline in bodies or text, and should be treated, from a design perspective, just like a special character in the text, and readability should be a priority.
      * While this GIR gif is an unusual size, MOST of my emotes are 20x20 pixels!
  3. Use Simple Images. If you are using premade emotes, most you will find have few colors and only a few frames of animation if any. If you are making your own, follow these priciples if you can, so that they read well inline with text and also pop!
  4. Use PNGs or GIFs. These are the most appropriate file types for small images with transparent backgrounds. You should get very little compression with GIFs on this scale, and PNGs also support partial transparency and animation (APNGs) contrary to common misconception. Compression isn't really a problem at this scale.

Need an emote set? Well, you can always draw your own, of course, but there's a lot of great free resources for private webmasters. I'd like to compile a working list of different types of web resources and sozai, but it's gonna take time for me because I do this website stuff as one of my 800 hobbies. If you make and distribute free-to-use emotes, contact me and I will share your link here! For now, you can find resources in my links or credits!

CSS File

All of the formatting, including size and image, should be contained in Cascading Style Sheet. Create a separate .CSS file from the rest of your page style so you can edit this and use it on a page by page basis with ease.

  1. .Class - Create a class for each individual emote. This is the class you will use to call the emote, so it should be fairly short and easy to remember. (I.G. a laughing face class could be ".LOL")
  2. Width, Height - The width and height must be defined and equal to your image's size. This example is 17x24 pixels, so that's the size of the element.
  3. Margin - The margin adjustment is used to prevent the emote from affecting the line height. This example is for text that is 12 px tall, so I have created a -5 px vertical margin (for top and bottom, so -10 px total) to make the element effectively 14 px tall, which maximizes the element size without heightening the line. Add 0px second for the horizontal margin.
  4. Display - The element should be displayed as an inline block, to make sure it is inline with the text but also still a distinct element.
  5. Background - Set the background URL to your image location on your website. You don't need to do extra formatting (Like I said I don't recommend resizing here anyway) because the element will be the same size as the background image.

Making & Integrating a Style Sheet

Now that you've defined the style of your emotes, you need to be able to access this on your page. In the <HEAD> tags of your page, use the LINK attribute to use your emote sheet on each page that will have emotes displayed.

HTML Format

Calling the emote in your BODY is very simple. All you have to do is create a span with the class set as your emote, and it can be integrated into any line of your text. I find that after you get used to it, this is a very simple bit of code and easy to memorize. Sure, not as short as :LOL:, but pretty close!

Does it have to be a <span>? - No. Personal preference, and what I just feels like makes the most sense. You can use <I> like Font Awesome, or other stuff like <B>, etc. The class formatting is what is important, especially because this method does not use any characters between the open and close of the tag.


Thank you again to Font Awesome for the inspiration, and thank YOU for checking out my little tutorial! I hope that got whatever information you needed from this tutorial, whether it was the whole thing or a just a code snippet. Feel free to spread my code however you want; I just ask that if you copy this page word for word for some reason that you credit me! >w< Happy Coding!

xoxo - Clamo

top // back