Adding Emoticons & Other Icons Using UTF-8 Decimal (Base 10) HTML Codes on Steemit
This article shows you how to use all kinds of characters is the last article in the series, barring me discovering other relevant info. May I just say that this was a colossal undertaking that took me many, many hours to complete - not as challenging as some of my previous articles, but certainly time-consuming!
If you're trying to add some "style" to your articles on Steemit, there are some choices from hypertext markup language (HTML) and markdown language (MDL) that you can use. Each of these items is called a "tag"; the one before the text is an opening tag, and the one after the text you're styling is a closing tag. Certain tags do not need both as they are self-closing. Tags within <> are from HTML. Unfortunately, those of you who have studied HTML and MDL may be frustrated because only certain tags from each work. Here are a few that I figured out for you, although I STILL don't know how to underline. In each article, I'll share some tips for you! THERE IS NO MDL taught in this article.
Resources for Emoticons and Other Characters
Before you start, check out the Steemit article that put me onto this. Unfortunately, the Raw HTML Editor in that article isn't available (to me? to all?), but the rest of it is useful. Steemitguide: Tutorial on How-To use Unicode Characters on Steemit Raw HTML Editor ! Includes Cheatsheet on Smileys, Icons and Symbols by @steemitguide. The info on how to enlarge an icon doesn't work, but much of the rest of it works!
Unicode-table.com provides you with HTML and unicode codes for lots of icons.
FlatIcon provides almost 1,000,000 icons for free, too, in various image formats, including: SVG (a format which scales to any size very nicely), EPS vector, PNG, PSD files and Icon Font.
There are other websites that offer icons if you just search (which is how I found FlatIcon just now).
How To Add Emoticons (and other Icons)
The use of icons is incredibly simple. You can either cut and paste the image you want, which will appear in the editor as icons, too: 🐼
; or, you can use the HTML decimal code that is its equivalent (see the resources listed above, or the table below): 🐼
Note that the code doesn't have to be preceded or followed by a space. As with text, the HTML and MDL I've shared for formatting text can be used on these icons. Don't forget the ampersand-hashtag &# at the start and the semicolon ; at the end!
I had thought to make an abridged table of the UTF-8 character set (an index of everything), but it's pretty complicated and disorganized. You can always see plenty at Character Sets, which lists a wide range of character sets. Note that once you select one, you'll need to click on "Complete Character Set" or "Grid". Click here for UTF-8, which is spread over several pages.
Here's an "abbreviated" table of some of the icons and emoticons you can get from UTF-8. To make the table fit correctly, I had to remove the symbols from the codes, so please take whatever number is listed for the symbol you want in the "No." column, and prefix it with "&#" and suffix it with a semicolon (;). Ex. No.102351=code 𘿏
Be aware that Windows uses UTF-16, so some symbols won't appear if you're using Windows; in order to show something for those that aren't compatible with Windows, I used fileformat.info and copy-pasted the image here. Finally, you'll notice gaps in the numbering sequence, which is both because of unused numbers and numbers I didn't want to display (languages, letters, numbers, special symbols, etc.).
Since I have received so little reward for all my efforts in creating these articles for editors and this article took a very LONG time to make, this is going to be my last one and I won't include UTF-16. I would've made it substantially more useful if it were worth my time (i.e. if Steemit were actually designed to appreciate fairly and equally quality work)
by separating into different categories the various icons shown below, among other things.
For the curious, I used MDL to build the tables. I was not able to use triple columns because, although it looked right in the preview, it failed to display correctly when saved.
Other Useful Unicode Characters by Category:
Symbols | Range | Ex | Symbols | Range | Ex |
---|---|---|---|---|---|
anatomy | 128063 to 128080, 129460 to 129463, 129504 | 🧠 | animals | 128000 to 128063, 129408 to 129442 | 🦂 |
arrows | 8384 to 8410, 8425, 8428 to 8431, 8592 to 8703, 9193 to 9199, 10132, 10135 to 10159, 10161 to 10174, 10224 to 10239, 11008 to 11025, 11056 to 11087, 11098 to 11193, 11244 to 11247, 65513 to 65516, 128256 to 128260, 128281 to 128285, 129024 to 129195 | ⇿ | ballots, checkmarks & crosses | 9744 to 9746, 9989, 10003 to 10008, 10060 to 10066, 11193 to 11199, 128318, 128319, 128499 to 128505 | ☑ |
box drawings | 9472 to 9599 | ─ | braille | 10240 to 10495, 10495 to 10538, 10541 to 10619 | ⣿ |
buildings & terrain | 127956 to 127981, 127983 to 127984, 128331 to 128333, 128506 to 128510 | 🏰 | celebrations | 127872 to 127891 | 🎍 |
clocks & time | 128336 to 128359 | 🕔 | clothes | 127933, 128081 to 128098 | 🎽 |
consumables, cooking, eating, drinking & food | 127789 to 127791, 127798, 127805 to 127807, 127812 to 127871, 129346 to 129348, 129360 to 129391, 129472 to 129474 | 🥩 | computer | 128421 to 128476 | 🗂 |
copyright, trademark, service mark | 8471, 8480, 8482, 127279 | ℠ | currency | 8352 to 8383, 65504, 65505, 65509, 65510, 128176 to 128184 | ₠ |
emoticons aka emojis | 128512 to 128591, 129296 to 129335, 129392 to 129402, 129464, 129465, 129488 to 129494, 129496 to 129503 | 😜 | entertainment, games & sports | 9812 to 9823, 9824 to 9831, 9856 to 9861, 9920 to 9923, 126976 to 127221, 127896 to 127955, 127992, 127993, 129336 to 129342, 129349 to 129359, 129495, 129513, 129632 to 129645 | 🥇 |
flowers, leaves, snow & stars | 10018 to 10059 10086, 10087, 11088 to 11090, 11240 to 11243, 127799 to 127804, 127893, 128592 to 128619, 128943 to 128980, 129344 | ✢ | gender | 9792, 9794, 9890 to 9897, 9906 | ♀ |
map symbols | 9832, 9932, 9963, 9964, 9967, 9968, 9979 to 9983, 9990, 9992 | ⛿ | marital/life status | 9901 to 9906 | ⚭ |
geometric & grid | 8410 to 8424, 8426, 8427, 8988 to 8991, 9473 to 9727, 9862 to 9865, 9898 to 9900, 9929 to 9931, 9947, 9949, 9950, 9954 to 9962, 9965, 9966, 9973, 10692 to 10711, 11025 to 11055, 11091 to 11097, 11200 to 11215, 65517, 65518, 127994 to 127998, 128306 to 128322, 128636 to 128639, 128884 to 128942, 128981 to 128984, 129195 to 129287 | ┒ | alchemy, math, punctuation, science, etc. | 8314 to 8318, 8330 to 8334, 8704 to 8985;, 9001, 9002, 9004 to 9191, 10133 to 10135, 10175 to 10223, 10619 to 10691, 10712 to 11007, 11216 to 11218, 11257 to 11262, 11776 to 11854, 12291, 12296 to 12319, 12330 to 12333, 12336, 65040 to 65131, 65281 to 65295, 65506 to 65508, 128624 to 128635, 128768 to 128883, 129288 to 129291, 129514 to 129518 | ⌬ |
music | 9833 to 9839, 118784 to 119364, 127896 to 127901, 127925 to 127932, 128239 | ♯ | people | 128100 to 128120, 129328, 129329, 129332 to 129342, 129494 to 129503 | 🤷 |
plants | 127792 to 127797, 127799 to 127804, 127807 to 127812 | 🍂 | playback | 9204 to 9210 | ⏺ |
recycling | 9842 to 9854 | ♾ | religious | 9765 to 9770, 9772, 9775, 9784, 9800 to 9811, 9840, 9841, 9866 to 9871, 9882, 9885,9907 to 9916, 9934, 10009 to 10017, 11219 to 11239, 11248 to 11256, 128326 to 128335, 128723, 128724 | ☥ |
scissors | 9984 to 9988 | ✄ | solar system | 9737, 9789, 9790, 9791 to 9799, 9907, 127756 to 127776 | ☿ |
special letters | 9372 to 9397, 9398 to 9423, 9424 to 9449, 127245 to 127278, 127280 to 127404 | ⓐ | special numbers | 8304 to 8313, 8319 to 8329, 8528 to 8543, 8585, 8544 to 8579, 8581 to 8584, 9192, 9312 to 9331, 9332 to 9351, 9352 to 9371, 9450, 9471, 9451 to 9460, 9460 to 9470, 10102 to 10131, 12872 to 12879, 12881 to 12895, 12977 to 12991, 65375 to 65379, 119671, 119672, 120792 to 120801, 127232 to 127244 | ⑳ |
traffic & transport | 9932, 9933, 9936 to 9946, 9948, 9951 to 9953, 128619 to 128622, 128639 to 128680, 128690 to 128696, 128739 to 128761 | ⛡ | weather | 127744, 127745, 127777 to 127788 | 🌣 |
writing utensils | 9998 to 10002 | ✒ |
This post took me many, many hours over a couple of weeks to create, and it could have been much better if Steemit actually supported me. As it is, I earn no money, despite my best efforts and so much time to provide quality content of use to many, on Steemit.
Credits:
If you're looking for an all-in-one guide, you might find The Ultimate Guide To Formatting On Steemit (Markup and Markdown) by @sisygoboom useful. It contains a lot of info, briefly presented, and I even found a couple of new things!
A great deal of this involved experimenting, both with what I know about HTML and markdown, and because not everything in the articles I read worked.
As I was working on this, I found this article How to insert 2 Columns and edit Text Style with equivalent HTML tags using Steemit's Raw Markdown Editor by @steemitguide. It's not as comprehensive as I needed, but it did remind me about divs and how to make columns, and the first 2 links to other articles (at the bottom of it) may help you. The third I found to be useless, except I got the "center" tag from it. Some of the info in the 2 other articles works, some doesn't, including the stuff about the Raw HTML editor.
I found this article to be difficult to use, and not everything works, but I gleaned some of the above content from it: Steemit Beginner Tips : Basic Guide on how to Adjust and Edit Fonts in Post. If you don't see something from here in my article, that's because it didn't work or I couldn't figure it out.
The article Steemitguide: Tutorial on How-To use Unicode Characters on Steemit Raw HTML Editor ! Includes Cheatsheet on Smileys, Icons and Symbols, by @steemitguide, has some outdated info, but it was where I got the emoticon codes from and, by looking at the source code, I was reminded about using tables.
If you appreciate this article, please upvote/like, resteem/share
and share it to Facebook
, Twitter
, Reddit
, LinkedIn
and wherever else
you can!
dang... putting together that table must have been a real pain here :P
It was indeed! I'm glad I didn't use HTML - that would've been even worse!