forked from ellekasai/twemoji-awesome
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
89 lines (87 loc) · 7.83 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!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"></i>, but for <a href="http://twitter.github.io/twemoji/" target="_blank">Twitter Emoji</a> <i class="twa twa-beer"></i>. Works with <a href="http://www.emoji-cheat-sheet.com/" target="_blank">Emoji Cheat Sheet</a> <i class="twa twa-clipboard"></i>.</p>
<p class="text-muted space-md">Written by <a href="http://ellekasai.com/about" target="_blank">Elle Kasai</a> (<a href="http://twitter.com/ellekasai" target="_blank">@ellekasai</a>) <i class="twa twa-woman"></i>, a UI/UX designer based in Vancouver, Canada <i class="twa twa-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"></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"></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"></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"></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"></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"></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"></i> Tweets</h3>
<blockquote class="twitter-tweet" lang="en"><p>I released another project :) Twemoji Awesome: Like <a href="https://twitter.com/fontawesome">@fontawesome</a>, but for Twemoji. 🐣 <a href="http://t.co/3RmBRnQEJt">http://t.co/3RmBRnQEJt</a> … <a href="https://twitter.com/hashtag/twemojiparty?src=hash">#twemojiparty</a> cc:<a href="https://twitter.com/TwitterOSS">@TwitterOSS</a></p>— Elle Kasai (@ellekasai) <a href="https://twitter.com/ellekasai/status/531979044036698112">November 11, 2014</a></blockquote>
<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>
</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>