Ultimate Guide & Cheat-sheet for Smiley & Icon's, make use of the Thousands Emoticons recognized by Steemit's Raw HTML EditorsteemCreated with Sketch.

in steemit โ€ขย  2 years ago

This Post is going to be all about Smileys & Icons, be prepared to use Steemit's Built-in Raw HTML Editor ๐Ÿ˜Š

Why on earth should you be including colourful Smiley's and Icon's?
As social media has grown, these pictorial representations of feelings are playing a significant role in communication. Most of us use Smiley's to convey a text message, expressing emotions in a non-physical way which also means that you are communicating it to someone directly or indirectly through your smileys

If youโ€™re still not sure whether emoticons are a good fit for voice and tone especially if you're a content writer for the Steemit Community, know that there has been a real-deal of scientific studies that say using emoticons can make you appear friendlier, grow your popularity on social media, and even make you happier offline!


Smiley & Icon Raw HTML Editor Tutorial

Before we can even start make sure you're on the blank Raw HTML Editor Page, this allows us to further edit our Post with Markdown & subset of HTML Codes!

Now that you have the Raw Editor you need to remember that it recognizes certain Markdown & HTML Codes, a beginner tip would be to check ''Preview'' Section below the Editor to see if your input codes actually works

To make things more simple, I posted a Table of Smiley's & Creative Icon's for you to use as Reference !


Smiley Table

Column 1Column 2Column 3
๐Ÿ˜‰ &#128521๐Ÿ˜Š &#128522๐Ÿ˜  &#128544
๐Ÿ˜œ &#128540๐Ÿ˜ง &#128551๐Ÿ˜ฑ &#128561
๐Ÿ˜† &#128518๐Ÿ˜Ž &#128526๐Ÿ˜ &#128525
๐Ÿ˜ญ &#128557๐Ÿ˜ž &#128542๐Ÿ˜ถ &#128566
๐Ÿ˜‡ &#128519๐Ÿ˜ˆ &#128520๐Ÿ˜ต &#128565

Creative Icons

Column 1Column 2Column 3
๐Ÿ’“ &#128147๐Ÿ’” &#128148๐Ÿ’˜ &#128152
๐Ÿ’ฃ &#128163๐Ÿ’ค &#128164๐Ÿ’ฆ &#128166
๐Ÿ’ช &#128170๐Ÿ’ฐ &#128176๐Ÿ’ป &#128187
๐Ÿ’พ &#128190๐Ÿ“ &#128193๐Ÿ“ž &#128222
๐Ÿ“ข &#128226๐Ÿ“จ &#128232๐Ÿ“ท &#128247
๐Ÿ“น &#128249๐Ÿ“บ &#128250๐Ÿ”‹ &#128267
๐Ÿ”Ž &#128270๐Ÿ”‘ &#128273๐Ÿ”’ &#128274
๐Ÿ”“ &#128275๐Ÿ”ฅ &#128293๐Ÿ”ซ &#128299
๐Ÿ—ฝ &#128509๐Ÿ‘ &#128077๐Ÿ‘Ž &#128078
๐Ÿ‘Œ &#128076๐Ÿ‘‹ &#128075๐Ÿ‘Š &#128074
๐Ÿ‘ฆ &#128102๐Ÿ‘ง &#128103๐Ÿ‘จ &#128104
๐Ÿ‘ฉ &#128105๐ŸŒ„ &#127748๐ŸŒˆ &#127752
๐ŸŒ™ &#127769๐ŸŒ‹ &#127755๐ŸŒŸ &#127775
๐Ÿ  &#127968๐ŸŽพ &#127934๐ŸŽป &#127931
๐Ÿ€ &#127936๐ŸŽฅ &#127909๐ŸŽณ &#127923
๐ŸŽˆ &#127880๐Ÿ &#127809๐Ÿ„ &#127812
๐ŸŒ &#127820๐Ÿ‘ &#127825๐Ÿ’ &#127826
๐Ÿ“ &#127827๐ŸŽ &#x1F34E๐Ÿ” &#127828
๐Ÿ• &#127829๐Ÿ˜ &#127832๐Ÿœ &#127836
๐ŸŒ‚ &#127746๐ŸŸ &#127839๐Ÿž &#127838
๐Ÿ &#127837๐Ÿฉ &#127849๐Ÿจ &#127848
๐Ÿช &#127850๐Ÿซ &#127851๐Ÿฌ &#127852
๐Ÿญ &#127853๐Ÿธ&#127864๐Ÿบ &#127866
๐Ÿป &#127867๐ŸŽ &#127873๐ŸŽƒ &#127875
๐ŸŽ„ &#127876๐ŸŽ… &#127877๐ŸŽจ &#127912
๐ŸŽฎ &#127918๐ŸŽฑ &#127921๐ŸŽฒ &#127922
๐ŸŽณ &#127923๐Ÿ€ &#128000๐Ÿ„ &#128004
๐Ÿ€ &#127808๐Ÿ‰ &#128009๐Ÿ‹ &#128011
๐Ÿ &#128013๐Ÿ’ &#128018๐Ÿ• &#128021
๐Ÿ– &#128022๐Ÿ˜ &#128024๐Ÿข &#128034
๐ŸŽต &#127925๐Ÿƒ &#127939๐Ÿ† &#127942
๐Ÿˆ &#127944๐Ÿผ &#128060๐Ÿท &#128055
๐Ÿ‘„ &#128068๐ŸŽน &#127929๐ŸŒท &#127799

Step 1 Understanding the Need of a Valid Code


It would be easy if we could just type out Wink and get this ๐Ÿ˜‰, but you will need to get a bit more technical if you want the Raw HTML Editor to understand your command

Since the use of Smiley's & Icon's skyrocket for the years, many Editors have come to support emoticons codes however some of codes can be a bit difficult to remember and it would help that you keep this post saved!

Step 2 Complete the Code

Above Table shows the accepted Codes which you can simply Copy & Paste the code into Steemit's Raw Editor. You will notice that emoticons won't appear in the preview, this is because the code is not yet complete

One thing is that all these Emoticons have in common is that they all finish with a semicolon ; at the end of each code. Once you add the semicolon ; you actually completed the emoticon code which Steemit's Raw HTML recognizes
Keep it a Try!

Example; Let's Use Tongue smiley ๐Ÿ˜œ

Find the Code from above Table

&#128540

Copy & Paste the Code into HTML Raw Editor and add a Semicolon at the end ;

😜

If copy paste the exact code above you should see the Smiley in the Preview Section

Step 3 - Useful Tips

Tip 1 - You can actually make Icons slightly bigger

See the Difference in Size;
๐Ÿ˜Ž

๐Ÿ˜Ž

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

# 😎

Remember that there must be a Space Between ''#'' and Smiley Code

Tip 2 - Just Copy & Paste the Smiley Directly

You can actually just copy & paste the Smiley directly, try it out now by highlighting this emoticon here ๐Ÿ˜‡

Once highlight, perform a ''Right-click'' using your mouse to copy and afterwards paste it into Steemit's Raw HTML Editor!

Tip 3 - Find more Great Emoticons

There are many more symbols & icons available that I have not covered in this post, so feel free to visit www.unicode-table.com

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

Tip 4 - Use Smiley's & Icon's for Comments

Did you know that all these Emoticons will also work for Comments! Don't be shy and use a Smiley Icon to show someone how you really feel. You can show me some ๐Ÿ’“ by following Me, much appreciated!


Here are some other Guides you might find Interesting

Tips on how to Edit & Customize Images via Steemit's Raw HTML Editor; Add Links, Source Reliable Image Hosting Services and Center Align Images

How to Construct a 2 or 3 Column Table using Steemit's Raw Markdown Editor! Tutorial and Codes for Beginners

How To Make Use of a Steemit Feature that allow's you to display content floating left & right and learn how to paragraph

Align Text, Images, Videos & GIF's to the Center of Post using Markdown Raw Editor

How to insert 2 Columns and edit Text Style with equivalent HTML tags using Steemit's Raw Markdown Editor


steemitguide47985.png

Doesn't this go well with the SteemVerify Logo? Anyways, if you spot an error in any of my Guides please feel free to correct me and also if there is anything you would like to see a Guide on, let me know! Dedicated young Steemian interested in getting Vested. Will write more great Guides & Tutorials, Follow me for more!

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: ย 

Thank you! :)

Thanks and praise ๐Ÿ™

Thank you! Very useful ๐ŸŽฒ

ย  ยท ย 2 years ago

if you want an easier way. i write a browser plugin for that: https://steemit.com/steemit/@dehenne/steemoji-0-5-0-easy-emojis

๐Ÿ˜ Just what I need! Thank you