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.
<img src="https://www.website.com/image.gif">
more realistically, for me, <img src="https://www.website.com/images/emotes/1/image.gif">
VS
<span class="emote"></span>
This is with an IMG! ![]() |
This is with CSS + SPAN There is no extra space! |
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!)
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!
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.
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.
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