ellekasai / twemoji-awesome

[Unmaintained] Like Font Awesome, but for Twitter Emoji
http://ellekasai.github.io/twemoji-awesome
871 stars 99 forks source link

Show all the emoji on an example page #7

Open pickhardt opened 9 years ago

pickhardt commented 9 years ago

Is there a page where you show all the emoji so I can decide which to use? That would be useful.

ghost commented 9 years ago

did you need complete list? I will send you all code here.

pickhardt commented 9 years ago

Actually I don't really need it any more - in using something else - but in general it'd be good to have a page or put them all on the read me.

Sent from my Android. On Aug 11, 2015 9:40 PM, "rajlaksh" notifications@github.com wrote:

did you need complete list? I will send you all code here.

— Reply to this email directly or view it on GitHub https://github.com/ellekasai/twemoji-awesome/issues/7#issuecomment-130158619 .

ghost commented 9 years ago

I use Json to Parse it in HTML

viraj89 commented 8 years ago

Hi people. I am using latest version of Chrome and Firefox, but I am unable to see these emoji on a sample HTML page.

I refereed the tutorials from here - http://readwrite.com/2014/11/11/how-to-use-emoji-in-the-browser-window

I just see square boxes like below mentioned.

emochr

emoff

Am I making any silly mistake? Thanks

pattishih commented 8 years ago

The page you referenced provides a couple different techniques for displaying emojis on a webpage, one of them being Twemoji Awesome, which is this Github. What technique did you use to generate your sample page? It's hard to diagnose the source of issue when all you've provided are screenshots of the result... but to rule out the obvious — the examples show sample HTML but do not include the full CDN path in the tag. Make sure that's not the problem... Sorry if that's too obvious, but you've provided very little to work off of...

viraj89 commented 8 years ago

@pattithepotato Sorry but here's the code below for above screen shots.

<html>
  <head>  
    <title>Emoji Everywhere</title>
    <script src="https://twemoji.maxcdn.com/twemoji.min.js"></script>    
  </head>  
  <body>  
&#x1F3B9;
&#x1F3C1;  
  </body>  
</html>

As per my understanding, it must run/visible on any html page after the library from CDN is added.

Also if add the CSS file in my HTML, I see the same result as above.

pattishih commented 8 years ago

Thanks. That exact code is working for me. I'm running Chrome Version 48.0.2564.103 (64-bit), but on Mac OS X, which has native support for unicode emojis so it will work with or without the javascript injection. However, I think the webpage that you've referenced might be using the API incorrectly, but I'm not sure. I haven't looked at the source code, but if you look at the github for the original Twemoji project, they are clearly using it differently. https://github.com/twitter/twemoji

viraj89 commented 8 years ago

Thanks for the reply. Let me try again from scratch. I see even I have the same version of Chrome installed my PC. Update you quick!

pattishih commented 8 years ago

Just by looking at the results of the sample page, it seems that the API isn't automatically replacing the unicode with CSS img emojis, which is what the script looks like it should be doing. It's possible that the js code can check my system and determine to do nothing if it already has native unicode emoji support, but I doubt it does that. I suspect that you will have to use the API by calling its methods with js and inserting the emojis as DOM nodes. In that case, I would probably recommend using Elle's Twemoji Awesome, which will allow you to specify emojis directly in the HTML. Unfortunately, I don't think there's a CDN for it at the time.

viraj89 commented 8 years ago

Okay, now here's my take. Also providing the screenshots below. I tried this file from - https://goo.gl/3gr3PZ and here's the result on Chrome: pic1

Tried the CSS classes and here's the result on Chrome below: pic2 Those 2 tiny boxes are tried using the CDN, ie Twemoji's project.

I am afraid to say, few of the emoji of original Twemoji's project seems may not be working, but using @ellekasai CSS classes, emoji works really good.

Yes, I agree with you about there's no CDN for using Elle's Twemoji Awesome and must be included locally. @ellekasai - Any future plans for CDN?

Till then I'll make use of my Google Drive or Dropbox as a CDN :stuck_out_tongue_winking_eye:

pattishih commented 8 years ago

When you look at the source code for the page, does it show that they have been replaced with img tags and classes? I sort of suspect that those unicode icons might be native to your Windows OS. In any case, glad Elle's CSS classes are working for you! I actually ended up using http://emojione.com since there's a wider selection of emojis and provides additional helper scripts. Regardless, she's done a great job with the twitter emojis.

viraj89 commented 8 years ago

Yes, I completely agree about @ellekasai done a fabulous job! Emoji One seems to have tons of emojis! :eyes: :chocolate_bar:

pattishih commented 8 years ago

Lol nice emojis you've added there. Anyway, gl with everything!

viraj89 commented 8 years ago

But, @pickhardt & @ghost there was this page already created by @ellekasai - http://www.emoji-cheat-sheet.com/

PS @ghost is no longer a Github user. :scream:

viraj89 commented 8 years ago

@pattithepotato Sorry to ask, what's gl? :neutral_face:

pattishih commented 8 years ago

You must not play any video games. :) gl = good luck!

viraj89 commented 8 years ago

Oh okay for gl :+1:

Video games? :sunglasses:

@pattithepotato Why can't issue be closed? Hope the question has been resolved.

pattishih commented 8 years ago

well, technically multi-player online computer games. I use to play, but not much at all anymore. At the start of a match, people would say 'glhf', which means "Good luck; have fun!"

viraj89 commented 8 years ago

Sorry I'm bad at it. :)

pattishih commented 8 years ago

That's probably a good thing for staying focused!

hellokaton commented 8 years ago

Is there any update recently :question:

nektro commented 6 years ago

If you want an overview of all the Twitter emoji, I made a page that shows them all https://me.nektro.net/projects/emoji_viewer/?twitter