Skip to content

Instantly share code, notes, and snippets.

@shoota

shoota/emoji-awesome.html

Last active December 31, 2015 12:38
Show Gist options
  • Save shoota/7987115 to your computer and use it in GitHub Desktop.
Save shoota/7987115 to your computer and use it in GitHub Desktop.
Download ZIP
Github EmojisをFontAwesomeっぽい記述で表示するjQueryメソッド
Raw
emoji-awesome.html
<html>
<head>
<title>jQuery.emoji-awesome.js</title>
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function(){
$.getJSON(
"https://api.github.com/emojis",
function(emojis){
$('i.ge').each(function(){
var fsz=$(this).parent().css('font-size');
var cls = $(this).attr('class').replace(/gh-|ge| /g,'');
$(this).append('<img src="'+emojis[cls]+'" style="height:inherit">');
$(this).height(fsz);
});
});
});
</script>
<style type="text/css">
.ge {
vertical-align: middle;
}
</style>
</head>
<body>
<div>
<p>defautlt size screemcat <i class="ge gh-scream_cat"></i></p>
<p style="font-size:1em;"> 1em screemcat <i class="ge gh-scream_cat"></i></p>
<p style="font-size:2em;"> 2em screemcat <i class="ge gh-scream_cat"></i></p>
<p style="font-size:3em;"> 3em screemcat <i class="ge gh-scream_cat"></i></p>
<p style="font-size:5em;"> 5em screemcat <i class="ge gh-scream_cat"></i></p>
</div>
<div>
<p style="font-size:20px;"> 20px golf <i class="ge gh-golf"></i></p>
<p style="font-size:30px;"> 30px golf <i class="ge gh-golf"></i></p>
<p style="font-size:40px;"> 40px golf <i class="ge gh-golf"></i></p>
<p style="font-size:50px;"> 50px golf <i class="ge gh-golf"></i></p>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment