Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
29 changed files
with
23,363 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
Unfortunately, this project is **no longer maintained**. | ||
|
||
I now have other priorities in my life and no longer have time to update this library. Email me at elle.kasai@gmail.com if you'd like to reach me. | ||
|
||
# :tada: Twemoji Awesome :beer: | ||
|
||
Like [Font Awesome](http://fontawesome.io), but for [Twitter Emoji](http://twitter.github.io/twemoji/). | ||
|
||
## [View Demo and Documentation →](http://ellekasai.github.io/twemoji-awesome) | ||
|
||
## Author & License | ||
|
||
Elle Kasai | ||
|
||
- [Website](http://ellekasai.com/about) | ||
- [Twitter](http://twitter.com/ellekasai) | ||
|
||
Code: [MIT License](http://ellekasai.mit-license.org). | ||
Graphics: [CC-BY](https://creativecommons.org/licenses/by/4.0/). |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,70 @@ | ||
@charset "UTF-8"; | ||
|
||
/*———————————–———————————– | ||
Overwrite Bootstrap | ||
———————————–———————————–*/ | ||
|
||
body { | ||
border-top: 5px solid #FD7A66; | ||
font-family: "BPreplay", sans-serif; | ||
font-size: 18px; | ||
} | ||
.btn-primary { | ||
border-color: #DE805A !important; | ||
background-color: #F28B60 !important; | ||
} | ||
.btn-primary:hover { | ||
background-color: #FD7A66 !important; | ||
} | ||
.hljs { | ||
padding: 0; | ||
background: transparent; | ||
} | ||
|
||
/*———————————–———————————– | ||
Styles | ||
———————————–———————————–*/ | ||
|
||
.main-padding { | ||
padding-top: 100px; | ||
} | ||
main { | ||
padding-bottom: 100px; | ||
} | ||
ul { | ||
padding: 0; | ||
list-style: none; | ||
} | ||
code { | ||
padding: 0; | ||
background-color: transparent; | ||
color: #C4445B; | ||
} | ||
h3 { | ||
font-size: 25px; | ||
font-weight: 700; | ||
} | ||
.space-lg { | ||
margin-top: 35px; | ||
} | ||
.space-md { | ||
margin-top: 25px; | ||
} | ||
.space-sm { | ||
margin-top: 15px; | ||
} | ||
.title { | ||
color: #FD7A66; | ||
font-size: 45px; | ||
font-weight: 700; | ||
} | ||
.lead { | ||
font-size: 20px; | ||
} | ||
.table code { | ||
color: #555; | ||
font-size: 75%; | ||
} | ||
.table code strong { | ||
color: #C4445B; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,92 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1"> | ||
<title>Twemoji Awesome | Like Font Awesome, but for Twitter Emoji.</title> | ||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css"> | ||
<link rel="stylesheet" href="http://brick.a.ssl.fastly.net/BPreplay:400,700"> | ||
<link rel="stylesheet" href="twemoji-awesome.css"> | ||
<link rel="stylesheet" href="demo.css"> | ||
</head> | ||
<body> | ||
<div class="main-padding hidden-xs"></div> | ||
<main class="container"> | ||
<div class="row"> | ||
<div class="col-md-6 col-md-offset-3 text-center"> | ||
<h1 class="title">Twemoji Awesome</h1> | ||
<p class="lead space-sm">Like <a href="http://fontawesome.io/" target="_blank">Font Awesome</a> <i class="twa twa-tada" title=":tada:"></i>, but for <a href="http://twitter.github.io/twemoji/" target="_blank">Twitter Emoji</a> <i class="twa twa-beer" title=":beer:"></i>. Works with <a href="http://www.emoji-cheat-sheet.com/" target="_blank">Emoji Cheat Sheet</a> <i class="twa twa-clipboard" title=":clipboard:"></i>.</p> | ||
<p class="text-muted space-md">Written by <a href="http://ellekasai.com" target="_blank">Elle Kasai</a> <i class="twa twa-woman" title=":woman:"></i>, a UI designer/developer based in Vancouver, Canada <i class="twa twa-maple-leaf" title=":maple_leaf:"></i>.</p> | ||
</div> | ||
</div> | ||
<div class="row"> | ||
<div class="col-md-8 col-md-offset-2"> | ||
<p class="text-center"><a href="https://github.com/ellekasai/twemoji-awesome" target="_blank" class="btn btn-primary btn-lg space-sm"><i class="twa twa-star" title=":star:"></i> Download on GitHub</a></p> | ||
</div> | ||
<div class="col-md-12"> | ||
<p class="text-center space-sm"> | ||
<a href="https://twitter.com/share" class="twitter-share-button" data-via="ellekasai" data-size="large">Tweet</a> | ||
<iframe src="http://ghbtns.com/github-btn.html?user=ellekasai&repo=twemoji-awesome&type=watch&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30" style="margin-top: 14px;"></iframe> | ||
</p> | ||
</div> | ||
</div> | ||
<div class="row"> | ||
<div class="col-md-7 space-lg"> | ||
<h3><i class="twa twa-white-check-mark"></i> Usage</h3> | ||
<table class="table space-md"> | ||
<tr> | ||
<th><a href="http://twitter.github.io/twemoji/" target="_blank">Twemoji</a></th> | ||
<th class="hidden-xs"><a href="http://www.emoji-cheat-sheet.com/" target="_blank">Emoji Cheat Sheet</a></th> | ||
<th>HTML</th> | ||
</tr> | ||
<tr> | ||
<td><i class="twa twa-heart" title=":heart:"></i></td> | ||
<td class="hidden-xs"><code>:heart:</code></td> | ||
<td><code><i class="<strong>twa twa-heart</strong>"></i></code></td> | ||
</tr> | ||
<tr> | ||
<td><i class="twa twa-lg twa-sparkles" title=":sparkles:"></i></td> | ||
<td class="hidden-xs"><code>:sparkles:</code></td> | ||
<td><code><i class="<strong>twa twa-lg twa-sparkles</strong>"></i></code></td> | ||
</tr> | ||
<tr> | ||
<td><i class="twa twa-2x twa-hatching-chick" title=":hatching_chick:"></i></td> | ||
<td class="hidden-xs"><code>:hatching_chick:</code></td> | ||
<td><code><i class="<strong>twa twa-2x twa-hatching-chick</strong>"></i></code></td> | ||
</tr> | ||
</table> | ||
</div> | ||
<div class="col-md-5 space-lg"> | ||
<h3><i class="twa twa-memo"></i> Notes</h3> | ||
<p><i class="twa twa-one"></i> The emoji styles are defined in <strong>twemoji-awesome.css</strong>. Like <a href="http://fontawesome.io/" target="_blank">Font Awesome</a> which uses <code>fa-*</code>, Twemoji Awesome uses <code>twa-*</code> for class names.</p> | ||
<p><i class="twa twa-two"></i> Twemoji Awesome uses <a href="http://www.emoji-cheat-sheet.com/" target="_blank">Emoji Cheat Sheet</a> for the class names. <i class="twa twa-warning" title=":warning:"></i> You must replace underscores with hyphens, as shown in the <code>:hatching_chick:</code> example.</p> | ||
<p><i class="twa twa-three"></i> Like Font Awesome, you can change emoji sizes via <code>twa-lg</code>, <code>twa-2x</code>, <code>twa-3x</code>, <code>twa-4x</code> and <code>twa-5x</code>.</p> | ||
<p><i class="twa twa-four"></i> Twemoji Awesome uses SVG images as <code>background-image</code>, and some browsers don't support this. Images are served from <a href="https://www.maxcdn.com/" target="_blank">MaxCDN</a> (big thanks <i class="twa twa-thumbsup" title=":thumbsup:"></i>).</p> | ||
<p><i class="twa twa-five"></i> Code licensed under MIT. Graphics licensed under CC-BY.</p> | ||
</div> | ||
</div> | ||
<div class="row"> | ||
<div class="col-md-6 col-md-offset-3 space-lg"> | ||
<h3><i class="twa twa-speech-balloon" title=":speech_balloon:"></i> Tweets</h3> | ||
<blockquote class="twitter-tweet" data-cards="hidden" lang="en"><p>we love seeing the community releasing things built on <a href="https://twitter.com/hashtag/twemoji?src=hash">#twemoji</a> already: "Twemoji Awesome" <a href="http://t.co/mHPAPQyShZ">http://t.co/mHPAPQyShZ</a> <a href="http://t.co/c1O3fE3fP9">pic.twitter.com/c1O3fE3fP9</a></p>— Twitter Open Source (@TwitterOSS) <a href="https://twitter.com/TwitterOSS/status/531992111785074688">November 11, 2014</a></blockquote> | ||
<p>Thanks to <a href="https://twitter.com/chibicode" target="_blank">@chibicode</a> for revising my English.</p> | ||
</div> | ||
</div> | ||
</main> | ||
<div class="hidden-xs"> | ||
<div class="github-fork-ribbon-wrapper right fixed" style="width: 150px;height: 150px;position: fixed;overflow: hidden;top: 0;z-index: 9999;pointer-events: none;right: 0;"><div class="github-fork-ribbon" style="position: absolute;padding: 2px 0;background-color: rgba(242, 139, 96, 1);background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.15));-webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5);-moz-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5);box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.5);z-index: 9999;pointer-events: auto;top: 42px;right: -43px;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);"><a href="http://github.com/ellekasai/twemoji-awesome" style="font-size: 14px; font-weight: 700;color: #fff;text-decoration: none;text-shadow: 0 -1px rgba(0, 0, 0, 0.5);text-align: center;width: 200px;line-height: 20px;display: inline-block;padding: 2px 0;border-width: 1px 0;border-style: dotted;border-color: rgba(255, 255, 255, 0.7);" target="_blank">Fork me on GitHub</a></div></div> | ||
</div> | ||
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> | ||
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> | ||
<script> | ||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ | ||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), | ||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) | ||
})(window,document,'script','//www.google-analytics.com/analytics.js','ga'); | ||
|
||
ga('create', 'UA-36051690-6', 'auto'); | ||
ga('send', 'pageview'); | ||
|
||
</script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
source 'https://rubygems.org' | ||
|
||
gem 'nokogiri' | ||
gem 'rake' | ||
gem 'open4' | ||
gem 'colored' | ||
|
Oops, something went wrong.