mirror of
https://github.com/FortAwesome/Font-Awesome.git
synced 2024-12-26 21:41:29 +08:00
adding social media buttons
This commit is contained in:
Dave Gandy
parent
71b6237fc6
commit
fc9eafddea
@ -4525,20 +4525,14 @@ h6 {
|
||||
border-width: 3px;
|
||||
font-size: 17px;
|
||||
line-height: 28px;
|
||||
left: 94.66666666666667px;
|
||||
left: 100.66666666666667px;
|
||||
}
|
||||
#iconCarousel .carousel-control.right {
|
||||
left: auto;
|
||||
right: 94.66666666666667px;
|
||||
}
|
||||
a[href^='http://']:after {
|
||||
font-family: FontAwesome;
|
||||
content: "\0020 \f08e";
|
||||
}
|
||||
a[href^='http://']:after:hover {
|
||||
text-decoration: none;
|
||||
right: 100.66666666666667px;
|
||||
}
|
||||
.hero-unit {
|
||||
margin-bottom: 20px;
|
||||
-webkit-border-radius: 20px;
|
||||
-moz-border-radius: 20px;
|
||||
border-radius: 20px;
|
||||
@ -4674,6 +4668,52 @@ a[href^='http://']:after:hover {
|
||||
text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.25);
|
||||
color: #333333;
|
||||
}
|
||||
#social-buttons {
|
||||
margin-bottom: 25px;
|
||||
text-align: center;
|
||||
}
|
||||
#social-buttons .btn {
|
||||
font-family: museo-slab, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
padding: 3px 10px 0;
|
||||
line-height: 21px;
|
||||
}
|
||||
#social-buttons .count.btn {
|
||||
font-family: proxima-nova, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
font-weight: normal;
|
||||
background-color: #ffffff;
|
||||
background-image: -moz-linear-gradient(top, #ffffff, #ffffff);
|
||||
background-image: -ms-linear-gradient(top, #ffffff, #ffffff);
|
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#ffffff));
|
||||
background-image: -webkit-linear-gradient(top, #ffffff, #ffffff);
|
||||
background-image: -o-linear-gradient(top, #ffffff, #ffffff);
|
||||
background-image: linear-gradient(top, #ffffff, #ffffff);
|
||||
background-repeat: repeat-x;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0);
|
||||
border-color: #ffffff #ffffff #d9d9d9;
|
||||
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
|
||||
*background-color: #ffffff;
|
||||
/* Darken IE7 buttons by default so they stand out more given they won't have borders */
|
||||
|
||||
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
|
||||
}
|
||||
#social-buttons .count.btn:hover,
|
||||
#social-buttons .count.btn:active,
|
||||
#social-buttons .count.btn.active,
|
||||
#social-buttons .count.btn.disabled,
|
||||
#social-buttons .count.btn[disabled] {
|
||||
background-color: #ffffff;
|
||||
*background-color: #f2f2f2;
|
||||
}
|
||||
#social-buttons .count.btn:active,
|
||||
#social-buttons .count.btn.active {
|
||||
background-color: #e6e6e6 \9;
|
||||
}
|
||||
#social-buttons .watch,
|
||||
#social-buttons .fork {
|
||||
margin-right: 30px;
|
||||
}
|
||||
.the-icons {
|
||||
list-style-type: none;
|
||||
margin-left: 0;
|
||||
@ -4846,6 +4886,10 @@ a[href^='http://']:after:hover {
|
||||
.modal .modal-body .icon1 > div.thumbnail > div i {
|
||||
font-size: 12px;
|
||||
}
|
||||
.label,
|
||||
.badge {
|
||||
background-color: #eeeeee;
|
||||
}
|
||||
footer {
|
||||
color: #555555;
|
||||
border-top: 1px solid #eeeeee;
|
||||
|
||||
@ -1,4 +1,34 @@
|
||||
$(function() {
|
||||
// start the icon carousel
|
||||
$('#iconCarousel').carousel({
|
||||
interval: 5000
|
||||
});
|
||||
|
||||
// make code pretty
|
||||
window.prettyPrint && prettyPrint();
|
||||
|
||||
// inject twitter & github counts
|
||||
$.ajax({
|
||||
url: 'http://api.twitter.com/1/users/show.json',
|
||||
data: {screen_name: 'fortaweso_me'},
|
||||
dataType: 'jsonp',
|
||||
success: function(data) {
|
||||
$('#followers').html(data.followers_count);
|
||||
}
|
||||
});
|
||||
$.ajax({
|
||||
url: 'http://github.com/api/v2/json/repos/show/FortAwesome/Font-Awesome',
|
||||
dataType: 'jsonp',
|
||||
success: function(data) {
|
||||
$('#watchers').html(data.repository.watchers);
|
||||
$('#forks').html(data.repository.forks);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
var firstInHistory = true;
|
||||
|
||||
var MainView = Backbone.View.extend({
|
||||
|
||||
@ -38,25 +38,26 @@ h1, h2, h3, h4, h5, h6 { font-family: @serifFontFamily; }
|
||||
border-width: 3px;
|
||||
font-size: 17px;
|
||||
line-height: 28px;
|
||||
left: @size / 3 + 3;
|
||||
left: @size / 3 + 9;
|
||||
&.right {
|
||||
left: auto;
|
||||
right: @size / 3 + 3;
|
||||
right: @size / 3 + 9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a[href^='http://'] {
|
||||
&:after {
|
||||
font-family: FontAwesome;
|
||||
content: "\0020 \f08e";
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
//a[href^='http://'] {
|
||||
// &:after {
|
||||
// font-family: FontAwesome;
|
||||
// content: "\0020 \f08e";
|
||||
// &:hover {
|
||||
// text-decoration: none;
|
||||
// }
|
||||
// }
|
||||
//}
|
||||
|
||||
.hero-unit {
|
||||
margin-bottom: 20px;
|
||||
.border-radius(20px);
|
||||
// #gradient > .radial( lighten(@red, 10%), @red);
|
||||
background-color: @red;
|
||||
@ -127,6 +128,27 @@ a[href^='http://'] {
|
||||
}
|
||||
}
|
||||
|
||||
#social-buttons {
|
||||
margin-bottom: 25px;
|
||||
text-align: center;
|
||||
.btn {
|
||||
font-family: @serifFontFamily;
|
||||
font-weight: bold;
|
||||
font-size: @baseFontSize;
|
||||
padding: 3px 10px 0;
|
||||
line-height: @baseLineHeight;
|
||||
}
|
||||
.count.btn {
|
||||
font-family: @sansFontFamily;
|
||||
font-weight: normal;
|
||||
.buttonBackground(@white, @white);
|
||||
}
|
||||
.watch, .fork {
|
||||
margin-right: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.the-icons {
|
||||
list-style-type: none;
|
||||
margin-left: 0;
|
||||
@ -258,6 +280,12 @@ a[href^='http://'] {
|
||||
}
|
||||
}
|
||||
|
||||
.label,
|
||||
.badge {
|
||||
background-color: @grayLighter;
|
||||
}
|
||||
|
||||
|
||||
footer {
|
||||
color: @gray;
|
||||
border-top: 1px solid @grayLighter;
|
||||
|
||||
@ -58,9 +58,9 @@
|
||||
<div class="active item"><div><i class="icon-flag"></i></div></div>
|
||||
<div class="item"><div><i class="icon-magic"></i></div></div>
|
||||
<div class="item"><div><i class="icon-beaker"></i></div></div>
|
||||
<div class="item"><div><i class="icon-briefcase"></i></div></div>
|
||||
<div class="item"><div><i class="icon-bullhorn"></i></div></div>
|
||||
<div class="item"><div><i class="icon-umbrella"></i></div></div>
|
||||
<div class="item"><div><i class="icon-cut"></i></div></div>
|
||||
<div class="item"><div><i class="icon-star-empty"></i></div></div>
|
||||
<div class="item"><div><i class="icon-envelope"></i></div></div>
|
||||
<div class="item"><div><i class="icon-leaf"></i></div></div>
|
||||
@ -85,38 +85,53 @@
|
||||
<p>The iconic font designed for use with Twitter Bootstrap</p>
|
||||
<div class="actions">
|
||||
<a class="btn btn-primary btn-large" href="https://github.com/FortAwesome/Font-Awesome/zipball/master"><i class="icon-download"></i>Download Font<br>Awesome v2.0</a>
|
||||
<a class="btn btn-large btn-github" href="https://github.com/FortAwesome/Font-Awesome"><i class="icon-github"></i>View Project<br>on GitHub</a>
|
||||
<a class="btn btn-large btn-github" href="https://github.com/FortAwesome/Font-Awesome" target="_blank"><i class="icon-github"></i>View Project<br>on GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section id="social-buttons">
|
||||
<span class="watch">
|
||||
<a class="btn" href="https://github.com/FortAwesome/Font-Awesome" target="_blank"><i class="icon-github"></i> Watch</a>
|
||||
<a id="watchers" class="count btn" href="https://github.com/FortAwesome/Font-Awesome">3900+</a>
|
||||
</span>
|
||||
<span class="fork">
|
||||
<a class="btn" href="https://github.com/FortAwesome/Font-Awesome" target="_blank"><i class="icon-github"></i> Fork</a>
|
||||
<a id="forks" class="count btn" href="#">200+</a>
|
||||
</span>
|
||||
<span class="follow">
|
||||
<a class="btn" href="http://twitter.com/fortaweso_me/" target="_blank"><i class="icon-twitter"></i> Follow @fortaweso_me</a>
|
||||
<span class="arrow-right"></span><span id="followers" class="count btn">1000+</span>
|
||||
</span>
|
||||
</section>
|
||||
|
||||
<section id="why">
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<h3><i class="icon-bullhorn icon-large"></i> 70 New Icons in v2.0</h3>
|
||||
<h3><i class="icon-bullhorn icon-large"></i> Desktop Font + Vectors</h3>
|
||||
The full desktop font and a pdf of vectors are now included. Happy designing.
|
||||
</div>
|
||||
<div class="span4">
|
||||
<h3><i class="icon-beaker icon-large"></i> 70 New Icons in v2.0</h3>
|
||||
All requested by our active community on the <a href="https://github.com/FortAwesome/Font-Awesome" target="_blank">Font Awesome GitHub project</a>.
|
||||
</div>
|
||||
<div class="span4">
|
||||
<h3><i class="icon-ok icon-large"></i> IE7 Support</h3>
|
||||
Font Awesome v2.0 now even supports IE7. If you need it, you have my condolences.
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<h3><i class="icon-flag icon-large"></i> One font, 220 icons</h3>
|
||||
In a single collection, Font Awesome is a pictographic language of web-related actions.
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="span4">
|
||||
<h3><i class="icon-gift icon-large"></i> Free for commercial use</h3>
|
||||
The Font Awesome webfont and CSS libraries are completely free for commercial use.
|
||||
</div>
|
||||
<div class="span4">
|
||||
<h3><i class="icon-pencil icon-large"></i> CSS control</h3>
|
||||
Easily style icon color, size, shadow, and anything that's possible with CSS.
|
||||
</div>
|
||||
<div class="span4">
|
||||
<h3><i class="icon-resize-full icon-large"></i> Infinite scalability</h3>
|
||||
Scalable vector graphics means icons look awesome at any size.
|
||||
<h3><i class="icon-search icon-large"></i> Screen reader compatible</h3>
|
||||
Font Awesome won't trip up screen readers, unlike most icon fonts.
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
@ -125,12 +140,12 @@
|
||||
Designed from scratch to be fully backwards compatible with <a href="http://twitter.github.com/bootstrap/" target="_blank">Twitter Bootstrap 2.0</a>.
|
||||
</div>
|
||||
<div class="span4">
|
||||
<h3><i class="icon-search icon-large"></i> Screen reader compatible</h3>
|
||||
Font Awesome won't trip up screen readers, unlike most icon fonts.
|
||||
<h3><i class="icon-pencil icon-large"></i> CSS control</h3>
|
||||
Easily style icon color, size, shadow, and anything that's possible with CSS.
|
||||
</div>
|
||||
<div class="span4">
|
||||
<h3><i class="icon-twitter icon-large"></i> Follow on Twitter</h3>
|
||||
Follow <a href="http://twitter.com/fortaweso_me/" target="_blank">@fortaweso_me</a> on Twitter for icon updates and styling tricks.
|
||||
<h3><i class="icon-resize-full icon-large"></i> Infinite scalability</h3>
|
||||
Scalable vector graphics means icons look awesome at any size.
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -1048,21 +1063,5 @@
|
||||
<script src="assets/js/tw-bs-201/bootstrap-typeahead.js"></script>
|
||||
<script src="assets/js/index/index.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
$(function(){
|
||||
$('#iconCarousel').carousel({
|
||||
interval: 5000
|
||||
});
|
||||
|
||||
// tooltips
|
||||
$('#why').tooltip({
|
||||
selector: "a[rel=tooltip]",
|
||||
placement: 'bottom'
|
||||
})
|
||||
|
||||
// make code pretty
|
||||
window.prettyPrint && prettyPrint();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user