Fork-Awesome/whats-new/index.html
2016-04-11 14:10:07 -04:00

392 lines
22 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<!-- Basic Page Needs
================================================== -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="Font Awesome, the iconic font and CSS framework">
<meta name="author" content="Dave Gandy">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="shortcut icon" href="../assets/ico/favicon.ico">
<title>What's New</title>
<!-- 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.css">
<!--[if lt IE 9]>
<script src="../assets/js/html5shiv.js"></script>
<script src="../assets/js/respond.min.js"></script>
<![endif]-->
<script src="https://use.fonticons.com/ffe176a3.js"></script>
<script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-30136587-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script');
ga.src = 'https://www.google-analytics.com/ga.js';
var s = document.scripts[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
</head>
<body>
<script>
(function(){
var bsa = document.createElement('script');
bsa.src = 'https://s3.buysellads.com/ac/bsa.js';
var s = document.scripts[0];
s.parentNode.insertBefore(bsa, s);
})();
</script>
<div id="wrap"> <!-- necessary for sticky footer. wrap all content except footer -->
<div class="collapse hidden-print" id="banner">
<div class="container">
<div class="message-container">
<div class="tagline">
<span id="rotating-message"></span>
</div>
<div class="action">
<a id="rotating-url" class="btn btn-primary btn-block" href=""></a>
</div>
</div>
</div>
</div>
<div class="navbar navbar-org navbar-static-top">
<div class="container">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="http://fortawesome.com/?utm_source=font_awesome_navbar&utm_medium=display&utm_content=ad_1_next_level&utm_campaign=promo_5.0_update" data-toggle="tooltip" data-container="body" data-placement="bottom" data-html="true" title="Take your front end game<br>to the next level!">
<i class="fas fas-fort-logo fas-lg valign-baseline"></i>&nbsp;
Fort Awesome
</a>
</li>
<li class="active">
<a href="http://fontawesome.io/?utm_source=font_awesome_navbar&utm_medium=display&utm_content=font_awesome_navbar&utm_campaign=promo_5.0_update" data-toggle="tooltip" data-container="body" data-placement="bottom" data-html="true" title="The iconic font<br>&amp; CSS toolkit">
<i class="fas fas-flag-logo"></i>&nbsp;
Font Awesome</a>
</li>
</ul>
<div class="navbar-text navbar-right hide-xs">Build and serve a faster front end!</div>
</div>
</div>
<div class="navbar navbar-inverse navbar-static-top hidden-print">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<i class="fa fa-bars fa-lg" aria-hidden="true" title="Toggle navigation"></i>
<span class="sr-only">Toggle navigation</span>
</button>
<a class="navbar-brand" href="../"><i class="fas fas-flag-logo fas-lg" aria-hidden="true"></i> Font Awesome</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="hidden-sm "><a href="../">Home</a></li>
<li class="hidden-sm active">
<a href="../whats-new/">What's New</a>
</li>
<li class="hidden-xs hidden-md hidden-lg active">
<a href="../whats-new/">New</a>
</li>
<li class="hidden-sm"><a href="../get-started/">Get Started</a></li>
<li class="hidden-xs hidden-md hidden-lg">
<a href="../get-started/">Start</a>
</li>
<li class="dropdown-split-left"><a href="../icons/">Icons</a></li>
<li class="dropdown dropdown-split-right hidden-xs">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-caret-down" aria-hidden="true" title="Toggle dropdown menu"></i>
<span class="sr-only">Toggle dropdown menu</span>
<span class="toggle drop down"></span>
</a>
<ul class="dropdown-menu pull-right">
<li><a href="../icons/"><i class="fa fa-flag fa-fw" aria-hidden="true"></i>&nbsp; All Icons</a></li>
<li class="divider"></li>
<li><a href="../icons/#new"><i class="fa fa-wheelchair-alt fa-fw" aria-hidden="true"></i>&nbsp; New Icons in 4.6</a></li>
<li><a href="../icons/#web-application"><i class="fa fa-camera-retro fa-fw" aria-hidden="true"></i>&nbsp; Web Application Icons</a></li>
<li><a href="../icons/#accessibility"><i class="fa fa-universal-access fa-fw" aria-hidden="true"></i>&nbsp; Accessibility Icons</a></li>
<li><a href="../icons/#hand"><i class="fa fa-hand-spock-o fa-fw" aria-hidden="true"></i>&nbsp; Hand Icons</a></li>
<li><a href="../icons/#transportation"><i class="fa fa-ship fa-fw" aria-hidden="true"></i>&nbsp; Transportation Icons</a></li>
<li><a href="../icons/#gender"><i class="fa fa-venus fa-fw" aria-hidden="true"></i>&nbsp; Gender Icons</a></li>
<li><a href="../icons/#file-type"><i class="fa fa-file-image-o fa-fw" aria-hidden="true"></i>&nbsp; File Type Icons</a></li>
<li><a href="../icons/#spinner"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i>&nbsp; Spinner Icons</a></li>
<li><a href="../icons/#form-control"><i class="fa fa-check-square fa-fw" aria-hidden="true"></i>&nbsp; Form Control Icons</a></li>
<li><a href="../icons/#payment"><i class="fa fa-credit-card fa-fw" aria-hidden="true"></i>&nbsp; Payment Icons</a></li>
<li><a href="../icons/#chart"><i class="fa fa-pie-chart fa-fw" aria-hidden="true"></i>&nbsp; Chart Icons</a></li>
<li><a href="../icons/#currency"><i class="fa fa-won fa-fw" aria-hidden="true"></i>&nbsp; Currency Icons</a></li>
<li><a href="../icons/#text-editor"><i class="fa fa-file-text-o fa-fw" aria-hidden="true"></i>&nbsp; Text Editor Icons</a></li>
<li><a href="../icons/#directional"><i class="fa fa-arrow-right fa-fw" aria-hidden="true"></i>&nbsp; Directional Icons</a></li>
<li><a href="../icons/#video-player"><i class="fa fa-play-circle fa-fw" aria-hidden="true"></i>&nbsp; Video Player Icons</a></li>
<li><a href="../icons/#brand"><i class="fa fa-facebook-official fa-fw" aria-hidden="true"></i>&nbsp; Brand Icons</a></li>
<li><a href="../icons/#medical"><i class="fa fa-medkit fa-fw" aria-hidden="true"></i>&nbsp; Medical Icons</a></li>
</ul>
</li>
<li class="dropdown-split-left"><a href="../examples/">Examples</a></li>
<li class="dropdown dropdown-split-right hidden-xs">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-caret-down" aria-hidden="true" title="Toggle dropdown menu"></i>
<span class="sr-only">Toggle dropdown menu</span>
<span class="toggle drop down"></span>
</a>
<ul class="dropdown-menu pull-right">
<li><a href="../examples/">Examples</a></li>
<li class="divider"></li>
<li><a href="../examples/#basic">Basic Icons</a></li>
<li><a href="../examples/#larger">Larger Icons</a></li>
<li><a href="../examples/#fixed-width">Fixed Width Icons</a></li>
<li><a href="../examples/#list">List Icons</a></li>
<li><a href="../examples/#bordered-pulled">Bordered & Pulled Icons</a></li>
<li><a href="../examples/#animated">Animated Icons</a></li>
<li><a href="../examples/#accessible">Accessibility-Minded</a></li>
<li><a href="../examples/#rotated-flipped">Rotated &amp; Flipped Icons</a></li>
<li><a href="../examples/#stacked">Stacked Icons</a></li>
<li><a href="../examples/#bootstrap">Bootstrap 3 Examples</a></li>
<li><a href="../examples/#custom">Custom CSS</a></li>
</ul>
</li>
<li><a href="../accessibility/">Accessibility</a></li>
<li><a href="../community/">Community</a></li>
<li><a href="../license/">License</a></li>
</ul>
</div>
</div>
</div>
<div class="jumbotron jumbotron-ad hidden-print">
<div class="container">
<h1><i class="fa fa-lightbulb-o" aria-hidden="true"></i>&nbsp; What's New</h1>
<p>What's New in the latest version &mdash; Font Awesome 4.6</p>
</div>
</div>
<div id="social-buttons" class="hidden-print">
<div class="container">
<form id="newsletter" method="post" action="https://formkeep.com/f/ba101f5b69f0">
<div class="row">
<div class="col-md-4 col-md-offset-2 col-sm-6">
<div class="form-group margin-bottom">
<input name="email" type="email" class="form-control" id="email" placeholder="Enter your email address&hellip;" required>
</div>
</div>
<div class="col-md-4 col-sm-6">
<button type="submit" class="btn btn-success btn-block margin-bottom-lg"
data-toggle="popover" data-trigger="hover" data-placement="top" title="Stay up to date with the Awesome"
data-content="We'll send you updates on new Font Awesome releases, icons, and other stuff that we're working on. We won't spam you. Scout's honor.">
Subscribe to Font Awesome Updates&nbsp;&nbsp;<i class="fa fa-envelope" aria-hidden="true"></i>
</button>
</div>
</div>
</form>
<ul class="list-inline">
<li>
<iframe class="github-btn" src="https://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="https://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/fontawesome" class="twitter-follow-button" data-link-color="#0069D6" data-show-count="true">Follow @fontawesome</a>
</li>
<li class="tweet-btn hidden-phone">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://fontawesome.io" data-text="Font Awesome, the iconic font and CSS framework" data-counturl="http://fortawesome.github.com/Font-Awesome/" data-count="horizontal" data-via="fontawesome" data-related="davegandy:Creator of Font Awesome">Tweet</a>
</li>
</ul>
</div>
</div>
<div class="container">
<section class="hidden-print">
<div class="stripe-ad">
<script src="https://cdn.fusionads.net/fusion.js?zoneid=1332&amp;serve=C6SDP2Y&amp;placement=fontawesome" id="_fusionads_js"></script>
<p class="lead">
Font Awesome is always getting a little awesome-er. So here's what's new in the latest version, Font Awesome
4.6. Have some ideas for new features?
<a href="../community/">Help contribute</a>.
</p>
</div>
</section>
<div class="row feature-list">
<div class="col-md-4 col-sm-6">
<h4><i class="fa fa-universal-access" aria-hidden="true"></i> <a href="../accessibility">Accessibility Docs</a></h4>
Details on how to mark up your icons depending on how youre using them.
Make your site icons usable by the most people, and start here.
</div>
<div class="col-md-4 col-sm-6">
<h4><i class="fa fa-code" aria-hidden="true"></i> Better Examples</h4>
Every FA icon example page now has a better, more accessibility-minded
default block of code that users can copy and paste.
</div>
<div class="col-md-4 col-sm-6">
<h4><i class="fa fa-wheelchair-alt" aria-hidden="true"></i> <a href="../icons/#accessibility">Accessibility Category</a></h4>
We've added a new icon category specifically for accessibility and seeded
it with 15 icons to start. Make sure to <a href="../community/#requesting-new-icons">request more</a> if you need them!
</div>
</div>
<section id="new">
<h2 class="page-header">23 New Icons in 4.6</h2>
<div class="margin-botom-large">
You asked, Font Awesome delivers with 23 shiny new icons in version 4.6.
Want to request new icons? <a href="../community/#requesting-new-icons">Here's how</a>.
</div>
<div class="row fontawesome-icon-list">
<div class="fa-hover col-md-3 col-sm-4"><a href="../icon/american-sign-language-interpreting"><i class="fa fa-american-sign-language-interpreting" aria-hidden="true"></i> <span class="sr-only">Example of </span>american-sign-language-interpreting</a></div>
<div class="fa-hover col-md-3 col-sm-4"><a href="../icon/american-sign-language-interpreting"><i class="fa fa-asl-interpreting" aria-hidden="true"></i> <span class="sr-only">Example of </span>asl-interpreting <span class="text-muted">(alias)</span></a></div>
<div class="fa-hover col-md-3 col-sm-4"><a href="../icon/assistive-listening-systems"><i class="fa fa-assistive-listening-systems" aria-hidden="true"></i> <span class="sr-only">Example of </span>assistive-listening-systems</a></div>
<div class="fa-hover col-md-3 col-sm-4"><a href="../icon/audio-description"><i class="fa fa-audio-description" aria-hidden="true"></i> <span class="sr-only">Example of </span>audio-description</a></div>
<div class="fa-hover col-md-3 col-sm-4"><a href="../icon/blind"><i class="fa fa-blind" aria-hidden="true"></i> <span class="sr-only">Example of </span>blind</a></div>
<div class="fa-hover col-md-3 col-sm-4"><a href="../icon/braille"><i class="fa fa-braille" aria-hidden="true"></i> <span class="sr-only">Example of </span>braille</a></div>
<div class="fa-hover col-md-3 col-sm-4"><a href="../icon/deaf"><i class="fa fa-deaf" aria-hidden="true"></i> <span class="sr-only">Example of </span>deaf</a></div>
<div class="fa-hover col-md-3 col-sm-4"><a href="../icon/deaf"><i class="fa fa-deafness" aria-hidden="true"></i> <span class="sr-only">Example of </span>deafness <span class="text-muted">(alias)</span></a></div>
<div class="fa-hover col-md-3 col-sm-4"><a href="../icon/envira"><i class="fa fa-envira" aria-hidden="true"></i> <span class="sr-only">Example of </span>envira</a></div>
<div class="fa-hover col-md-3 col-sm-4"><a href="../icon/gitlab"><i class="fa fa-gitlab" aria-hidden="true"></i> <span class="sr-only">Example of </span>gitlab</a></div>
<div class="fa-hover col-md-3 col-sm-4"><a href="../icon/glide"><i class="fa fa-glide" aria-hidden="true"></i> <span class="sr-only">Example of </span>glide</a></div>
<div class="fa-hover col-md-3 col-sm-4"><a href="../icon/glide-g"><i class="fa fa-glide-g" aria-hidden="true"></i> <span class="sr-only">Example of </span>glide-g</a></div>
<div class="fa-hover col-md-3 col-sm-4"><a href="../icon/deaf"><i class="fa fa-hard-of-hearing" aria-hidden="true"></i> <span class="sr-only">Example of </span>hard-of-hearing <span class="text-muted">(alias)</span></a></div>
<div class="fa-hover col-md-3 col-sm-4"><a href="../icon/low-vision"><i class="fa fa-low-vision" aria-hidden="true"></i> <span class="sr-only">Example of </span>low-vision</a></div>
<div class="fa-hover col-md-3 col-sm-4"><a href="../icon/question-circle-o"><i class="fa fa-question-circle-o" aria-hidden="true"></i> <span class="sr-only">Example of </span>question-circle-o</a></div>
<div class="fa-hover col-md-3 col-sm-4"><a href="../icon/sign-language"><i class="fa fa-sign-language" aria-hidden="true"></i> <span class="sr-only">Example of </span>sign-language</a></div>
<div class="fa-hover col-md-3 col-sm-4"><a href="../icon/sign-language"><i class="fa fa-signing" aria-hidden="true"></i> <span class="sr-only">Example of </span>signing <span class="text-muted">(alias)</span></a></div>
<div class="fa-hover col-md-3 col-sm-4"><a href="../icon/snapchat"><i class="fa fa-snapchat" aria-hidden="true"></i> <span class="sr-only">Example of </span>snapchat</a></div>
<div class="fa-hover col-md-3 col-sm-4"><a href="../icon/snapchat-ghost"><i class="fa fa-snapchat-ghost" aria-hidden="true"></i> <span class="sr-only">Example of </span>snapchat-ghost</a></div>
<div class="fa-hover col-md-3 col-sm-4"><a href="../icon/snapchat-square"><i class="fa fa-snapchat-square" aria-hidden="true"></i> <span class="sr-only">Example of </span>snapchat-square</a></div>
<div class="fa-hover col-md-3 col-sm-4"><a href="../icon/universal-access"><i class="fa fa-universal-access" aria-hidden="true"></i> <span class="sr-only">Example of </span>universal-access</a></div>
<div class="fa-hover col-md-3 col-sm-4"><a href="../icon/viadeo"><i class="fa fa-viadeo" aria-hidden="true"></i> <span class="sr-only">Example of </span>viadeo</a></div>
<div class="fa-hover col-md-3 col-sm-4"><a href="../icon/viadeo-square"><i class="fa fa-viadeo-square" aria-hidden="true"></i> <span class="sr-only">Example of </span>viadeo-square</a></div>
<div class="fa-hover col-md-3 col-sm-4"><a href="../icon/volume-control-phone"><i class="fa fa-volume-control-phone" aria-hidden="true"></i> <span class="sr-only">Example of </span>volume-control-phone</a></div>
<div class="fa-hover col-md-3 col-sm-4"><a href="../icon/wheelchair-alt"><i class="fa fa-wheelchair-alt" aria-hidden="true"></i> <span class="sr-only">Example of </span>wheelchair-alt</a></div>
<div class="fa-hover col-md-3 col-sm-4"><a href="../icon/wpbeginner"><i class="fa fa-wpbeginner" aria-hidden="true"></i> <span class="sr-only">Example of </span>wpbeginner</a></div>
<div class="fa-hover col-md-3 col-sm-4"><a href="../icon/wpforms"><i class="fa fa-wpforms" aria-hidden="true"></i> <span class="sr-only">Example of </span>wpforms</a></div>
</div>
</section>
<section id="new-upgrading">
<h2 class="page-header">Upgrading from 3.2.1?</h2>
<p>
For complete documentation of the syntax changes in 4.6, check out the
<a href="../examples">examples</a>. For the changes to icon names,
<a href="https://twitter.com/gtagliala">@gtagliala</a> has put together a
<a href="https://github.com/FortAwesome/Font-Awesome/wiki/Upgrading-from-3.2.1-to-4">great wiki page</a> that
documents all the changes.
</p>
</section>
</div>
</div>
<footer id="footer" class="footer hidden-print">
<div class="container text-center">
<div id="bsap_1298241" class="bsarocks bsap_b1146e3f9fa32a794fc6d2c7be47ece8">
<a href="https://www.approveme.me/?utm_source=fontawesome.io&utm_medium=banner&utm_term=Sign%20Documents%20using%20Your%20Wordpress&utm_content=220x65-1e-try-a-free-demo-now_2x_bw&utm_campaign=fontawesome"
title="Sign Documents using Your Wordpress" target="_blank" rel="nofollow"
onClick="_gaq.push(['_trackEvent', 'Outbound Link', 'approve.me']);">
<img src="../assets/img/logo-approveme.png" width="220" height="65" alt="">
</a>
<a href="http://www.wpbeginner.com/?utm_source=fontawesome_footer&utm_medium=banner&utm_campaign=fontawesome"
title="Beginner's Guide to WordPress" target="_blank" rel="nofollow"
onClick="_gaq.push(['_trackEvent', 'Outbound Link', 'wpbeginner.com']);">
<img src="../assets/img/logo-wpbeginner.png" width="220" height="65" alt="">
</a>
<a href="https://themeisle.com/?utm_source=fontawesome_footer&utm_medium=banner&utm_campaign=fontawesome"
title="Premium Wordpress Themes" target="_blank" rel="nofollow"
onClick="_gaq.push(['_trackEvent', 'Outbound Link', 'themeisle.com']);">
<img src="../assets/img/logo-themeisle.png" width="220" height="65" alt="">
</a>
</div>
<div>
<i class="fa fa-flag" aria-hidden="true"></i> Font Awesome 4.6.0
<span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
Created by <a href="https://twitter.com/davegandy">Dave Gandy</a>
</div>
<div>
Font Awesome licensed under <a href="http://scripts.sil.org/OFL">SIL OFL 1.1</a>
<span class="hide-xs">&middot;</span><br class="hide-sm hide-md hide-lg">
Code licensed under <a href="http://opensource.org/licenses/mit-license.html">MIT License</a>
<span class="hide-xs hide-sm">&middot;</span><br class="hide-md hide-lg">
Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>
</div>
<div>
Thanks to <a href="http://tracking.maxcdn.com/c/148092/3982/378/"><i class="fa fa-maxcdn"></i> MaxCDN</a> for providing the excellent <a href="http://www.bootstrapcdn.com/#fontawesome_tab">BootstrapCDN for Font Awesome</a>
</div>
<div class="project">
<a href="https://github.com/FortAwesome/Font-Awesome">GitHub Project</a> &middot;
<a href="https://github.com/FortAwesome/Font-Awesome/issues">Issues</a> &middot;
<a href="../3.2.1">Old 3.2.1 Docs</a>
</div>
</div>
</footer>
<script src="https://platform.twitter.com/widgets.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>
<script src="https://cdn.jsdelivr.net/algoliasearch.helper/2/algoliasearch.helper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.2/backbone-min.js"></script>
<script src="../assets/js/site.js"></script>
<script src="../assets/js/search.js"></script>
</body>
</html>