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

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

H2
H3
H4
3 columns
2 columns
1 column
22 Comments