Steemitguide: Tutorial on How-To use Unicode Characters on Steemit Raw HTML Editor ! Includes Cheatsheet on Smileys, Icons and Symbols

in steemitguide •  2 years ago

This Post is about all the Special Icons available on Steemit that are based on Unicode Characters

Many Steemians don't know that Unicode characters are accepted here on Markdown Editor, this means there are several icons which Steemit offers that you can include in your Post and Comments.

Go ahead Try Them Out 😉


Step 1 - Using Raw HTML EDITOR

Before we continue with this Guide, let me teach you how to write the proper codes that need to be written in Steemit's Raw HTML Editor, in order for it to work. This only works on Raw HTML Editor and don't worry about this being too complicated, it's only a short code made of Numbers and Few Symbols which you can always Copy & Paste or Type Out


Step 2 - Find the Icon's HTML Code

There are so many Unicode Characters that you can use, however Here is a short list of Smiley Icons:

IconCode
😉 Wink&#128521
😊 Smile&#128522
😠 Angry&#128544
😜 Tongue&#128540
😧 Surprised&#128551
😱 Scream&#128561
😆 LOL&#128518
😎 Glasses&#128526
😍 Heart Eyes&#128525
😭 Crying&#128557
😞 Sad&#128542
😶 No Words&#128566
😇 Angel&#128519
😈 Devil&#128520
😵 Dizzy&#128565

Step 3 - Using the Right Code for Steemit Markdown Editor

First you will need to Copy and paste the code into Steemit Raw Editor, the icon will not appear in the preview or display on your Post until you add a semicolon= ; after each code.

Here is an Example

Input

Output

Important to Remember
When you add the Semicolon after the Code, remember that there is NO SPACE in between Code and '' ; "
For the Codes to be turned into icons every code must begin with &# and end with '' ; '' and is to be written out without any Spaces

Like This

😉

You could try this out now in the Comment Section (Leave a good Comment! 😍)
Just copy Paste the Code from above and just include '' ; '' at the end to complete the Code, it's that Easy!


Step 4 - Additional Tips

Icon slightly too small for you? Make it slightly bigger with this Trick;

Grab People Attention with Big Icons 😜

See the Difference in Size;
😊

😊

Include a ''# '' tag followed by a ''Space'' before your Code, like this

This is the code i used for above Smiley Comparison, Please Note that you must space them out in order to enlarge your Smiley!

There must be a Space Between ''#'' and Smiley Code


Step 5 - Be Creative with Rare Icons! Check Out More

IconCode
💩 Poo&#128169
💓 Heart&#128147
💔 Broken Heart&#128148
💘 Heart with Arrow&#128152
💣 Bomb&#128163
💤 Sleepy&#128164
💦 Splash&#128166
💪 Biceps&#128170
💰 Money&#128176
💻 Computer&#128187
💾 Disk&#128190
📁 Folder&#128193
📞 Phone&#128222
📢 Loudspeaker&#128226
📨 Incoming Email&#128232
📷 Camera&#128247
📹 Video Camera&#128249
📺 TV&#128250
🔋 Battery&#128267
🔎 Magnifying&#128270
🔑 Key&#128273
🔒 Lock&#128274
🔓 Open Lock&#128275
🔥 Fire&#128293
🔫 Gun&#128299
🗽 Statue of Liberty&#128509
👍 Thumbs Up&#128077
👎 Thumbs Down&#128078
👌 Ok Sign&#128076
👋 Waving Hands&#128075
👊 Fist&#128074
👦 Boy&#128102
👧 Girl&#128103
👨 Man&#128104
👩 Woman&#128105
🌄 Sunrise&#127748
🌈 Rainbow&#127752
🌙 Moon&#127769
🌋 Volcano&#127755
🌟 Star&#127775
🏠 House&#127968
🎾 Tennis&#127934
🎻 Violin&#127931
🏀 Basketball&#127936
🎥 Movie&#127909
🎳 Party&#127923
🎈 Balloon&#127880
🍁 Mapple Leaf&#127809
🍄 Mushroom&#127812
🍌 Banana&#127820
🍑 Peach&#127825
🍒 Cherries&#127826
🍓 Strawberry&#127827
🍎 Apple&#x1F34E
🍔 Hamburger&#127828
🍕 Pizza&#127829
🍘 Rice Cracker&#127832
🍜 Steaming Bowl&#127836
🌂 Umbrella&#127746
🍟 French Fries&#127839
🍞 Bread&#127838
🍝 Noodles&#127837
🍩 Doughnut&#127849
🍨 Icecream&#127848
🍪 Cookie&#127850
🍫 Chocolate Bar&#127851
🍬 Candy&#127852
🍭 Lollypop&#127853
🍸 Cocktail&#127864
🍺 Beer&#127866
🍻 Clinking Beers&#127867
🎁 Present&#127873
🎃 Halloween&#127875
🎄 Christmas Tree&#127876
🎅 Santa&#127877
🎨 Art&#127912
🎮 Videogame&#127918
🎱 Billiards&#127921
🎲 Game Die&#127922
🎳 Bowling&#127923
🐀 Rat&#128000
🐄 Cow&#128004
🍀 Four Leaf Clover&#127808
🐉 Dragon&#128009
🐋 Whale&#128011
🐍 Snake&#128013
🐒 Monkey&#128018
🐕 Dog&#128021
🐖 Pig&#128022
🐘 Elephant&#128024
🐢 Turtle&#128034
🎵 Music&#127925
🏃 Runner&#127939
🏆 Trophy&#127942
🏈 American Football&#127944
🐼 Panda&#128060
🐷 Pig Face&#128055
👄 Mouth&#128068
🎹 Piano&#127929
🌷 Tulip&#127799

Step 6 - Try out all Possible Icons Available to Use

Those are all cool symbols right! There are all sorts of Icons you can use, need a source?
Visit unicode-table.com

♓ , Ǡ , س , অ , Ⓒ , ⻆ , ぢ , ㊧ , ㎥

See how I find the specific Code for a Icon

Step 1 - Find a Specific Icon from unicode-table.com you can browse through several Categories

Step 2 - Copy the Specific HTML Code to Steemit's Raw HTML Editor


steemitguide47985.png
If there is anything you would like to see a Guide on, let me know! Dedicated 21 Year old Steemian interested in getting Vested. Follow and Upvote me, the more people show Appreciation, the more I want to do Guides! Wish you all a Wonderful Day and hope you enjoyed this Post. Been on Steemit for over nearly 3 Months but I rarely see people use Icons

Wanna Learn how I aligned my Paragraph and Image? Click on this Post

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

Upvoted and followed. Cool and informative post!

This is great stuff, I'm going to use a few of these tips in my next post.

@steemitguide THANK YOU VERY MUCH FOR THIS !
upvoted and resteemed cause it's really going to be helpful

This is really helpful, I was wondering how to use smileys and such!

I wrote a post about using these emojis recently too.
I had a model and aspiring actress who allowed me to use her photo for my little "story" and "lesson".

·

Found it :) Upvoted!

·
·

Wow, thanks.

Very useful instructions, bookmarked for future reference, thank you!

Thankyou for this post. Do you know where I can get a basic guide for text editing, centre align, font size increase?

&#127799

Thanks for the info. How do I do a steemit unicode on the title line?

Thank You! 👎 👎 👎

Hello! I have tried it, but it really does not show the icons as it should. I can see that the article was created last year, have you found out other ways that do work? Please let me know at @sucksess. That you 😊