mirror of
https://github.com/FortAwesome/Font-Awesome.git
synced 2024-12-28 22:41:28 +08:00
381 lines
20 KiB
HTML
381 lines
20 KiB
HTML
<!DOCTYPE html>
|
|
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
|
|
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
|
|
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
|
|
<!--[if (gte IE 9)|!(IE)]><!-->
|
|
<html lang="en" xmlns="http://www.w3.org/1999/html"> <!--<![endif]-->
|
|
<head>
|
|
<!-- Basic Page Needs
|
|
================================================== -->
|
|
<meta charset="utf-8" />
|
|
<title>What's New</title>
|
|
<meta name="description" content="Font Awesome, the iconic font designed for use with Bootstrap">
|
|
<meta name="author" content="Dave Gandy">
|
|
<meta name="viewport" content="initial-scale=1; maximum-scale=1">
|
|
|
|
<!--[if lt IE 9]>
|
|
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
|
|
<![endif]-->
|
|
|
|
<!-- CSS
|
|
================================================== -->
|
|
|
|
<link rel="stylesheet" href="../assets/css/site.css">
|
|
<link rel="stylesheet" href="../assets/css/pygments.css">
|
|
<link rel="stylesheet" href="../assets/font-awesome/css/font-awesome.min.css">
|
|
<!--[if IE 7]>
|
|
<link rel="stylesheet" href="../assets/font-awesome/css/font-awesome-ie7.min.css">
|
|
<![endif]-->
|
|
<!-- Le fav and touch icons -->
|
|
<link rel="shortcut icon" href="../assets/ico/favicon.ico">
|
|
|
|
<script type="text/javascript" src="//use.typekit.net/wnc7ioh.js"></script>
|
|
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
|
|
|
|
<script type="text/javascript">
|
|
var _gaq = _gaq || [];
|
|
_gaq.push(['_setAccount', 'UA-30136587-1']);
|
|
_gaq.push(['_trackPageview']);
|
|
|
|
(function() {
|
|
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
|
|
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
|
|
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
|
|
})();
|
|
</script>
|
|
</head>
|
|
<body data-spy="scroll" data-target=".navbar">
|
|
<div class="wrapper"> <!-- necessary for sticky footer. wrap all content except footer -->
|
|
<div class="navbar navbar-inverse navbar-static-top hidden-print">
|
|
<div class="navbar-inner">
|
|
<div class="container">
|
|
<a class="brand" href="../"><i class="icon-flag"></i> Font Awesome</a>
|
|
<ul class="nav">
|
|
<li><a href="../">Home</a></li>
|
|
<li><a href="../get-started/">Get Started</a></li>
|
|
<li class="dropdown-split-left"><a href="../icons/">Icons</a></li>
|
|
<li class="dropdown dropdown-split-right">
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
|
|
<i class="icon-caret-down"></i>
|
|
</a>
|
|
<ul class="dropdown-menu pull-right">
|
|
<li><a href="../icons/"><i class="icon-flag icon-fixed-width"></i> Icons</a></li>
|
|
<li class="divider"></li>
|
|
<li><a href="../icons/#new"><i class="icon-shield icon-fixed-width"></i> New Icons in 3.1.0</a></li>
|
|
<li><a href="../icons/#web-application"><i class="icon-camera-retro icon-fixed-width"></i> Web Application Icons</a></li>
|
|
<li><a href="../icons/#text-editor"><i class="icon-file-alt icon-fixed-width"></i> Text Editor Icons</a></li>
|
|
<li><a href="../icons/#directional"><i class="icon-hand-right icon-fixed-width"></i> Directional Icons</a></li>
|
|
<li><a href="../icons/#video-player"><i class="icon-play-sign icon-fixed-width"></i> Video Player Icons</a></li>
|
|
<li><a href="../icons/#brand"><i class="icon-github icon-fixed-width"></i> Brand Icons</a></li>
|
|
<li><a href="../icons/#medical"><i class="icon-medkit icon-fixed-width"></i> Medical Icons</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="dropdown-split-left"><a href="../examples/">Examples</a></li>
|
|
<li class="dropdown dropdown-split-right">
|
|
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
|
|
<i class="icon-caret-down"></i>
|
|
</a>
|
|
<ul class="dropdown-menu pull-right">
|
|
<li><a href="../examples/">Examples</a></li>
|
|
<li class="divider"></li>
|
|
<li><a href="../examples/#new-styles">New Styles</a></li>
|
|
<li><a href="../examples/#inline-icons">Inline Icons</a></li>
|
|
<li><a href="../examples/#larger-icons">Larger Icons</a></li>
|
|
<li><a href="../examples/#bordered-pulled">Bordered & Pulled</a></li>
|
|
<li><a href="../examples/#buttons">Buttons</a></li>
|
|
<li><a href="../examples/#button-groups">Button Groups</a></li>
|
|
<li><a href="../examples/#button-dropdowns">Button Dropdowns</a></li>
|
|
<li><a href="../examples/#bulleted-lists">Bulleted Lists</a></li>
|
|
<li><a href="../examples/#navigation">Navigation</a></li>
|
|
<li><a href="../examples/#form-inputs">Form Inputs</a></li>
|
|
<li><a href="../examples/#animated-spinner">Animated Spinner</a></li>
|
|
<li><a href="../examples/#rotated-flipped">Rotated & Flipped</a></li>
|
|
<li><a href="../examples/#stacked">Stacked</a></li>
|
|
<li><a href="../examples/#custom">Custom CSS</a></li>
|
|
</ul>
|
|
</li>
|
|
<li class="active"><a href="../whats-new/">What's New</a></li>
|
|
<li><a href="../community/">Community</a></li>
|
|
<li><a href="../license/">License</a></li>
|
|
</ul>
|
|
<ul class="nav pull-right">
|
|
<li><a href="mailto:dave@fontawesome.io"><i class="icon-envelope"></i> Me</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="jumbotron jumbotron-ad hidden-print">
|
|
<div class="container">
|
|
<h1><i class="icon-lightbulb icon-large"></i> What's New</h1>
|
|
<p>What's New in the latest version — Font Awesome 3.1.0</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="social-buttons" class="hidden-print">
|
|
<div class="container">
|
|
<ul class="unstyled inline">
|
|
<li>
|
|
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=FortAwesome&repo=Font-Awesome&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
|
|
</li>
|
|
<li>
|
|
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=FortAwesome&repo=Font-Awesome&type=fork&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="102px" height="20px"></iframe>
|
|
</li>
|
|
<li class="follow-btn">
|
|
<a href="https://twitter.com/fortaweso_me" class="twitter-follow-button" data-link-color="#0069D6" data-show-count="true">Follow @fortaweso_me</a>
|
|
</li>
|
|
<li class="tweet-btn">
|
|
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://fontawesome.io" data-text="#FontAwesome, the iconic font designed for Bootstrap" data-counturl="http://fortawesome.github.com/Font-Awesome/" data-count="horizontal" data-via="fortaweso_me" data-related="byscuits:Creator of Font Awesome">Tweet</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<!--<div class="watch">-->
|
|
<!--<a class="btn btn-mini" href="https://github.com/FortAwesome/Font-Awesome" target="_blank"><i class="icon-github icon-large"></i> Watch</a>-->
|
|
<!--<a id="watchers" class="count btn btn-mini" href="https://github.com/FortAwesome/Font-Awesome">9000+</a>-->
|
|
<!--</div>-->
|
|
<!--<div class="fork">-->
|
|
<!--<a class="btn btn-mini" href="https://github.com/FortAwesome/Font-Awesome" target="_blank"><i class="icon-github icon-large"></i> Fork</a>-->
|
|
<!--<a id="forks" class="count btn btn-mini" href="#">800+</a>-->
|
|
<!--</div>-->
|
|
<!--<div class="follow">-->
|
|
<!--<a class="btn btn-mini" href="http://twitter.com/fortaweso_me/" target="_blank"><i class="icon-twitter icon-large"></i> Follow @fortaweso_me</a>-->
|
|
<!--<span id="followers" class="count btn btn-mini">2500+</span>-->
|
|
<!--</div>-->
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="container">
|
|
|
|
<section class="hidden-print">
|
|
<div class="row stripe-ad">
|
|
<div class="span8">
|
|
|
|
<p class="lead">
|
|
Font Awesome is always getting a little awesome-er. So here's what's new in the latest version, Font Awesome
|
|
3.1.0. Have some ideas for new features?
|
|
<a href="../community/">Help contribute</a>.
|
|
</p>
|
|
|
|
</div>
|
|
<div class="span4">
|
|
<div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/32291/azcarbon_2_1_0_HORIZ"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
|
|
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
|
|
<div id="whats-new">
|
|
<div class="row">
|
|
<div class="span4">
|
|
<h4><i class="icon-lightbulb"></i> 54 New Icons in 3.1.0</h4>
|
|
Requested by the active community on the <a href="https://github.com/FortAwesome/Font-Awesome">Font Awesome GitHub project</a>.
|
|
</div>
|
|
<div class="span4">
|
|
<h4><i class="icon-legal"></i> <a href="../license/">Better & Simpler License</a></h4>
|
|
SIL OFL 1.1 for font, MIT license for code. No more attribution required, but much appreciated.
|
|
</div>
|
|
<div class="span4">
|
|
<h4><i class="icon-flag icon-flip-horizontal"></i> <a href="../examples/#new-styles">New Styles</a></h4>
|
|
New styles for
|
|
<a href="../examples/#rotated-flipped">rotating and flipping icons</a>,
|
|
<a href="../examples/#stacked">stacking icons</a>, and better
|
|
<a href="../examples/#bulleted-lists">bulleted lists</a>.
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="span4 margin-bottom-large">
|
|
<h4><i class="icon-magic"></i> Pixel Perfection at 14px</h4>
|
|
Version 3.0 was re-created from the ground up to be razor sharp at Bootstrap's default 14px.
|
|
</div>
|
|
<div class="span4">
|
|
<h4><i class="icon-th-large"></i> <a href="http://icnfnt.com/">Font Subsetting</a></h4>
|
|
Thanks to <a href="https://twitter.com/grantgordon">@grantgordon</a> and <a href="https://twitter.com/johnsmclay">@johnsmclay</a>, you can <a href="http://icnfnt.com/">subset</a> to get just the icons you need.
|
|
</div>
|
|
<div class="span4">
|
|
<h4><i class="icon-question-sign"></i> Want More Details?</h4>
|
|
Check out the <a href="https://github.com/FortAwesome/Font-Awesome#changelog">CHANGELOG on the GitHub project</a> to see
|
|
what's new and changed.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<section id="new-styles">
|
|
<h2 class="page-header">New Styles in 3.1.0</h2>
|
|
<div class="row">
|
|
<div class="span4">
|
|
<h4><a href="#rotated-flipped">Rotated and Flipped Icons</a></h4>
|
|
<div class="well well-transparent">
|
|
<i class="icon-shield"></i> normal<br>
|
|
<i class="icon-shield icon-rotate-90"></i> icon-rotate-90<br>
|
|
<i class="icon-shield icon-rotate-180"></i> icon-rotate-180<br>
|
|
<i class="icon-shield icon-rotate-270"></i> icon-rotate-270<br>
|
|
<i class="icon-shield icon-flip-horizontal"></i> icon-flip-horizontal<br>
|
|
<i class="icon-shield icon-flip-vertical"></i> icon-flip-vertical
|
|
</div>
|
|
</div>
|
|
<div class="span4">
|
|
<h4><a href="#stacked">Stacked Icons</a></h4>
|
|
<div class="well well-transparent">
|
|
<span class="icon-stack">
|
|
<i class="icon-check-empty icon-stack-base"></i>
|
|
<i class="icon-twitter"></i>
|
|
</span>
|
|
icon-twitter on icon-check-empty<br>
|
|
<span class="icon-stack">
|
|
<i class="icon-circle icon-stack-base"></i>
|
|
<i class="icon-flag icon-light"></i>
|
|
</span>
|
|
icon-flag on icon-circle<br>
|
|
<span class="icon-stack">
|
|
<i class="icon-sign-blank icon-stack-base"></i>
|
|
<i class="icon-terminal icon-light"></i>
|
|
</span>
|
|
icon-terminal on icon-sign-blank
|
|
</div>
|
|
</div>
|
|
<div class="span4">
|
|
<h4><a href="#bulleted-lists">Better Bulleted Lists</a></h4>
|
|
<div class="well well-transparent">
|
|
<ul class="icons-ul">
|
|
<li><i class="icon-li icon-chevron-sign-right"></i>New bulleted lists</li>
|
|
<li><i class="icon-li icon-bullseye"></i>Fix some old bugs</li>
|
|
<li><i class="icon-li icon-play-sign"></i>And deal with arbitrary</li>
|
|
<li><i class="icon-li icon-ok-sign"></i>Font sizes better</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="new">
|
|
<h2 class="page-header">New Icons in 3.1.0</h2>
|
|
|
|
<div class="margin-botom-large">
|
|
You asked, Font Awesome delivers with 54 shiny new icons in version 3.1.0.
|
|
Want to request new icons? <a href="../community/#requesting-new-icons">Here's how</a>.
|
|
</div>
|
|
|
|
|
|
|
|
<div class="row margin-top">
|
|
<div class="span3">
|
|
<ul class="the-icons">
|
|
<li><a href="../icon/expand-alt"><i class="icon-expand-alt"></i> icon-expand-alt</a></li>
|
|
<li><a href="../icon/collapse-alt"><i class="icon-collapse-alt"></i> icon-collapse-alt</a></li>
|
|
<li><a href="../icon/smile"><i class="icon-smile"></i> icon-smile</a></li>
|
|
<li><a href="../icon/frown"><i class="icon-frown"></i> icon-frown</a></li>
|
|
<li><a href="../icon/meh"><i class="icon-meh"></i> icon-meh</a></li>
|
|
<li><a href="../icon/gamepad"><i class="icon-gamepad"></i> icon-gamepad</a></li>
|
|
<li><a href="../icon/keyboard"><i class="icon-keyboard"></i> icon-keyboard</a></li>
|
|
<li><a href="../icon/flag-alt"><i class="icon-flag-alt"></i> icon-flag-alt</a></li>
|
|
<li><a href="../icon/flag-checkered"><i class="icon-flag-checkered"></i> icon-flag-checkered</a></li>
|
|
<li><a href="../icon/terminal"><i class="icon-terminal"></i> icon-terminal</a></li>
|
|
<li><a href="../icon/code"><i class="icon-code"></i> icon-code</a></li>
|
|
<li><a href="../icon/share-alt"><i class="icon-mail-forward"></i> icon-mail-forward <span class="muted">(alias)</span></a></li>
|
|
<li><a href="../icon/reply"><i class="icon-mail-reply"></i> icon-mail-reply <span class="muted">(alias)</span></a></li>
|
|
<li><a href="../icon/reply-all"><i class="icon-reply-all"></i> icon-reply-all</a></li>
|
|
<li><a href="../icon/reply-all"><i class="icon-mail-reply-all"></i> icon-mail-reply-all <span class="muted">(alias)</span></a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="span3">
|
|
<ul class="the-icons">
|
|
<li><a href="../icon/star-half-empty"><i class="icon-star-half-empty"></i> icon-star-half-empty</a></li>
|
|
<li><a href="../icon/location-arrow"><i class="icon-location-arrow"></i> icon-location-arrow</a></li>
|
|
<li><a href="../icon/undo"><i class="icon-rotate-left"></i> icon-rotate-left <span class="muted">(alias)</span></a></li>
|
|
<li><a href="../icon/repeat"><i class="icon-rotate-right"></i> icon-rotate-right <span class="muted">(alias)</span></a></li>
|
|
<li><a href="../icon/crop"><i class="icon-crop"></i> icon-crop</a></li>
|
|
<li><a href="../icon/code-fork"><i class="icon-code-fork"></i> icon-code-fork</a></li>
|
|
<li><a href="../icon/unlink"><i class="icon-unlink"></i> icon-unlink</a></li>
|
|
<li><a href="../icon/question"><i class="icon-question"></i> icon-question</a></li>
|
|
<li><a href="../icon/info"><i class="icon-info"></i> icon-info</a></li>
|
|
<li><a href="../icon/exclamation"><i class="icon-exclamation"></i> icon-exclamation</a></li>
|
|
<li><a href="../icon/superscript"><i class="icon-superscript"></i> icon-superscript</a></li>
|
|
<li><a href="../icon/subscript"><i class="icon-subscript"></i> icon-subscript</a></li>
|
|
<li><a href="../icon/eraser"><i class="icon-eraser"></i> icon-eraser</a></li>
|
|
<li><a href="../icon/puzzle-piece"><i class="icon-puzzle-piece"></i> icon-puzzle-piece</a></li>
|
|
<li><a href="../icon/microphone"><i class="icon-microphone"></i> icon-microphone</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="span3">
|
|
<ul class="the-icons">
|
|
<li><a href="../icon/microphone-off"><i class="icon-microphone-off"></i> icon-microphone-off</a></li>
|
|
<li><a href="../icon/shield"><i class="icon-shield"></i> icon-shield</a></li>
|
|
<li><a href="../icon/calendar-empty"><i class="icon-calendar-empty"></i> icon-calendar-empty</a></li>
|
|
<li><a href="../icon/fire-extinguisher"><i class="icon-fire-extinguisher"></i> icon-fire-extinguisher</a></li>
|
|
<li><a href="../icon/rocket"><i class="icon-rocket"></i> icon-rocket</a></li>
|
|
<li><a href="../icon/maxcdn"><i class="icon-maxcdn"></i> icon-maxcdn</a></li>
|
|
<li><a href="../icon/chevron-sign-left"><i class="icon-chevron-sign-left"></i> icon-chevron-sign-left</a></li>
|
|
<li><a href="../icon/chevron-sign-right"><i class="icon-chevron-sign-right"></i> icon-chevron-sign-right</a></li>
|
|
<li><a href="../icon/chevron-sign-up"><i class="icon-chevron-sign-up"></i> icon-chevron-sign-up</a></li>
|
|
<li><a href="../icon/chevron-sign-down"><i class="icon-chevron-sign-down"></i> icon-chevron-sign-down</a></li>
|
|
<li><a href="../icon/html5"><i class="icon-html5"></i> icon-html5</a></li>
|
|
<li><a href="../icon/css3"><i class="icon-css3"></i> icon-css3</a></li>
|
|
<li><a href="../icon/anchor"><i class="icon-anchor"></i> icon-anchor</a></li>
|
|
<li><a href="../icon/unlock-alt"><i class="icon-unlock-alt"></i> icon-unlock-alt</a></li>
|
|
</ul>
|
|
</div>
|
|
<div class="span3">
|
|
<ul class="the-icons">
|
|
<li><a href="../icon/bullseye"><i class="icon-bullseye"></i> icon-bullseye</a></li>
|
|
<li><a href="../icon/ellipsis-horizontal"><i class="icon-ellipsis-horizontal"></i> icon-ellipsis-horizontal</a></li>
|
|
<li><a href="../icon/ellipsis-vertical"><i class="icon-ellipsis-vertical"></i> icon-ellipsis-vertical</a></li>
|
|
<li><a href="../icon/rss-sign"><i class="icon-rss-sign"></i> icon-rss-sign</a></li>
|
|
<li><a href="../icon/play-sign"><i class="icon-play-sign"></i> icon-play-sign</a></li>
|
|
<li><a href="../icon/ticket"><i class="icon-ticket"></i> icon-ticket</a></li>
|
|
<li><a href="../icon/minus-sign-alt"><i class="icon-minus-sign-alt"></i> icon-minus-sign-alt</a></li>
|
|
<li><a href="../icon/check-minus"><i class="icon-check-minus"></i> icon-check-minus</a></li>
|
|
<li><a href="../icon/level-up"><i class="icon-level-up"></i> icon-level-up</a></li>
|
|
<li><a href="../icon/level-down"><i class="icon-level-down"></i> icon-level-down</a></li>
|
|
<li><a href="../icon/check-sign"><i class="icon-check-sign"></i> icon-check-sign</a></li>
|
|
<li><a href="../icon/edit-sign"><i class="icon-edit-sign"></i> icon-edit-sign</a></li>
|
|
<li><a href="../icon/external-link-sign"><i class="icon-external-link-sign"></i> icon-external-link-sign</a></li>
|
|
<li><a href="../icon/share-sign"><i class="icon-share-sign"></i> icon-share-sign</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</div>
|
|
|
|
<div class="push"><!-- necessary for sticky footer --></div>
|
|
</div>
|
|
<footer class="footer hidden-print">
|
|
<div class="container text-center">
|
|
<div>
|
|
<i class="icon-flag"></i> Font Awesome 3.1.0 ·
|
|
Created and Maintained by Dave Gandy ·
|
|
<a href="http://twitter.com/byscuits">@byscuits</a>
|
|
</div>
|
|
<div>
|
|
Font Awesome font licensed under <a href="http://scripts.sil.org/OFL">SIL OFL 1.1</a> ·
|
|
Code licensed under <a href="http://opensource.org/licenses/mit-license.html">MIT License</a> ·
|
|
Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>
|
|
</div>
|
|
<div>
|
|
Thanks to <a href="http://maxcdn.com"><i class="icon-maxcdn"></i> MaxCDN</a> for providing the excellent <a href="http://www.bootstrapcdn.com/#tab_fontawesome">BootstrapCDN for Font Awesome</a>
|
|
</div>
|
|
<div class="project">
|
|
<a href="https://github.com/FortAwesome/Font-Awesome">GitHub Project</a> ·
|
|
<a href="https://github.com/FortAwesome/Font-Awesome/issues">Issues</a>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
|
|
<script src="http://platform.twitter.com/widgets.js"></script>
|
|
<script src="../assets/js/jquery-1.7.1.min.js"></script>
|
|
<script src="../assets/js/underscore.min.js"></script>
|
|
<script src="../assets/js/backbone.min.js"></script>
|
|
<!--<script src="../assets/js/prettify.min.js"></script>-->
|
|
<script src="../assets/js/bootstrap-2.3.1.min.js"></script>
|
|
<script src="../assets/js/site.js"></script>
|
|
|
|
</body>
|
|
</html>
|