diff options
53 files changed, 578 insertions, 578 deletions
diff --git a/_config.yml b/_config.yml index 81d5c933e..1f6d1b4a0 100644 --- a/_config.yml +++ b/_config.yml @@ -26,7 +26,7 @@ fontawesome: blog_url: http://blog.fontawesome.io twitter: fontawesome tagline: The iconic font designed for Bootstrap - css_prefix: fa-icon + css_prefix: fa author: name: Dave Gandy email: dave@fontawesome.io diff --git a/less/variables.less b/less/variables.less index 3c13c4e81..c663afac8 100644 --- a/less/variables.less +++ b/less/variables.less @@ -1,9 +1,9 @@ // Variables // -------------------------- -@fa-css-prefix: fa-icon; @fa-font-path: "../fonts"; //@fa-font-path: "//netdna.bootstrapcdn.com/font-awesome/4.0.0/font"; // for referencing Bootstrap CDN font files directly +@fa-css-prefix: fa; @fa-version: "4.0.0"; @fa-border-color: #eee; @fa-icon-muted: #eee; diff --git a/scss/_variables.scss b/scss/_variables.scss index f14f5979e..d46645335 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -1,9 +1,9 @@ // Variables // -------------------------- -$fa-css-prefix: fa; $fa-font-path: "../fonts" !default; //$fa-font-path: "//netdna.bootstrapcdn.com/font-awesome/4.0.0/font" !default; // for referencing Bootstrap CDN font files directly +$fa-css-prefix: fa; $fa-version: "4.0.0" !default; $fa-border-color: #eee !default; $fa-icon-muted: #eee !default; diff --git a/src/_includes/community/requesting-new-icons.html b/src/_includes/community/requesting-new-icons.html index a59b7b185..1b723dea5 100644 --- a/src/_includes/community/requesting-new-icons.html +++ b/src/_includes/community/requesting-new-icons.html @@ -21,7 +21,7 @@ </li> <li> Concrete objects make good icons, since abstract concepts are, well, abstract. It's harder to make an icon - to represent happiness. It's easier to make a smiley face. <i class="fa-icon fa-icon-smile"></i> + to represent happiness. It's easier to make a smiley face. <i class="fa fa-smile"></i> </li> </ol> </section> diff --git a/src/_includes/examples/animated-spinner.html b/src/_includes/examples/animated-spinner.html index a40b1f58e..f83debab6 100644 --- a/src/_includes/examples/animated-spinner.html +++ b/src/_includes/examples/animated-spinner.html @@ -3,24 +3,24 @@ <div class="row"> <div class="col-md-3 col-sm-4"> <p> - Use the <code>fa-icon-spin</code> class to get any icon to rotate. Works well with <code>fa-icon-spinner</code>, - <code>fa-icon-refresh</code>, and <code>fa-icon-cog</code>. + Use the <code>fa-spin</code> class to get any icon to rotate. Works well with <code>fa-spinner</code>, + <code>fa-refresh</code>, and <code>fa-cog</code>. </p> <p> - <button class="btn btn-default btn-lg"><i class="fa-icon fa-icon-spinner fa-icon-spin"></i></button> - <button class="btn btn-default btn-lg"><i class="fa-icon fa-icon-refresh fa-icon-spin"></i></button> - <button class="btn btn-default btn-lg"><i class="fa-icon fa-icon-cog fa-icon-spin"></i></button> + <button class="btn btn-default btn-lg"><i class="fa fa-spinner fa-spin"></i></button> + <button class="btn btn-default btn-lg"><i class="fa fa-refresh fa-spin"></i></button> + <button class="btn btn-default btn-lg"><i class="fa fa-cog fa-spin"></i></button> </p> </div> <div class="col-md-9 col-sm-8"> <div class="well well-large well-transparent lead"> - <i class="fa-icon fa-icon-spinner fa-icon-spin fa-icon-lg"></i> Spinner icon when loading content... + <i class="fa fa-spinner fa-spin fa-lg"></i> Spinner icon when loading content... </div> {% highlight html %} -<i class="fa-icon fa-icon-spinner fa-icon-spin fa-icon-lg"></i> Spinner icon when loading content... +<i class="fa fa-spinner fa-spin fa-lg"></i> Spinner icon when loading content... {% endhighlight %} <p class="alert alert-success"> - <i class="fa-icon fa-icon-info-circle"></i> CSS3 animations aren't supported in IE8 - IE9. + <i class="fa fa-info-circle"></i> CSS3 animations aren't supported in IE8 - IE9. </p> </div> </div> diff --git a/src/_includes/examples/bordered-pulled.html b/src/_includes/examples/bordered-pulled.html index a85a8871b..2439cdb99 100644 --- a/src/_includes/examples/bordered-pulled.html +++ b/src/_includes/examples/bordered-pulled.html @@ -3,29 +3,29 @@ <div class="row"> <div class="col-md-3 col-sm-4"> <p> - Use <code>fa-icon-border</code> and <code>pull-right</code> or <code>pull-left</code> for easy pull quotes or + Use <code>fa-border</code> and <code>pull-right</code> or <code>pull-left</code> for easy pull quotes or article graphics. </p> </div> <div class="col-md-9 col-sm-8"> <div class="well well-large well-transparent"> - <i class="fa-icon fa-icon-quote-left fa-icon-4x pull-left fa-icon-muted"></i> + <i class="fa fa-quote-left fa-4x pull-left fa-muted"></i> Use a few of the new styles together, and you've got easy pull quotes or a great introductory article image. Or spinning icons for loading and refreshing content. Or fun big icons in multi-line buttons. You can combine all of them in any combination to get lots of new possibilities. </div> {% highlight html %} -<i class="fa-icon fa-icon-quote-left fa-icon-4x pull-left fa-icon-muted"></i> +<i class="fa fa-quote-left fa-4x pull-left fa-muted"></i> Use a few of the new styles together ... lots of new possibilities. {% endhighlight %} <div class="well well-large well-transparent clearfix"> - <i class="fa-icon fa-icon-flag fa-icon-4x pull-left fa-icon-border"></i> + <i class="fa fa-flag fa-4x pull-left fa-border"></i> Use a few of the new styles together, and you've got easy pull quotes or a great introductory article image. Or spinning icons for loading and refreshing content. Or fun big icons in multi-line buttons. You can combine all of them in any combination to get lots of new possibilities. </div> {% highlight html %} -<i class="fa-icon fa-icon-flag fa-icon-4x pull-left fa-icon-border"></i> +<i class="fa fa-flag fa-4x pull-left fa-border"></i> Use a few of the new styles together ... lots of new possibilities. {% endhighlight %} </div> diff --git a/src/_includes/examples/button-dropdowns.html b/src/_includes/examples/button-dropdowns.html index 3d0429b6d..384ff27a1 100644 --- a/src/_includes/examples/button-dropdowns.html +++ b/src/_includes/examples/button-dropdowns.html @@ -3,13 +3,13 @@ <div class="row"> <div class="col-md-3 col-sm-4"> <div class="btn-group open"> - <a class="btn btn-success" href="#"><i class="fa-icon fa-icon-user"></i> User</a> + <a class="btn btn-success" href="#"><i class="fa fa-user"></i> User</a> <a class="btn btn-success dropdown-toggle" data-toggle="dropdown" href="#"> - <span class="fa-icon fa-icon-caret-down"></span></a> + <span class="fa fa-caret-down"></span></a> <ul class="dropdown-menu"> - <li><a href="#"><i class="fa-icon fa-icon-pencil fa-icon-fixed-width"></i> Edit</a></li> - <li><a href="#"><i class="fa-icon fa-icon-trash-alt fa-icon-fixed-width"></i> Delete</a></li> - <li><a href="#"><i class="fa-icon fa-icon-ban fa-icon-fixed-width"></i> Ban</a></li> + <li><a href="#"><i class="fa fa-pencil fa-fixed-width"></i> Edit</a></li> + <li><a href="#"><i class="fa fa-trash-alt fa-fixed-width"></i> Delete</a></li> + <li><a href="#"><i class="fa fa-ban fa-fixed-width"></i> Ban</a></li> <li class="divider"></li> <li><a href="#"><i class="i"></i> Make admin</a></li> </ul> @@ -18,19 +18,19 @@ <div class="col-md-9 col-sm-8"> {% highlight html %} <div class="btn-group open"> - <a class="btn btn-success" href="#"><i class="fa-icon fa-icon-user"></i> User</a> + <a class="btn btn-success" href="#"><i class="fa fa-user"></i> User</a> <a class="btn btn-success dropdown-toggle" data-toggle="dropdown" href="#"> - <span class="fa-icon fa-icon-caret-down"></span></a> + <span class="fa fa-caret-down"></span></a> <ul class="dropdown-menu"> - <li><a href="#"><i class="fa-icon fa-icon-pencil fa-icon-fixed-width"></i> Edit</a></li> - <li><a href="#"><i class="fa-icon fa-icon-trash fa-icon-fixed-width"></i> Delete</a></li> - <li><a href="#"><i class="fa-icon fa-icon-ban fa-icon-fixed-width"></i> Ban</a></li> + <li><a href="#"><i class="fa fa-pencil fa-fixed-width"></i> Edit</a></li> + <li><a href="#"><i class="fa fa-trash fa-fixed-width"></i> Delete</a></li> + <li><a href="#"><i class="fa fa-ban fa-fixed-width"></i> Ban</a></li> <li class="divider"></li> <li><a href="#"><i class="i"></i> Make admin</a></li> </ul> </div> {% endhighlight %} - <div class="alert alert-success"><i class="fa-icon fa-icon-info-circle"></i> Don't forget to add the appropriate JavaScript to enable button dropdowns.</div> + <div class="alert alert-success"><i class="fa fa-info-circle"></i> Don't forget to add the appropriate JavaScript to enable button dropdowns.</div> </div> </div> </section> diff --git a/src/_includes/examples/button-groups.html b/src/_includes/examples/button-groups.html index 955502466..83b8475be 100644 --- a/src/_includes/examples/button-groups.html +++ b/src/_includes/examples/button-groups.html @@ -4,20 +4,20 @@ <div class="col-md-3 col-sm-4"> <p> <div class="btn-group"> - <a class="btn btn-default" href="#"><i class="fa-icon fa-icon-align-left"></i></a> - <a class="btn btn-default" href="#"><i class="fa-icon fa-icon-align-center"></i></a> - <a class="btn btn-default" href="#"><i class="fa-icon fa-icon-align-right"></i></a> - <a class="btn btn-default" href="#"><i class="fa-icon fa-icon-align-justify"></i></a> + <a class="btn btn-default" href="#"><i class="fa fa-align-left"></i></a> + <a class="btn btn-default" href="#"><i class="fa fa-align-center"></i></a> + <a class="btn btn-default" href="#"><i class="fa fa-align-right"></i></a> + <a class="btn btn-default" href="#"><i class="fa fa-align-justify"></i></a> </div> </p> </div> <div class="col-md-9 col-sm-8"> {% highlight html %} <div class="btn-group"> - <a class="btn btn-default" href="#"><i class="fa-icon fa-icon-align-left"></i></a> - <a class="btn btn-default" href="#"><i class="fa-icon fa-icon-align-center"></i></a> - <a class="btn btn-default" href="#"><i class="fa-icon fa-icon-align-right"></i></a> - <a class="btn btn-default" href="#"><i class="fa-icon fa-icon-align-justify"></i></a> + <a class="btn btn-default" href="#"><i class="fa fa-align-left"></i></a> + <a class="btn btn-default" href="#"><i class="fa fa-align-center"></i></a> + <a class="btn btn-default" href="#"><i class="fa fa-align-right"></i></a> + <a class="btn btn-default" href="#"><i class="fa fa-align-justify"></i></a> </div> {% endhighlight %} </div> diff --git a/src/_includes/examples/buttons.html b/src/_includes/examples/buttons.html index d5325d65e..eff83d423 100644 --- a/src/_includes/examples/buttons.html +++ b/src/_includes/examples/buttons.html @@ -4,53 +4,53 @@ <div class="col-md-3 col-sm-4"> <p> <a class="btn btn-default" href="#"> - <i class="fa-icon fa-icon-repeat"></i> Reload</a> + <i class="fa fa-repeat"></i> Reload</a> <a class="btn btn-success" href="#"> - <i class="fa-icon fa-icon-shopping-cart fa-icon-lg"></i> Checkout</a> + <i class="fa fa-shopping-cart fa-lg"></i> Checkout</a> </p> <p> <a class="btn btn-large btn-primary" href="#"> - <i class="fa-icon fa-icon-comment"></i> Comment</a> + <i class="fa fa-comment"></i> Comment</a> <a class="btn btn-sm btn-info" href="#"> - <i class="fa-icon fa-icon-info-circle"></i> Info</a> + <i class="fa fa-info-circle"></i> Info</a> </p> <p> <a class="btn btn-danger" href="#"> - <i class="fa-icon fa-icon-trash fa-icon-lg"></i> Delete</a> + <i class="fa fa-trash fa-lg"></i> Delete</a> <a class="btn btn-default btn-sm" href="#"> - <i class="fa-icon fa-icon-cog"></i> Settings</a> + <i class="fa fa-cog"></i> Settings</a> </p> <p> <a class="btn btn-lg btn-danger" href="#"> - <i class="fa-icon fa-icon-flag fa-icon-2x pull-left"></i> Font Awesome<br>Version {{ site.fontawesome.version }}</a> + <i class="fa fa-flag fa-2x pull-left"></i> Font Awesome<br>Version {{ site.fontawesome.version }}</a> </p> <p> <a class="btn btn-warning" href="#"> - <i class="fa-icon fa-icon-refresh fa-icon-spin"></i> Synchronizing Content...</a> + <i class="fa fa-refresh fa-spin"></i> Synchronizing Content...</a> </p> </div> <div class="col-md-9 col-sm-8"> <p> Font Awesome icons work great in buttons. You can even combine them with larger icon styles, - <code>pull-right</code> and <code>pull-left</code>, and <code>fa-icon-spin</code>. + <code>pull-right</code> and <code>pull-left</code>, and <code>fa-spin</code>. </p> {% highlight html %} <a class="btn btn-default" href="#"> - <i class="fa-icon fa-icon-repeat"></i> Reload</a> + <i class="fa fa-repeat"></i> Reload</a> <a class="btn btn-success" href="#"> - <i class="fa-icon fa-icon-shopping-cart fa-icon-lg"></i> Checkout</a> + <i class="fa fa-shopping-cart fa-lg"></i> Checkout</a> <a class="btn btn-lg btn-primary" href="#"> - <i class="fa-icon fa-icon-comment"></i> Comment</a> + <i class="fa fa-comment"></i> Comment</a> <a class="btn btn-sm btn-info" href="#"> - <i class="fa-icon fa-icon-info-circle"></i> Info</a> + <i class="fa fa-info-circle"></i> Info</a> <a class="btn btn-danger" href="#"> - <i class="fa-icon fa-icon-trash fa-icon-lg"></i> Delete</a> + <i class="fa fa-trash fa-lg"></i> Delete</a> <a class="btn btn-default btn-sm" href="#"> - <i class="fa-icon fa-icon-cog"></i> Settings</a> + <i class="fa fa-cog"></i> Settings</a> <a class="btn btn-lg btn-danger" href="#"> - <i class="fa-icon fa-icon-flag fa-icon-2x pull-left"></i> Font Awesome<br>Version {{ site.fontawesome.version }}</a> + <i class="fa fa-flag fa-2x pull-left"></i> Font Awesome<br>Version {{ site.fontawesome.version }}</a> <a class="btn btn-warning" href="#"> - <i class="fa-icon fa-icon-refresh fa-icon-spin"></i> Synchronizing Content...</a> + <i class="fa fa-refresh fa-spin"></i> Synchronizing Content...</a> {% endhighlight %} </div> </div> diff --git a/src/_includes/examples/form-inputs.html b/src/_includes/examples/form-inputs.html index 0b2556bac..e2b073d28 100644 --- a/src/_includes/examples/form-inputs.html +++ b/src/_includes/examples/form-inputs.html @@ -3,12 +3,12 @@ <div class="row"> <div class="col-md-3 col-sm-4"> <div class="input-group"> - <span class="input-group-addon"><i class="fa-icon fa-icon-envelope-alt"></i></span> + <span class="input-group-addon"><i class="fa fa-envelope-alt"></i></span> <input class="form-control" type="text" placeholder="Email address"> </div> <br> <div class="input-group"> - <span class="input-group-addon"><i class="fa-icon fa-icon-key"></i></span> + <span class="input-group-addon"><i class="fa fa-key"></i></span> <input class="form-control" type="password" placeholder="Password"> </div> </div> @@ -16,11 +16,11 @@ {% highlight html %} <form> <div class="input-prepend"> - <span class="add-on"><i class="fa-icon fa-icon-envelope-alt"></i></span> + <span class="add-on"><i class="fa fa-envelope-alt"></i></span> <input class="span2" type="text" placeholder="Email address"> </div> <div class="input-prepend"> - <span class="add-on"><i class="fa-icon fa-icon-key"></i></span> + <span class="add-on"><i class="fa fa-key"></i></span> <input class="span2" type="password" placeholder="Password"> </div> </form> diff --git a/src/_includes/examples/inline-icons.html b/src/_includes/examples/inline-icons.html index d5fc45421..8324d0af6 100644 --- a/src/_includes/examples/inline-icons.html +++ b/src/_includes/examples/inline-icons.html @@ -7,13 +7,13 @@ <div class="col-md-9 col-sm-8"> <div class="well well-transparent"> <div style="font-size: 24px; line-height: 1.5em;"> - <i class="fa-icon fa-icon-camera-retro"></i> icon-camera-retro + <i class="fa fa-camera-retro"></i> icon-camera-retro </div> </div> {% highlight html %} -<i class="fa-icon fa-icon-camera-retro"></i> icon-camera-retro +<i class="fa fa-camera-retro"></i> icon-camera-retro {% endhighlight %} - <div class="alert alert-success"><i class="fa-icon fa-icon-info-circle"></i> Icon classes are echoed via CSS :before.</div> + <div class="alert alert-success"><i class="fa fa-info-circle"></i> Icon classes are echoed via CSS :before.</div> </div> </div> </section> diff --git a/src/_includes/examples/larger-icons.html b/src/_includes/examples/larger-icons.html index 91aadf58b..9f2834e74 100644 --- a/src/_includes/examples/larger-icons.html +++ b/src/_includes/examples/larger-icons.html @@ -3,31 +3,31 @@ <div class="row"> <div class="col-md-3 col-sm-4"> <p> - To increase the size of icons relative to its container, use <code>fa-icon-lg</code>, <code>fa-icon-2x</code>, - <code>fa-icon-3x</code>, or <code>fa-icon-4x</code>. + To increase the size of icons relative to its container, use <code>fa-lg</code>, <code>fa-2x</code>, + <code>fa-3x</code>, or <code>fa-4x</code>. </p> </div> <div class="col-md-9 col-sm-8"> <p> - Increase the icon size by using the <code>fa-icon-lg</code> (33% increase), <code>fa-icon-2x</code>, - <code>fa-icon-3x</code>, or <code>fa-icon-4x</code> classes. + Increase the icon size by using the <code>fa-lg</code> (33% increase), <code>fa-2x</code>, + <code>fa-3x</code>, or <code>fa-4x</code> classes. </p> <div class="well well-transparent"> <div style="font-size: 24px; line-height: 1.5em;"> - <p><i class="fa-icon fa-icon-camera-retro fa-icon-lg"></i> fa-icon-camera-retro</p> - <p><i class="fa-icon fa-icon-camera-retro fa-icon-2x"></i> fa-icon-camera-retro</p> - <p><i class="fa-icon fa-icon-camera-retro fa-icon-3x"></i> fa-icon-camera-retro</p> - <p><i class="fa-icon fa-icon-camera-retro fa-icon-4x"></i> fa-icon-camera-retro</p> + <p><i class="fa fa-camera-retro fa-lg"></i> fa-camera-retro</p> + <p><i class="fa fa-camera-retro fa-2x"></i> fa-camera-retro</p> + <p><i class="fa fa-camera-retro fa-3x"></i> fa-camera-retro</p> + <p><i class="fa fa-camera-retro fa-4x"></i> fa-camera-retro</p> </div> </div> {% highlight html %} -<p><i class="fa-icon fa-icon-camera-retro fa-icon-lg"></i> fa-icon-camera-retro</p> -<p><i class="fa-icon fa-icon-camera-retro fa-icon-2x"></i> fa-icon-camera-retro</p> -<p><i class="fa-icon fa-icon-camera-retro fa-icon-3x"></i> fa-icon-camera-retro</p> -<p><i class="fa-icon fa-icon-camera-retro fa-icon-4x"></i> fa-icon-camera-retro</p> +<p><i class="fa fa-camera-retro fa-lg"></i> fa-camera-retro</p> +<p><i class="fa fa-camera-retro fa-2x"></i> fa-camera-retro</p> +<p><i class="fa fa-camera-retro fa-3x"></i> fa-camera-retro</p> +<p><i class="fa fa-camera-retro fa-4x"></i> fa-camera-retro</p> {% endhighlight %} <div class="alert alert-success"> - <i class="fa-icon fa-icon-info-circle"></i> If your icons are getting chopped off on top and bottom, make sure you have + <i class="fa fa-info-circle"></i> If your icons are getting chopped off on top and bottom, make sure you have sufficient line-height. </div> </div> diff --git a/src/_includes/examples/list-bullets.html b/src/_includes/examples/list-bullets.html index c2cfb321b..8f5c8dda9 100644 --- a/src/_includes/examples/list-bullets.html +++ b/src/_includes/examples/list-bullets.html @@ -2,28 +2,28 @@ <h2 class="page-header">List Bullets</h2> <div class="row"> <div class="col-md-3 col-sm-4"> - <ul class="fa-icon-ul"> - <li><i class="fa-icon-li fa-icon fa-icon-check"></i>List bullets (like these)</li> - <li><i class="fa-icon-li fa-icon fa-icon-check"></i>Buttons</li> - <li><i class="fa-icon-li fa-icon fa-icon-check"></i>Button groups</li> - <li><i class="fa-icon-li fa-icon fa-icon-check"></i>Navigation</li> - <li><i class="fa-icon-li fa-icon fa-icon-check"></i>Prepended form inputs</li> - <li><i class="fa-icon-li fa-icon fa-icon-check"></i>…and many more with custom CSS</li> + <ul class="fa-ul"> + <li><i class="fa-li fa fa-check"></i>List bullets (like these)</li> + <li><i class="fa-li fa fa-check"></i>Buttons</li> + <li><i class="fa-li fa fa-check"></i>Button groups</li> + <li><i class="fa-li fa fa-check"></i>Navigation</li> + <li><i class="fa-li fa fa-check"></i>Prepended form inputs</li> + <li><i class="fa-li fa fa-check"></i>…and many more with custom CSS</li> </ul> </div> <div class="col-md-9 col-sm-8"> <p>Easily replace individual list bullets.</p> {% highlight html %} -<ul class="fa-icon-ul"> - <li><i class="fa-icon-li fa-icon fa-icon-check"></i>Bulleted lists (like this one)</li> - <li><i class="fa-icon-li fa-icon fa-icon-check"></i>Buttons</li> - <li><i class="fa-icon-li fa-icon fa-icon-check"></i>Button groups</li> - <li><i class="fa-icon-li fa-icon fa-icon-check"></i>Navigation</li> - <li><i class="fa-icon-li fa-icon fa-icon-check"></i>Prepended form inputs</li> - <li><i class="fa-icon-li fa-icon fa-icon-check"></i>…and many more with custom CSS</li> +<ul class="fa-ul"> + <li><i class="fa-li fa fa-check"></i>Bulleted lists (like this one)</li> + <li><i class="fa-li fa fa-check"></i>Buttons</li> + <li><i class="fa-li fa fa-check"></i>Button groups</li> + <li><i class="fa-li fa fa-check"></i>Navigation</li> + <li><i class="fa-li fa fa-check"></i>Prepended form inputs</li> + <li><i class="fa-li fa fa-check"></i>…and many more with custom CSS</li> </ul> {% endhighlight %} - <div class="alert alert-success"><i class="fa-icon fa-icon-info-circle"></i> Make sure to NOT include any whitespace after the icon declaration.</div> + <div class="alert alert-success"><i class="fa fa-info-circle"></i> Make sure to NOT include any whitespace after the icon declaration.</div> </div> </div> </section> diff --git a/src/_includes/examples/navigation.html b/src/_includes/examples/navigation.html index 6a4c70720..360da1f54 100644 --- a/src/_includes/examples/navigation.html +++ b/src/_includes/examples/navigation.html @@ -3,20 +3,20 @@ <div class="row"> <div class="col-md-3 col-sm-4"> <ul class="nav nav-pills nav-stacked"> - <li class="active"><a href="#"><i class="fa-icon fa-icon-home fa-icon-fixed-width"></i> Home</a></li> - <li><a href="#"><i class="fa-icon fa-icon-book fa-icon-fixed-width"></i> Library</a></li> - <li><a href="#"><i class="fa-icon fa-icon-pencil fa-icon-fixed-width"></i> Applications</a></li> - <li><a href="#"><i class="fa-icon fa-icon-cogs fa-icon-fixed-width"></i> Settings</a></li> + <li class="active"><a href="#"><i class="fa fa-home fa-fixed-width"></i> Home</a></li> + <li><a href="#"><i class="fa fa-book fa-fixed-width"></i> Library</a></li> + <li><a href="#"><i class="fa fa-pencil fa-fixed-width"></i> Applications</a></li> + <li><a href="#"><i class="fa fa-cogs fa-fixed-width"></i> Settings</a></li> </ul> </div> <div class="col-md-9 col-sm-8"> <p>Use Font Awesome icons in navigation to provide helpful visual cues.</p> {% highlight html %} <ul class="nav nav-pills nav-stacked"> - <li class="active"><a href="#"><i class="fa-icon fa-icon-home fa-icon-fixed-width"></i> Home</a></li> - <li><a href="#"><i class="fa-icon fa-icon-book fa-icon-fixed-width"></i> Library</a></li> - <li><a href="#"><i class="fa-icon fa-icon-pencil fa-icon-fixed-width"></i> Applications</a></li> - <li><a href="#"><i class="fa-icon fa-icon-cogs fa-icon-fixed-width"></i> Settings</a></li> + <li class="active"><a href="#"><i class="fa fa-home fa-fixed-width"></i> Home</a></li> + <li><a href="#"><i class="fa fa-book fa-fixed-width"></i> Library</a></li> + <li><a href="#"><i class="fa fa-pencil fa-fixed-width"></i> Applications</a></li> + <li><a href="#"><i class="fa fa-cogs fa-fixed-width"></i> Settings</a></li> </ul> {% endhighlight %} </div> diff --git a/src/_includes/examples/new.html b/src/_includes/examples/new.html index c0c4b29b7..34570fa26 100644 --- a/src/_includes/examples/new.html +++ b/src/_includes/examples/new.html @@ -4,49 +4,49 @@ <div class="col-md-4"> <h4><a href="#rotated-flipped">Rotated and Flipped Icons</a></h4> <div class="well well-transparent"> - <i class="fa-icon fa-icon-shield"></i> normal<br> - <i class="fa-icon fa-icon-shield fa-icon-rotate-90"></i> fa-icon-rotate-90<br> - <i class="fa-icon fa-icon-shield fa-icon-rotate-180"></i> fa-icon-rotate-180<br> - <i class="fa-icon fa-icon-shield fa-icon-rotate-270"></i> fa-icon-rotate-270<br> - <i class="fa-icon fa-icon-shield fa-icon-flip-horizontal"></i> fa-icon-flip-horizontal<br> - <i class="fa-icon fa-icon-shield fa-icon-flip-vertical"></i> fa-icon-flip-vertical + <i class="fa fa-shield"></i> normal<br> + <i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br> + <i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br> + <i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br> + <i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br> + <i class="fa fa-shield fa-flip-vertical"></i> fa-flip-vertical </div> </div> <div class="col-md-4"> <h4><a href="#stacked">Stacked Icons</a></h4> <div class="well well-transparent"> <div class="margin-top-sm margin-bottom-sm"> - <span class="fa-icon-stack"> - <i class="fa-icon fa-icon-unchecked fa-icon-stack-base"></i> - <i class="fa-icon fa-icon-twitter"></i> + <span class="fa-stack"> + <i class="fa fa-unchecked fa-stack-base"></i> + <i class="fa fa-twitter"></i> </span> - fa-icon-twitter on fa-icon-unchecked<br> - <span class="fa-icon-stack"> - <i class="fa-icon fa-icon-circle fa-icon-stack-base"></i> - <i class="fa-icon fa-icon-flag fa-icon-light"></i> + fa-twitter on fa-unchecked<br> + <span class="fa-stack"> + <i class="fa fa-circle fa-stack-base"></i> + <i class="fa fa-flag fa-light"></i> </span> - fa-icon-flag on fa-icon-circle<br> - <span class="fa-icon-stack"> - <i class="fa-icon fa-icon-square fa-icon-stack-base"></i> - <i class="fa-icon fa-icon-terminal fa-icon-light"></i> + fa-flag on fa-circle<br> + <span class="fa-stack"> + <i class="fa fa-square fa-stack-base"></i> + <i class="fa fa-terminal fa-light"></i> </span> - fa-icon-terminal on fa-icon-square<br> - <span class="fa-icon-stack"> - <i class="fa-icon fa-icon-camera"></i> - <i class="fa-icon fa-icon-ban fa-icon-stack-base text-danger"></i> + fa-terminal on fa-square<br> + <span class="fa-stack"> + <i class="fa fa-camera"></i> + <i class="fa fa-ban fa-stack-base text-danger"></i> </span> - fa-icon-camera on fa-icon-ban + fa-camera on fa-ban </div> </div> </div> <div class="col-md-4"> <h4><a href="#bulleted-lists">Better Bulleted Lists</a></h4> <div class="well well-transparent"> - <ul class="fa-icon-ul"> - <li><i class="fa-icon fa-icon-li fa-icon-chevron-circle-right"></i>New bulleted lists</li> - <li><i class="fa-icon fa-icon-li fa-icon-bullseye"></i>Fix some old bugs</li> - <li><i class="fa-icon fa-icon-li fa-icon-play-circle"></i>And deal with arbitrary</li> - <li><i class="fa-icon fa-icon-li fa-icon-check-circle"></i>Font sizes better</li> + <ul class="fa-ul"> + <li><i class="fa fa-li fa-chevron-circle-right"></i>New bulleted lists</li> + <li><i class="fa fa-li fa-bullseye"></i>Fix some old bugs</li> + <li><i class="fa fa-li fa-play-circle"></i>And deal with arbitrary</li> + <li><i class="fa fa-li fa-check-circle"></i>Font sizes better</li> </ul> </div> </div> diff --git a/src/_includes/examples/rotated-flipped.html b/src/_includes/examples/rotated-flipped.html index f7663f07c..33dd3591c 100644 --- a/src/_includes/examples/rotated-flipped.html +++ b/src/_includes/examples/rotated-flipped.html @@ -6,23 +6,23 @@ </div> <div class="col-md-9 col-sm-8"> <div class="well well-large well-transparent lead"> - <i class="fa-icon fa-icon-shield"></i> normal<br> - <i class="fa-icon fa-icon-shield fa-icon-rotate-90"></i> fa-icon-rotate-90<br> - <i class="fa-icon fa-icon-shield fa-icon-rotate-180"></i> fa-icon-rotate-180<br> - <i class="fa-icon fa-icon-shield fa-icon-rotate-270"></i> fa-icon-rotate-270<br> - <i class="fa-icon fa-icon-shield fa-icon-flip-horizontal"></i> fa-icon-flip-horizontal<br> - <i class="fa-icon fa-icon-shield fa-icon-flip-vertical"></i> fa-icon-flip-vertical + <i class="fa fa-shield"></i> normal<br> + <i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br> + <i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br> + <i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br> + <i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br> + <i class="fa fa-shield fa-flip-vertical"></i> fa-flip-vertical </div> {% highlight html %} -<i class="fa-icon fa-icon-shield"></i> normal<br> -<i class="fa-icon fa-icon-shield fa-icon-rotate-90"></i> fa-icon-rotate-90<br> -<i class="fa-icon fa-icon-shield fa-icon-rotate-180"></i> fa-icon-rotate-180<br> -<i class="fa-icon fa-icon-shield fa-icon-rotate-270"></i> fa-icon-rotate-270<br> -<i class="fa-icon fa-icon-shield fa-icon-flip-horizontal"></i> fa-icon-flip-horizontal<br> -<i class="fa-icon fa-icon-shield fa-icon-flip-vertical"></i> icon-flip-vertical +<i class="fa fa-shield"></i> normal<br> +<i class="fa fa-shield fa-rotate-90"></i> fa-rotate-90<br> +<i class="fa fa-shield fa-rotate-180"></i> fa-rotate-180<br> +<i class="fa fa-shield fa-rotate-270"></i> fa-rotate-270<br> +<i class="fa fa-shield fa-flip-horizontal"></i> fa-flip-horizontal<br> +<i class="fa fa-shield fa-flip-vertical"></i> icon-flip-vertical {% endhighlight %} <p class="alert alert-success"> - <i class="fa-icon fa-icon-info-circle"></i> Rotating and flipping icons aren't yet supported in IE7. + <i class="fa fa-info-circle"></i> Rotating and flipping icons aren't yet supported in IE7. </p> </div> </div> diff --git a/src/_includes/examples/stacked.html b/src/_includes/examples/stacked.html index 11532ab1d..41fdb8420 100644 --- a/src/_includes/examples/stacked.html +++ b/src/_includes/examples/stacked.html @@ -2,53 +2,53 @@ <h2 class="page-header">Stacked Icons</h2> <div class="row"> <div class="col-md-3 col-sm-4"> - A method for easily stacking multiple icons. Use the <code>fa-icon-stack</code> class on the parent and - <code>fa-icon-stack-base</code> for the bottom icon. + A method for easily stacking multiple icons. Use the <code>fa-stack</code> class on the parent and + <code>fa-stack-base</code> for the bottom icon. </div> <div class="col-md-9 col-sm-8"> <div class="well well-large well-transparent lead"> - <span class="fa-icon-stack"> - <i class="fa-icon fa-icon-unchecked fa-icon-stack-base"></i> - <i class="fa-icon fa-icon-twitter"></i> + <span class="fa-stack"> + <i class="fa fa-unchecked fa-stack-base"></i> + <i class="fa fa-twitter"></i> </span> - fa-icon-twitter on fa-icon-unchecked<br> - <span class="fa-icon-stack"> - <i class="fa-icon fa-icon-circle fa-icon-stack-base"></i> - <i class="fa-icon fa-icon-flag fa-icon-light"></i> + fa-twitter on fa-unchecked<br> + <span class="fa-stack"> + <i class="fa fa-circle fa-stack-base"></i> + <i class="fa fa-flag fa-light"></i> </span> - fa-icon-flag on fa-icon-circle<br> - <span class="fa-icon-stack"> - <i class="fa-icon fa-icon-square fa-icon-stack-base"></i> - <i class="fa-icon fa-icon-terminal fa-icon-light"></i> + fa-flag on fa-circle<br> + <span class="fa-stack"> + <i class="fa fa-square fa-stack-base"></i> + <i class="fa fa-terminal fa-light"></i> </span> - fa-icon-terminal on fa-icon-square<br> - <span class="fa-icon-stack"> - <i class="fa-icon fa-icon-camera"></i> - <i class="fa-icon fa-icon-ban fa-icon-stack-base text-danger"></i> + fa-terminal on fa-square<br> + <span class="fa-stack"> + <i class="fa fa-camera"></i> + <i class="fa fa-ban fa-stack-base text-danger"></i> </span> - fa-icon-camera on fa-icon-ban + fa-camera on fa-ban </div> {% highlight html %} -<span class="fa-icon-stack"> - <i class="fa-icon fa-icon-unchecked fa-icon-stack-base"></i> - <i class="fa-icon fa-icon-twitter"></i> +<span class="fa-stack"> + <i class="fa fa-unchecked fa-stack-base"></i> + <i class="fa fa-twitter"></i> </span> -fa-icon-twitter on fa-icon-unchecked<br> -<span class="fa-icon-stack"> - <i class="fa-icon fa-icon-circle fa-icon-stack-base"></i> - <i class="fa-icon fa-icon-flag fa-icon-light"></i> +fa-twitter on fa-unchecked<br> +<span class="fa-stack"> + <i class="fa fa-circle fa-stack-base"></i> + <i class="fa fa-flag fa-light"></i> </span> -fa-icon-flag on fa-icon-circle<br> -<span class="fa-icon-stack"> - <i class="fa-icon fa-icon-sign-blank fa-icon-stack-base"></i> - <i class="fa-icon fa-icon-terminal fa-icon-light"></i> +fa-flag on fa-circle<br> +<span class="fa-stack"> + <i class="fa fa-sign-blank fa-stack-base"></i> + <i class="fa fa-terminal fa-light"></i> </span> -fa-icon-terminal on fa-icon-sign-blank<br> -<span class="fa-icon-stack"> - <i class="fa-icon fa-icon-camera"></i> - <i class="fa-icon fa-icon-ban-circle fa-icon-stack-base text-danger"></i> +fa-terminal on fa-sign-blank<br> +<span class="fa-stack"> + <i class="fa fa-camera"></i> + <i class="fa fa-ban-circle fa-stack-base text-danger"></i> </span> -fa-icon-camera on fa-icon-ban-circle +fa-camera on fa-ban-circle {% endhighlight %} </div> </div> diff --git a/src/_includes/footer.html b/src/_includes/footer.html index f100d94ca..522bb03d9 100644 --- a/src/_includes/footer.html +++ b/src/_includes/footer.html @@ -1,7 +1,7 @@ <footer id="footer" class="footer hidden-print"> <div class="container text-center"> <div> - <i class="fa-icon fa-icon-flag"></i> Font Awesome {{ site.fontawesome.version }} + <i class="fa fa-flag"></i> Font Awesome {{ site.fontawesome.version }} <span class="hide-xs">·</span><br class="hide-sm hide-md hide-lg"> Created and Maintained by <a href="http://twitter.com/{{ site.fontawesome.author.twitter }}">Dave Gandy</a> </div> @@ -13,7 +13,7 @@ Documentation licensed under <a href="{{ site.fontawesome.license.documentation.url }}">{{ site.fontawesome.license.documentation.version }}</a> </div> <div> - Thanks to <a href="http://maxcdn.com"><i class="fa-icon fa-icon-maxcdn"></i> MaxCDN</a> for providing the excellent <a href="http://www.bootstrapcdn.com/#fontawesome_tab">BootstrapCDN for Font Awesome</a> + Thanks to <a href="http://maxcdn.com"><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="{{ site.fontawesome.github.url }}">GitHub Project</a> · diff --git a/src/_includes/icons/brand.html b/src/_includes/icons/brand.html index 4447e32e9..285737836 100644 --- a/src/_includes/icons/brand.html +++ b/src/_includes/icons/brand.html @@ -9,7 +9,7 @@ {% assign icons_brand = icons | expand_aliases | category:"Brand Icons" | sort_by:'class' %} {% for icon in icons_brand %} - <div class="col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa-icon fa-icon-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div> + <div class="col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div> {% endfor %} </div> </section> diff --git a/src/_includes/icons/currency.html b/src/_includes/icons/currency.html index 8ad3c0f6e..8cf456288 100644 --- a/src/_includes/icons/currency.html +++ b/src/_includes/icons/currency.html @@ -5,7 +5,7 @@ {% assign icons_currency = icons | expand_aliases | category:"Currency Icons" | sort_by:'class' %} {% for icon in icons_currency %} - <div class="col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa-icon fa-icon-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div> + <div class="col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div> {% endfor %} </div> diff --git a/src/_includes/icons/directional.html b/src/_includes/icons/directional.html index 585e22438..eefa6d815 100644 --- a/src/_includes/icons/directional.html +++ b/src/_includes/icons/directional.html @@ -5,7 +5,7 @@ {% assign icons_directional = icons | expand_aliases | category:"Directional Icons" | sort_by:'class' %} {% for icon in icons_directional %} - <div class="col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa-icon fa-icon-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div> + <div class="col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div> {% endfor %} </div> diff --git a/src/_includes/icons/medical.html b/src/_includes/icons/medical.html index ae7d97f16..b95849e5d 100644 --- a/src/_includes/icons/medical.html +++ b/src/_includes/icons/medical.html @@ -5,7 +5,7 @@ {% assign icons_medical = icons | expand_aliases | category:"Medical Icons" | sort_by:'class' %} {% for icon in icons_medical %} - <div class="col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa-icon fa-icon-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div> + <div class="col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div> {% endfor %} </div> diff --git a/src/_includes/icons/new.html b/src/_includes/icons/new.html index 6f95a147c..2ec4934b8 100644 --- a/src/_includes/icons/new.html +++ b/src/_includes/icons/new.html @@ -11,7 +11,7 @@ {% assign icons_new = icons | expand_aliases | version:site.fontawesome.minor_version %} {% for icon in icons_new %} - <div class="col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa-icon fa-icon-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div> + <div class="col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div> {% endfor %} </div> diff --git a/src/_includes/icons/text-editor.html b/src/_includes/icons/text-editor.html index 51737db2a..0af745ef5 100644 --- a/src/_includes/icons/text-editor.html +++ b/src/_includes/icons/text-editor.html @@ -5,7 +5,7 @@ {% assign icons_text_editor = icons | expand_aliases | category:"Text Editor Icons" | sort_by:'class' %} {% for icon in icons_text_editor %} - <div class="col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa-icon fa-icon-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div> + <div class="col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div> {% endfor %} </div> diff --git a/src/_includes/icons/video-player.html b/src/_includes/icons/video-player.html index 6cb3343ff..1de5fb26b 100644 --- a/src/_includes/icons/video-player.html +++ b/src/_includes/icons/video-player.html @@ -5,7 +5,7 @@ {% assign icons_video_player = icons | expand_aliases | category:"Video Player Icons" | sort_by:'class' %} {% for icon in icons_video_player %} - <div class="col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa-icon fa-icon-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div> + <div class="col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div> {% endfor %} </div> diff --git a/src/_includes/icons/web-application.html b/src/_includes/icons/web-application.html index 964ab9f4d..d25921f88 100644 --- a/src/_includes/icons/web-application.html +++ b/src/_includes/icons/web-application.html @@ -5,7 +5,7 @@ {% assign icons_web_application = icons | expand_aliases | category:"Web Application Icons" | sort_by:'class' %} {% for icon in icons_web_application %} - <div class="col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa-icon fa-icon-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div> + <div class="col-md-3 col-sm-4"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> {{ icon.class }}{% if icon.alias_of %} <span class="text-muted">(alias)</span>{% endif %}</a></div> {% endfor %} </div> diff --git a/src/_includes/jumbotron-carousel.html b/src/_includes/jumbotron-carousel.html index 017271a16..c00b3188f 100644 --- a/src/_includes/jumbotron-carousel.html +++ b/src/_includes/jumbotron-carousel.html @@ -7,7 +7,7 @@ <div class="actions"> <a class="btn btn-default btn-lg" href="{{ page.relative_path }}assets/font-awesome.zip" onClick="_gaq.push(['_trackEvent', 'Outbound Link', 'Download on GitHub']);"> - <i class="fa-icon fa-icon-download fa-icon-lg"></i> + <i class="fa fa-download fa-lg"></i> Download </a> </div> @@ -23,26 +23,26 @@ <div id="icon-carousel" class="carousel slide"> <!-- Carousel items --> <div class="carousel-inner"> - <div class="active item"><div><i class="fa-icon fa-icon-flag"></i></div></div> - <div class="item"><div><i class="fa-icon fa-icon-compass"></i></div></div> - <div class="item"><div><i class="fa-icon fa-icon-rocket"></i></div></div> - <div class="item"><div><i class="fa-icon fa-icon-shield"></i></div></div> - <div class="item"><div><i class="fa-icon fa-icon-star-half-empty"></i></div></div> - <div class="item"><div><i class="fa-icon fa-icon-envelope-alt"></i></div></div> - <div class="item"><div><i class="fa-icon fa-icon-medkit"></i></div></div> - <div class="item"><div><i class="fa-icon fa-icon-book"></i></div></div> - <div class="item"><div><i class="fa-icon fa-icon-fighter-jet"></i></div></div> - <div class="item"><div><i class="fa-icon fa-icon-beer"></i></div></div> - <div class="item"><div><i class="fa-icon fa-icon-heart-alt"></i></div></div> - <div class="item"><div><i class="fa-icon fa-icon-thumbs-up-alt"></i></div></div> + <div class="active item"><div><i class="fa fa-flag"></i></div></div> + <div class="item"><div><i class="fa fa-compass"></i></div></div> + <div class="item"><div><i class="fa fa-rocket"></i></div></div> + <div class="item"><div><i class="fa fa-shield"></i></div></div> + <div class="item"><div><i class="fa fa-star-half-empty"></i></div></div> + <div class="item"><div><i class="fa fa-envelope-alt"></i></div></div> + <div class="item"><div><i class="fa fa-medkit"></i></div></div> + <div class="item"><div><i class="fa fa-book"></i></div></div> + <div class="item"><div><i class="fa fa-fighter-jet"></i></div></div> + <div class="item"><div><i class="fa fa-beer"></i></div></div> + <div class="item"><div><i class="fa fa-heart-alt"></i></div></div> + <div class="item"><div><i class="fa fa-thumbs-up-alt"></i></div></div> </div> <!-- Carousel nav --> <a class="carousel-control left" href="#icon-carousel" data-slide="prev" onClick="_gaq.push(['_trackEvent', 'iconCarousel', 'Prev']);"> - <i class="fa-icon fa-icon-arrow-circle-left"></i></a> + <i class="fa fa-arrow-circle-left"></i></a> <a class="carousel-control right" href="#icon-carousel" data-slide="next" onClick="_gaq.push(['_trackEvent', 'iconCarousel', 'Next']);"> - <i class="fa-icon fa-icon-arrow-circle-right"></i></a> + <i class="fa fa-arrow-circle-right"></i></a> </div> </div> </div> diff --git a/src/_includes/navbar.html b/src/_includes/navbar.html index 50cfb6a41..24920a8ef 100644 --- a/src/_includes/navbar.html +++ b/src/_includes/navbar.html @@ -7,35 +7,41 @@ <span class="icon-bar"></span> <span class="icon-bar"></span> </button> - <a class="navbar-brand" href="{{ page.relative_path }}"><i class="fa-icon fa-icon-flag"></i> Font Awesome</a> + <a class="navbar-brand" href="{{ page.relative_path }}"><i class="fa fa-flag"></i> Font Awesome</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="hidden-sm {% if page.navbar_active == "home" %} active{% endif %}"><a href="{{ page.relative_path }}">Home</a></li> + <li class="hidden-sm{% if page.navbar_active == "whats-new" %} active{% endif %}"> + <a href="{{ page.relative_path }}whats-new/">What's New</a> + </li> + <li class="hidden-xs hidden-md hidden-lg{% if page.navbar_active == "whats-new" %} active{% endif %}"> + <a href="{{ page.relative_path }}whats-new/">New</a> + </li> <li{% if page.navbar_active == "get-started" %} class="active"{% endif %}><a href="{{ page.relative_path }}get-started/">Get Started</a></li> <li class="dropdown-split-left{% if page.navbar_active == "icons" %} active{% endif %}"><a href="{{ page.relative_path }}icons/">Icons</a></li> <li class="dropdown dropdown-split-right hidden-xs{% if page.navbar_active == "icons" %} active{% endif %}"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> - <i class="fa-icon fa-icon-caret-down"></i> + <i class="fa fa-caret-down"></i> </a> <ul class="dropdown-menu pull-right"> - <li><a href="{{ page.relative_path }}icons/"><i class="fa-icon fa-icon-flag fa-icon-fixed-width"></i> Icons</a></li> + <li><a href="{{ page.relative_path }}icons/"><i class="fa fa-flag fa-fixed-width"></i> Icons</a></li> <li class="divider"></li> - <li><a href="{{ page.relative_path }}icons/#new"><i class="fa-icon fa-icon-rub fa-icon-fixed-width"></i> New Icons in {{ site.fontawesome.minor_version }}</a></li> - <li><a href="{{ page.relative_path }}icons/#web-application"><i class="fa-icon fa-icon-camera-retro fa-icon-fixed-width"></i> Web Application Icons</a></li> - <li><a href="{{ page.relative_path }}icons/#currency"><i class="fa-icon fa-icon-won fa-icon-fixed-width"></i> Currency Icons</a></li> - <li><a href="{{ page.relative_path }}icons/#text-editor"><i class="fa-icon fa-icon-file-text-alt fa-icon-fixed-width"></i> Text Editor Icons</a></li> - <li><a href="{{ page.relative_path }}icons/#directional"><i class="fa-icon fa-icon-hand-alt-right fa-icon-fixed-width"></i> Directional Icons</a></li> - <li><a href="{{ page.relative_path }}icons/#video-player"><i class="fa-icon fa-icon-play-circle fa-icon-fixed-width"></i> Video Player Icons</a></li> - <li><a href="{{ page.relative_path }}icons/#brand"><i class="fa-icon fa-icon-github fa-icon-fixed-width"></i> Brand Icons</a></li> - <li><a href="{{ page.relative_path }}icons/#medical"><i class="fa-icon fa-icon-medkit fa-icon-fixed-width"></i> Medical Icons</a></li> + <li><a href="{{ page.relative_path }}icons/#new"><i class="fa fa-rub fa-fixed-width"></i> New Icons in {{ site.fontawesome.minor_version }}</a></li> + <li><a href="{{ page.relative_path }}icons/#web-application"><i class="fa fa-camera-retro fa-fixed-width"></i> Web Application Icons</a></li> + <li><a href="{{ page.relative_path }}icons/#currency"><i class="fa fa-won fa-fixed-width"></i> Currency Icons</a></li> + <li><a href="{{ page.relative_path }}icons/#text-editor"><i class="fa fa-file-text-alt fa-fixed-width"></i> Text Editor Icons</a></li> + <li><a href="{{ page.relative_path }}icons/#directional"><i class="fa fa-hand-alt-right fa-fixed-width"></i> Directional Icons</a></li> + <li><a href="{{ page.relative_path }}icons/#video-player"><i class="fa fa-play-circle fa-fixed-width"></i> Video Player Icons</a></li> + <li><a href="{{ page.relative_path }}icons/#brand"><i class="fa fa-github fa-fixed-width"></i> Brand Icons</a></li> + <li><a href="{{ page.relative_path }}icons/#medical"><i class="fa fa-medkit fa-fixed-width"></i> Medical Icons</a></li> </ul> </li> <li class="dropdown-split-left{% if page.navbar_active == "examples" %} active{% endif %}"><a href="{{ page.relative_path }}examples/">Examples</a></li> <li class="dropdown dropdown-split-right hidden-xs{% if page.navbar_active == "examples" %} active{% endif %}"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> - <i class="fa-icon fa-icon-caret-down"></i> + <i class="fa fa-caret-down"></i> </a> <ul class="dropdown-menu pull-right"> <li><a href="{{ page.relative_path }}examples/">Examples</a></li> @@ -55,12 +61,6 @@ <li><a href="{{ page.relative_path }}examples/#custom">Custom CSS</a></li> </ul> </li> - <li class="hidden-sm{% if page.navbar_active == "whats-new" %} active{% endif %}"> - <a href="{{ page.relative_path }}whats-new/">What's New</a> - </li> - <li class="hidden-xs hidden-md hidden-lg{% if page.navbar_active == "whats-new" %} active{% endif %}"> - <a href="{{ page.relative_path }}whats-new/">New</a> - </li> <li{% if page.navbar_active == "community" %} class="active"{% endif %}><a href="{{ page.relative_path }}community/">Community</a></li> <li{% if page.navbar_active == "license" %} class="active"{% endif %}><a href="{{ page.relative_path }}license/">License</a></li> </ul> diff --git a/src/_includes/new-features.html b/src/_includes/new-features.html index f4cb00f87..813ed14a5 100644 --- a/src/_includes/new-features.html +++ b/src/_includes/new-features.html @@ -10,27 +10,27 @@ <section id="whats-new" class="feature-list"> <div class="row"> <div class="col-md-4 col-sm-6"> - <h4><i class="fa-icon fa-icon-file-text-alt"></i> Completely Rewritten</h4> + <h4><i class="fa fa-file-text-alt"></i> Completely Rewritten</h4> Everything re-written from the ground up for speed and simplicity. </div> <div class="col-md-4 col-sm-6"> - <h4><i class="fa-icon fa-icon-fighter-jet"></i> CSS Best Practices</h4> + <h4><i class="fa fa-fighter-jet"></i> CSS Best Practices</h4> New icon base class allows simpler CSS, faster rendering, and easier control. </div> <div class="col-md-4 col-sm-6"> - <h4><i class="fa-icon fa-icon-terminal"></i> New Icon Names</h4> + <h4><i class="fa fa-terminal"></i> New Icon Names</h4> Icons have been renamed to improve consistency and predictability. </div> <div class="col-md-4 col-sm-6"> - <h4><i class="fa-icon fa-icon-thumbs-up-alt"></i> Bootstrap 3</h4> + <h4><i class="fa fa-thumbs-up-alt"></i> Bootstrap 3</h4> Font Awesome {{ site.fontawesome.minor_version }} is fully tested and compatible with Bootstrap 3. </div> <div class="col-md-4 col-sm-6"> - <h4><i class="fa-icon fa-icon-code"></i> Better Compatibility</h4> + <h4><i class="fa fa-code"></i> Better Compatibility</h4> Font Awesome is now more compatible with all web frameworks, including Foundation. </div> <div class="col-md-4 col-sm-6"> - <h4><i class="fa-icon fa-icon-rub"></i> {{ icons | version:site.fontawesome.minor_version | size }} New Icons in {{ site.fontawesome.minor_version }}</h4> + <h4><i class="fa fa-rub"></i> {{ icons | version:site.fontawesome.minor_version | size }} New Icons in {{ site.fontawesome.minor_version }}</h4> Requested by the active community on the <a href="{{ site.fontawesome.github.url }}">Font Awesome GitHub project</a>. </div> </div> diff --git a/src/_includes/new-naming.html b/src/_includes/new-naming.html index 4a69ba6f3..2e16c6c86 100644 --- a/src/_includes/new-naming.html +++ b/src/_includes/new-naming.html @@ -1,6 +1,6 @@ <section id="new-naming"> <h2 class="page-header">New Naming Conventions in {{ site.fontawesome.minor_version }}</h2> - <p class="lead text-center alert alert-success">fa-icon-[name]-[shape]-[alt]-[direction]</p> + <p class="lead text-center alert alert-success">fa-[name]-[shape]-[alt]-[direction]</p> <p> A desire for better icon naming <strong>consistency</strong> and <strong>predictability</strong> are at the heart of the changes in naming conventions. Once you know the name of the base icon shape, you should be able to predict @@ -8,110 +8,110 @@ </p> <div class="row"> <div class="col-md-4 col-sm-6"> - <h4 class="margin-bottom-sm">fa-icon-*</h4> + <h4 class="margin-bottom-sm">fa-*</h4> <p class="margin-bottom-sm">Solid icons as the base variant</p> - <ul class="fa-icon-ul padding-left-sm"> + <ul class="fa-ul padding-left-sm"> <li> - <i class="fa-icon fa-icon-bookmark fa-icon-li"></i> - fa-icon-bookmark + <i class="fa fa-bookmark fa-li"></i> + fa-bookmark </li> <li> - <i class="fa-icon fa-icon-comment fa-icon-li"></i> - fa-icon-comment + <i class="fa fa-comment fa-li"></i> + fa-comment </li> <li> - <i class="fa-icon fa-icon-folder fa-icon-li"></i> - fa-icon-folder + <i class="fa fa-folder fa-li"></i> + fa-folder </li> </ul> </div> <div class="col-md-4 col-sm-6"> <h4 class="margin-bottom-sm">*-alt</h4> <p class="margin-bottom-sm">Outlined version of previous modifier</p> - <ul class="fa-icon-ul padding-left-sm"> + <ul class="fa-ul padding-left-sm"> <li> - <i class="fa-icon fa-icon-bookmark-alt fa-icon-li"></i> - fa-icon-bookmark-alt + <i class="fa fa-bookmark-alt fa-li"></i> + fa-bookmark-alt </li> <li> - <i class="fa-icon fa-icon-comment-alt fa-icon-li"></i> - fa-icon-comment-alt + <i class="fa fa-comment-alt fa-li"></i> + fa-comment-alt </li> <li> - <i class="fa-icon fa-icon-folder-alt fa-icon-li"></i> - fa-icon-folder-alt + <i class="fa fa-folder-alt fa-li"></i> + fa-folder-alt </li> </ul> </div> <div class="col-md-4 col-sm-6"> <h4 class="margin-bottom-sm">*-circle</h4> <p class="margin-bottom-sm">Circle under previous modifier</p> - <ul class="fa-icon-ul padding-left-sm"> + <ul class="fa-ul padding-left-sm"> <li> - <i class="fa-icon fa-icon-check-circle fa-icon-li"></i> - fa-icon-check-circle + <i class="fa fa-check-circle fa-li"></i> + fa-check-circle </li> <li> - <i class="fa-icon fa-icon-exclamation-circle fa-icon-li"></i> - fa-icon-exclamation-circle + <i class="fa fa-exclamation-circle fa-li"></i> + fa-exclamation-circle </li> <li> - <i class="fa-icon fa-icon-plus-circle fa-icon-li"></i> - fa-icon-plus-circle + <i class="fa fa-plus-circle fa-li"></i> + fa-plus-circle </li> </ul> </div> <div class="col-md-4 col-sm-6"> <h4 class="margin-bottom-sm">*-square</h4> <p class="margin-bottom-sm">Square under previous modifier</p> - <ul class="fa-icon-ul padding-left-sm"> + <ul class="fa-ul padding-left-sm"> <li> - <i class="fa-icon fa-icon-check-square fa-icon-li"></i> - fa-icon-check-square + <i class="fa fa-check-square fa-li"></i> + fa-check-square </li> <li> - <i class="fa-icon fa-icon-twitter-square fa-icon-li"></i> - fa-icon-twitter-square + <i class="fa fa-twitter-square fa-li"></i> + fa-twitter-square </li> <li> - <i class="fa-icon fa-icon-plus-square fa-icon-li"></i> - fa-icon-plus-square + <i class="fa fa-plus-square fa-li"></i> + fa-plus-square </li> </ul> </div> <div class="col-md-4 col-sm-6"> <h4 class="margin-bottom-sm">*-right, *-up, etc.</h4> <p class="margin-bottom-sm">Directional modifier always at the end</p> - <ul class="fa-icon-ul padding-left-sm"> + <ul class="fa-ul padding-left-sm"> <li> - <i class="fa-icon fa-icon-arrow-right fa-icon-li"></i> - fa-icon-arrow-right + <i class="fa fa-arrow-right fa-li"></i> + fa-arrow-right </li> <li> - <i class="fa-icon fa-icon-arrow-circle-right fa-icon-li"></i> - fa-icon-arrow-circle-right + <i class="fa fa-arrow-circle-right fa-li"></i> + fa-arrow-circle-right </li> <li> - <i class="fa-icon fa-icon-angle-double-right fa-icon-li"></i> - fa-icon-angle-double-right + <i class="fa fa-angle-double-right fa-li"></i> + fa-angle-double-right </li> </ul> </div> <div class="col-md-4 col-sm-6"> <h4 class="margin-bottom-sm">Combine 'em up...</h4> <p class="margin-bottom-sm">Consistent when strung together</p> - <ul class="fa-icon-ul padding-left-sm"> + <ul class="fa-ul padding-left-sm"> <li> - <i class="fa-icon fa-icon-arrow-circle-alt-right fa-icon-li"></i> - fa-icon-arrow-circle-alt-right + <i class="fa fa-arrow-circle-alt-right fa-li"></i> + fa-arrow-circle-alt-right </li> <li> - <i class="fa-icon fa-icon-caret-square-alt-right fa-icon-li"></i> - fa-icon-caret-square-alt-right + <i class="fa fa-caret-square-alt-right fa-li"></i> + fa-caret-square-alt-right </li> <li> - <i class="fa-icon fa-icon-hand-alt-right fa-icon-li"></i> - fa-icon-hand-alt-right + <i class="fa fa-hand-alt-right fa-li"></i> + fa-hand-alt-right </li> </ul> </div> diff --git a/src/_includes/tests/rotated-flipped-inside-anchor.html b/src/_includes/tests/rotated-flipped-inside-anchor.html index 3dfc80fb1..111f1a37a 100644 --- a/src/_includes/tests/rotated-flipped-inside-anchor.html +++ b/src/_includes/tests/rotated-flipped-inside-anchor.html @@ -1,6 +1,6 @@ -<a href="#"><i class="fa-icon fa-icon-flag"></i> normal</a><br> -<a href="#"><i class="fa-icon fa-icon-flag fa-icon-rotate-90"></i> fa-icon-rotate-90</a><br> -<a href="#"><i class="fa-icon fa-icon-flag fa-icon-rotate-180"></i> fa-icon-rotate-180</a><br> -<a href="#"><i class="fa-icon fa-icon-flag fa-icon-rotate-270"></i> fa-icon-rotate-270</a><br> -<a href="#"><i class="fa-icon fa-icon-flag fa-icon-flip-horizontal"></i> fa-icon-flip-horizontal</a><br> -<a href="#"><i class="fa-icon fa-icon-flag fa-icon-flip-vertical"></i> fa-icon-flip-vertical</a> +<a href="#"><i class="fa fa-flag"></i> normal</a><br> +<a href="#"><i class="fa fa-flag fa-rotate-90"></i> fa-rotate-90</a><br> +<a href="#"><i class="fa fa-flag fa-rotate-180"></i> fa-rotate-180</a><br> +<a href="#"><i class="fa fa-flag fa-rotate-270"></i> fa-rotate-270</a><br> +<a href="#"><i class="fa fa-flag fa-flip-horizontal"></i> fa-flip-horizontal</a><br> +<a href="#"><i class="fa fa-flag fa-flip-vertical"></i> fa-flip-vertical</a> diff --git a/src/_includes/tests/rotated-flipped-inside-btn.html b/src/_includes/tests/rotated-flipped-inside-btn.html index 3c5f63b29..fc0d78829 100644 --- a/src/_includes/tests/rotated-flipped-inside-btn.html +++ b/src/_includes/tests/rotated-flipped-inside-btn.html @@ -1,6 +1,6 @@ -<a class="btn btn-default" href="#"><i class="fa-icon fa-icon-flag"></i> normal</a><br> -<a class="btn btn-default" href="#"><i class="fa-icon fa-icon-flag fa-icon-rotate-90"></i> fa-icon-rotate-90</a><br> -<a class="btn btn-default" href="#"><i class="fa-icon fa-icon-flag fa-icon-rotate-180"></i> fa-icon-rotate-180</a><br> -<a class="btn btn-default" href="#"><i class="fa-icon fa-icon-flag fa-icon-rotate-270"></i> fa-icon-rotate-270</a><br> -<a class="btn btn-default" href="#"><i class="fa-icon fa-icon-flag fa-icon-flip-horizontal"></i> fa-icon-flip-horizontal</a><br> -<a class="btn btn-default" href="#"><i class="fa-icon fa-icon-flag fa-icon-flip-vertical"></i> fa-icon-flip-vertical</a> +<a class="btn btn-default" href="#"><i class="fa fa-flag"></i> normal</a><br> +<a class="btn btn-default" href="#"><i class="fa fa-flag fa-rotate-90"></i> fa-rotate-90</a><br> +<a class="btn btn-default" href="#"><i class="fa fa-flag fa-rotate-180"></i> fa-rotate-180</a><br> +<a class="btn btn-default" href="#"><i class="fa fa-flag fa-rotate-270"></i> fa-rotate-270</a><br> +<a class="btn btn-default" href="#"><i class="fa fa-flag fa-flip-horizontal"></i> fa-flip-horizontal</a><br> +<a class="btn btn-default" href="#"><i class="fa fa-flag fa-flip-vertical"></i> fa-flip-vertical</a> diff --git a/src/_includes/tests/rotated-flipped.html b/src/_includes/tests/rotated-flipped.html index 4714941c8..13a83f4b6 100644 --- a/src/_includes/tests/rotated-flipped.html +++ b/src/_includes/tests/rotated-flipped.html @@ -1,6 +1,6 @@ -<i class="fa-icon fa-icon-flag"></i> normal<br> -<i class="fa-icon fa-icon-flag fa-icon-rotate-90"></i> fa-icon-rotate-90<br> -<i class="fa-icon fa-icon-flag fa-icon-rotate-180"></i> fa-icon-rotate-180<br> -<i class="fa-icon fa-icon-flag fa-icon-rotate-270"></i> fa-icon-rotate-270<br> -<i class="fa-icon fa-icon-flag fa-icon-flip-horizontal"></i> fa-icon-flip-horizontal<br> -<i class="fa-icon fa-icon-flag fa-icon-flip-vertical"></i> fa-icon-flip-vertical +<i class="fa fa-flag"></i> normal<br> +<i class="fa fa-flag fa-rotate-90"></i> fa-rotate-90<br> +<i class="fa fa-flag fa-rotate-180"></i> fa-rotate-180<br> +<i class="fa fa-flag fa-rotate-270"></i> fa-rotate-270<br> +<i class="fa fa-flag fa-flip-horizontal"></i> fa-flip-horizontal<br> +<i class="fa fa-flag fa-flip-vertical"></i> fa-flip-vertical diff --git a/src/_includes/tests/stacked-inside-anchor.html b/src/_includes/tests/stacked-inside-anchor.html index 94e51c2b6..d8f167f2c 100644 --- a/src/_includes/tests/stacked-inside-anchor.html +++ b/src/_includes/tests/stacked-inside-anchor.html @@ -1,68 +1,68 @@ <p> <a href="#"> - <span class="fa-icon-stack"> - <i class="fa-icon fa-icon-square fa-icon-stack-base"></i> - <i class="fa-icon fa-icon-twitter fa-icon-light"></i> + <span class="fa-stack"> + <i class="fa fa-square fa-stack-base"></i> + <i class="fa fa-twitter fa-light"></i> </span> Twitter Icon </a> <a href="#"> - <span class="fa-icon-stack"> - <i class="fa-icon fa-icon-square fa-icon-stack-base"></i> - <i class="fa-icon fa-icon-facebook fa-icon-light"></i> + <span class="fa-stack"> + <i class="fa fa-square fa-stack-base"></i> + <i class="fa fa-facebook fa-light"></i> </span> Facebook Icon </a> <a href="#"> - <span class="fa-icon-stack"> - <i class="fa-icon fa-icon-square fa-icon-stack-base"></i> - <i class="fa-icon fa-icon-github fa-icon-light"></i> + <span class="fa-stack"> + <i class="fa fa-square fa-stack-base"></i> + <i class="fa fa-github fa-light"></i> </span> GitHub Icon </a> </p> <p> <a href="#"> - <span class="fa-icon-stack"> - <i class="fa-icon fa-icon-circle fa-icon-stack-base"></i> - <i class="fa-icon fa-icon-twitter fa-icon-light"></i> + <span class="fa-stack"> + <i class="fa fa-circle fa-stack-base"></i> + <i class="fa fa-twitter fa-light"></i> </span> Twitter Icon </a> <a href="#"> - <span class="fa-icon-stack"> - <i class="fa-icon fa-icon-circle fa-icon-stack-base"></i> - <i class="fa-icon fa-icon-facebook fa-icon-light"></i> + <span class="fa-stack"> + <i class="fa fa-circle fa-stack-base"></i> + <i class="fa fa-facebook fa-light"></i> </span> Facebook Icon </a> <a href="#"> - <span class="fa-icon-stack"> - <i class="fa-icon fa-icon-circle fa-icon-stack-base"></i> - <i class="fa-icon fa-icon-github fa-icon-light"></i> + <span class="fa-stack"> + <i class="fa fa-circle fa-stack-base"></i> + <i class="fa fa-github fa-light"></i> </span> GitHub Icon </a> </p> <p> <a href="#"> - <span class="fa-icon-stack"> - <i class="fa-icon fa-icon-circle-alt fa-icon-stack-base"></i> - <i class="fa-icon fa-icon-twitter"></i> + <span class="fa-stack"> + <i class="fa fa-circle-alt fa-stack-base"></i> + <i class="fa fa-twitter"></i> </span> Twitter Icon </a> <a href="#"> - <span class="fa-icon-stack"> - <i class="fa-icon fa-icon-circle-alt fa-icon-stack-base"></i> - <i class="fa-icon fa-icon-facebook"></i> + <span class="fa-stack"> + <i class="fa fa-circle-alt fa-stack-base"></i> + <i class="fa fa-facebook"></i> </span> Facebook Icon </a> <a href="#"> - <span class="fa-icon-stack"> - <i class="fa-icon fa-icon-circle-alt fa-icon-stack-base"></i> - <i class="fa-icon fa-icon-github"></i> + <span class="fa-stack"> + <i class="fa fa-circle-alt fa-stack-base"></i> + <i class="fa fa-github"></i> </span> GitHub Icon </a> diff --git a/src/_includes/tests/stacked.html b/src/_includes/tests/stacked.html index f699a3ee5..9eef6d5fa 100644 --- a/src/_includes/tests/stacked.html +++ b/src/_includes/tests/stacked.html @@ -1,51 +1,51 @@ <p> - <span class="fa-icon-stack"> - <i class="fa-icon fa-icon-square fa-icon-stack-base"></i> - <i class="fa-icon fa-icon-twitter fa-icon-light"></i> + <span class="fa-stack"> + <i class="fa fa-square fa-stack-base"></i> + <i class="fa fa-twitter fa-light"></i> </span> Twitter Icon - <span class="fa-icon-stack"> - <i class="fa-icon fa-icon-square fa-icon-stack-base"></i> - <i class="fa-icon fa-icon-facebook fa-icon-light"></i> + <span class="fa-stack"> + <i class="fa fa-square fa-stack-base"></i> + <i class="fa fa-facebook fa-light"></i> </span> Facebook Icon - <span class="fa-icon-stack"> - <i class="fa-icon fa-icon-square fa-icon-stack-base"></i> - <i class="fa-icon fa-icon-github fa-icon-light"></i> + <span class="fa-stack"> + <i class="fa fa-square fa-stack-base"></i> + <i class="fa fa-github fa-light"></i> </span> GitHub Icon </p> <p> - <span class="fa-icon-stack"> - <i class="fa-icon fa-icon-circle fa-icon-stack-base"></i> - <i class="fa-icon fa-icon-twitter fa-icon-light"></i> + <span class="fa-stack"> + <i class="fa fa-circle fa-stack-base"></i> + <i class="fa fa-twitter fa-light"></i> </span> Twitter Icon - <span class="fa-icon-stack"> - <i class="fa-icon fa-icon-circle fa-icon-stack-base"></i> - <i class="fa-icon fa-icon-facebook fa-icon-light"></i> + <span class="fa-stack"> + <i class="fa fa-circle fa-stack-base"></i> + <i class="fa fa-facebook fa-light"></i> </span> Facebook Icon - <span class="fa-icon-stack"> - <i class="fa-icon fa-icon-circle fa-icon-stack-base"></i> - <i class="fa-icon fa-icon-github fa-icon-light"></i> + <span class="fa-stack"> + <i class="fa fa-circle fa-stack-base"></i> + <i class="fa fa-github fa-light"></i> </span> GitHub Icon </p> <p> - <span class="fa-icon-stack"> - <i class="fa-icon fa-icon-circle-alt fa-icon-stack-base"></i> - <i class="fa-icon fa-icon-twitter"></i> + <span class="fa-stack"> + <i class="fa fa-circle-alt fa-stack-base"></i> + <i class="fa fa-twitter"></i> </span> Twitter Icon - <span class="fa-icon-stack"> - <i class="fa-icon fa-icon-circle-alt fa-icon-stack-base"></i> - <i class="fa-icon fa-icon-facebook"></i> + <span class="fa-stack"> + <i class="fa fa-circle-alt fa-stack-base"></i> + <i class="fa fa-facebook"></i> </span> Facebook Icon - <span class="fa-icon-stack"> - <i class="fa-icon fa-icon-circle-alt fa-icon-stack-base"></i> - <i class="fa-icon fa-icon-github"></i> + <span class="fa-stack"> + <i class="fa fa-circle-alt fa-stack-base"></i> + <i class="fa fa-github"></i> </span> GitHub Icon </p>
\ No newline at end of file diff --git a/src/_includes/thanks-to.html b/src/_includes/thanks-to.html index 1ebbb3b62..b442a62f8 100644 --- a/src/_includes/thanks-to.html +++ b/src/_includes/thanks-to.html @@ -17,7 +17,7 @@ </div> <div class="col-md-4 col-sm-4"> <p> - Thanks to <a href="http://maxcdn.com"><i class="fa-icon fa-icon-maxcdn"> </i>MaxCDN</a> for providing the excellent + Thanks to <a href="http://maxcdn.com"><i class="fa fa-maxcdn"> </i>MaxCDN</a> for providing the excellent <a href="http://www.bootstrapcdn.com/#tab_fontawesome">BootstrapCDN</a>, the fastest and easiest way to <a href="{{ page.relative_path }}get-started/#bootstrapcdn">get started</a> with Font Awesome. </p> diff --git a/src/_includes/why.html b/src/_includes/why.html index c0e506f39..0a837c221 100644 --- a/src/_includes/why.html +++ b/src/_includes/why.html @@ -1,36 +1,36 @@ <section id="why" class="feature-list"> <div class="row"> <div class="col-md-4 col-sm-6"> - <h4><i class="fa-icon fa-icon-flag"></i> One Font, {{ icons | size }} Icons</h4> + <h4><i class="fa fa-flag"></i> One Font, {{ icons | size }} Icons</h4> In a single collection, Font Awesome is a pictographic language of web-related actions. </div> <div class="col-md-4 col-sm-6"> - <h4><i class="fa-icon fa-icon-pencil"></i> CSS Control</h4> + <h4><i class="fa fa-pencil"></i> CSS Control</h4> Easily style icon color, size, shadow, and anything that's possible with CSS. </div> <div class="col-md-4 col-sm-6"> - <h4><i class="fa-icon fa-icon-fullscreen"></i> Infinite Scalability</h4> + <h4><i class="fa fa-fullscreen"></i> Infinite Scalability</h4> Scalable vector graphics means every icon looks awesome at any size. </div> <div class="col-md-4 col-sm-6"> - <h4><i class="fa-icon fa-icon-microphone"></i> Free, as in Speech</h4> + <h4><i class="fa fa-microphone"></i> Free, as in Speech</h4> Font Awesome is completely free for commercial use. Check out the <a href="{{ page.relative_path }}license/">license</a>. </div> <div class="col-md-4 col-sm-6"> - <h4><i class="fa-icon fa-icon-eye"></i> Perfect on Retina Displays</h4> + <h4><i class="fa fa-eye"></i> Perfect on Retina Displays</h4> Font Awesome icons are vectors, which mean they're gorgeous on high-resolution displays. </div> <div class="col-md-4 col-sm-6"> - <h4><i class="fa-icon fa-icon-thumbs-up-alt"></i> Made for Bootstrap</h4> + <h4><i class="fa fa-thumbs-up-alt"></i> Made for Bootstrap</h4> Designed from scratch to be fully compatible with <a href="{{ site.bootstrap.url }}">Bootstrap {{ site.bootstrap.version }}</a>. </div> <div class="col-md-4 col-sm-6"> - <h4><i class="fa-icon fa-icon-desktop"></i> Desktop Friendly</h4> + <h4><i class="fa fa-desktop"></i> Desktop Friendly</h4> To use on the desktop or for a complete set of vectors, check out the <a href="{{ page.relative_path }}cheatsheet/">cheatsheet</a>. </div> <div class="col-md-4 col-sm-6"> - <h4><i class="fa-icon fa-icon-search"></i> Screen Reader Compatible</h4> + <h4><i class="fa fa-search"></i> Screen Reader Compatible</h4> Font Awesome won't trip up screen readers, unlike other icon fonts. </div> </div> diff --git a/src/_layouts/icon.html b/src/_layouts/icon.html index f4e106b84..6e5bf21ca 100644 --- a/src/_layouts/icon.html +++ b/src/_layouts/icon.html @@ -6,19 +6,19 @@ relative_path: ../../ <div class="jumbotron jumbotron-icon"> <div class="container"> <div class="info-icons"> - <i class="fa-icon fa-icon-{{ page.icon.id }} fa-icon-6"></i> + <i class="fa fa-{{ page.icon.id }} fa-6"></i> <span class="hide-xs"> - <i class="fa-icon fa-icon-{{ page.icon.id }} fa-icon-5"></i> - <span class="hide-sm"><i class="fa-icon fa-icon-{{ page.icon.id }} fa-icon-4"></i> </span> - <i class="fa-icon fa-icon-{{ page.icon.id }} fa-icon-3"></i> - <i class="fa-icon fa-icon-{{ page.icon.id }} fa-icon-2"></i> + <i class="fa fa-{{ page.icon.id }} fa-5"></i> + <span class="hide-sm"><i class="fa fa-{{ page.icon.id }} fa-4"></i> </span> + <i class="fa fa-{{ page.icon.id }} fa-3"></i> + <i class="fa fa-{{ page.icon.id }} fa-2"></i> </span> - <i class="fa-icon fa-icon-{{ page.icon.id }} fa-icon-1"></i> + <i class="fa fa-{{ page.icon.id }} fa-1"></i> </div> <h1 class="info-class"> - fa-icon-{{ page.icon.id }} + fa-{{ page.icon.id }} <small> - <i class="fa-icon fa-icon-{{ page.icon.id }}"></i> · + <i class="fa fa-{{ page.icon.id }}"></i> · Unicode: <span class="upper">{{ page.icon.unicode }}</span> · Created: v{{ page.icon.created }} · Categories: @@ -29,7 +29,7 @@ relative_path: ../../ {% if icon_alias_count > 0 %} · Aliases: {% for alias in page.icon.aliases %} - fa-icon-{{ alias }}{% unless forloop.last %},{% endunless %} + fa-{{ alias }}{% unless forloop.last %},{% endunless %} {% endfor %} {% endif %} </small> @@ -45,14 +45,14 @@ relative_path: ../../ <p>After you get <a href="{{ page.relative_path }}get-started/">up and running</a>, you can place Font Awesome icons just about anywhere with the <code><i></code> tag:</p> <div class="well well-transparent"> <div style="font-size: 24px; line-height: 1.5em;"> - <i class="fa-icon fa-icon-{{ page.icon.id }}"></i> fa-icon-{{ page.icon.id }} + <i class="fa fa-{{ page.icon.id }}"></i> fa-{{ page.icon.id }} </div> </div> {% highlight html %} -<i class="fa-icon fa-icon-{{ page.icon.id }}"></i> fa-icon-{{ page.icon.id }} +<i class="fa fa-{{ page.icon.id }}"></i> fa-{{ page.icon.id }} {% endhighlight %} <br> - <div class="lead"><i class="fa-icon fa-icon-info-sign"></i> Looking for more? Check out the <a href="{{ page.relative_path }}examples/">examples</a>.</div> + <div class="lead"><i class="fa fa-info-sign"></i> Looking for more? Check out the <a href="{{ page.relative_path }}examples/">examples</a>.</div> </div> <div class="col-md-3 col-sm-3"> <div class="info-ad">{% include ads/carbon-light-vertical.html %}</div> diff --git a/src/assets/font-awesome/less/variables.less b/src/assets/font-awesome/less/variables.less index 91b148d89..cca967804 100644 --- a/src/assets/font-awesome/less/variables.less +++ b/src/assets/font-awesome/less/variables.less @@ -3,9 +3,9 @@ // Variables // -------------------------- -@fa-css-prefix: {{ site.fontawesome.css_prefix }}; @fa-font-path: "../fonts"; //@fa-font-path: "//netdna.bootstrapcdn.com/font-awesome/{{ site.fontawesome.version}}/font"; // for referencing Bootstrap CDN font files directly +@fa-css-prefix: {{ site.fontawesome.css_prefix }}; @fa-version: "{{ site.fontawesome.version }}"; @fa-border-color: #eee; @fa-icon-muted: #eee; diff --git a/src/assets/font-awesome/scss/_variables.scss b/src/assets/font-awesome/scss/_variables.scss index 2c173329b..628859b3e 100644 --- a/src/assets/font-awesome/scss/_variables.scss +++ b/src/assets/font-awesome/scss/_variables.scss @@ -3,9 +3,9 @@ // Variables // -------------------------- -$fa-css-prefix: {{ site.fontawesome.css_prefix }}; $fa-font-path: "../fonts" !default; //$fa-font-path: "//netdna.bootstrapcdn.com/font-awesome/{{ site.fontawesome.version}}/font" !default; // for referencing Bootstrap CDN font files directly +$fa-css-prefix: {{ site.fontawesome.css_prefix }}; $fa-version: "{{ site.fontawesome.version }}" !default; $fa-border-color: #eee !default; $fa-icon-muted: #eee !default; diff --git a/src/assets/less/site/bootstrap/jumbotron.less b/src/assets/less/site/bootstrap/jumbotron.less index 0799b28fe..2cf28bb50 100644 --- a/src/assets/less/site/bootstrap/jumbotron.less +++ b/src/assets/less/site/bootstrap/jumbotron.less @@ -58,11 +58,11 @@ dd { margin-left: @component-offset-horizontal - 85; } } } - .fa-icon-2 { font-size: 2em; } - .fa-icon-3 { font-size: 4em; } - .fa-icon-4 { font-size: 7em; } - .fa-icon-5 { font-size: 12em; } - .fa-icon-6 { font-size: 20em; } + .fa-2 { font-size: 2em; } + .fa-3 { font-size: 4em; } + .fa-4 { font-size: 7em; } + .fa-5 { font-size: 12em; } + .fa-6 { font-size: 20em; } - .fa-icon-1, .fa-icon-2, .fa-icon-3, .fa-icon-4, .fa-icon-5, .fa-icon-6 { margin-right: 1/14em; } + .fa-1, .fa-2, .fa-3, .fa-4, .fa-5, .fa-6 { margin-right: 1/14em; } } diff --git a/src/assets/less/site/bootstrap/navbar.less b/src/assets/less/site/bootstrap/navbar.less index 4e0104bc0..40db1ddf0 100644 --- a/src/assets/less/site/bootstrap/navbar.less +++ b/src/assets/less/site/bootstrap/navbar.less @@ -6,7 +6,7 @@ font-family: @font-family-serif; font-weight: 300; font-size: 20px; - .fa-icon-flag { padding-right: 3px; } + .fa-flag { padding-right: 3px; } } .navbar-nav > li > a { padding: 11px 10px 9px; } diff --git a/src/assets/less/site/feature-list.less b/src/assets/less/site/feature-list.less index f1f77ab9f..e8d4fefc7 100644 --- a/src/assets/less/site/feature-list.less +++ b/src/assets/less/site/feature-list.less @@ -1,7 +1,7 @@ .feature-list { .col-md-4 { margin-bottom: 22px; } h4 { - .fa-icon:before { + .fa:before { vertical-align: -10%; font-size: 28px; display: inline-block; diff --git a/src/assets/less/site/fontawesome-icon-list.less b/src/assets/less/site/fontawesome-icon-list.less index 27c3471ae..adc4f6f99 100644 --- a/src/assets/less/site/fontawesome-icon-list.less +++ b/src/assets/less/site/fontawesome-icon-list.less @@ -9,7 +9,7 @@ padding-left: 10px; border-radius: @border-radius-base; - .fa-icon { + .fa { width: 32px; font-size: 14px; display: inline-block; @@ -21,7 +21,7 @@ background-color: @fa-green; color: @jumbotron-color; text-decoration: none; - .fa-icon { + .fa { font-size: 28px; vertical-align: -6px; } diff --git a/src/assets/less/site/responsive/screen-xs.less b/src/assets/less/site/responsive/screen-xs.less index fa692b461..df6d92667 100644 --- a/src/assets/less/site/responsive/screen-xs.less +++ b/src/assets/less/site/responsive/screen-xs.less @@ -34,8 +34,8 @@ } .jumbotron-icon { - .fa-icon-1, .fa-icon-2, .fa-icon-3, .fa-icon-4, .fa-icon-5, .fa-icon-6 { margin-right: 0; } - .fa-icon-6 { font-size: 16em; } + .fa-1, .fa-2, .fa-3, .fa-4, .fa-5, .fa-6 { margin-right: 0; } + .fa-6 { font-size: 16em; } h1 small { display: block; margin-top: 15px; diff --git a/src/cheatsheet.html b/src/cheatsheet.html index f6629f4ab..c0f634bd8 100644 --- a/src/cheatsheet.html +++ b/src/cheatsheet.html @@ -3,7 +3,7 @@ layout: base title: Font Awesome Cheatsheet relative_path: ../ --- -{% capture jumbotron_h1 %}<i class="fa-icon fa-icon-list-ul"></i> Cheatsheet{% endcapture %} +{% capture jumbotron_h1 %}<i class="fa fa-list-ul"></i> Cheatsheet{% endcapture %} {% capture jumbotron_p %}The complete Font Awesome {{ site.fontawesome.version }} icon reference{% endcapture %} {% include jumbotron.html %} @@ -23,8 +23,8 @@ relative_path: ../ <div class="row"> {% for icon in icons %} <div class="col-md-4 col-sm-6"> - <i class="fa-icon fa-icon-fixed-width">&#x{{ icon.unicode }}</i> - fa-icon-{{ icon.id }} + <i class="fa fa-fixed-width">&#x{{ icon.unicode }}</i> + fa-{{ icon.id }} <span class="muted">(&#x{{ icon.unicode }};)</span> </div> {% endfor %} diff --git a/src/community.html b/src/community.html index 0ef1e0060..abc8c3520 100644 --- a/src/community.html +++ b/src/community.html @@ -4,7 +4,7 @@ title: The Font Awesome Community navbar_active: community relative_path: ../ --- -{% capture jumbotron_h1 %}<i class="fa-icon fa-icon-thumbs-up-alt"></i> Community{% endcapture %} +{% capture jumbotron_h1 %}<i class="fa fa-thumbs-up-alt"></i> Community{% endcapture %} {% capture jumbotron_p %}Lots of ways to get involved with Font Awesome{% endcapture %} {% include jumbotron.html %} diff --git a/src/examples.html b/src/examples.html index ac88af582..41f2e8235 100644 --- a/src/examples.html +++ b/src/examples.html @@ -4,7 +4,7 @@ title: Font Awesome Examples navbar_active: examples relative_path: ../ --- -{% capture jumbotron_h1 %}<i class="fa-icon fa-icon-magic"></i> Examples{% endcapture %} +{% capture jumbotron_h1 %}<i class="fa fa-magic"></i> Examples{% endcapture %} {% capture jumbotron_p %}Lots of easy ways to use Font Awesome{% endcapture %} {% include jumbotron.html %} diff --git a/src/get-started.html b/src/get-started.html index dfabce08b..0f168c62b 100644 --- a/src/get-started.html +++ b/src/get-started.html @@ -4,7 +4,7 @@ title: Get Started with Font Awesome navbar_active: get-started relative_path: ../ --- -{% capture jumbotron_h1 %}<i class="fa-icon fa-icon-cogs"></i> Get Started{% endcapture %} +{% capture jumbotron_h1 %}<i class="fa fa-cogs"></i> Get Started{% endcapture %} {% capture jumbotron_p %}Easy ways to get Font Awesome {{ site.fontawesome.version }} onto your website{% endcapture %} {% include jumbotron.html %} @@ -93,7 +93,7 @@ $ gem install font-awesome-sass {% highlight scss %} @fa-font-path: "../font"; {% endhighlight %} - <p class="alert alert-success"><i class="fa-icon fa-icon-info-circle"></i> The font path is relative from your compiled CSS directory.</p> + <p class="alert alert-success"><i class="fa fa-info-circle"></i> The font path is relative from your compiled CSS directory.</p> </li> <li>Re-compile your LESS or SCSS if using a static compiler. Otherwise, you should be good to go.</li> <li>Check out the <a href="{{ page.relative_path }}examples/">examples</a> to start using Font Awesome!</li> diff --git a/src/icons.html b/src/icons.html index e64f098b6..a3929a76c 100644 --- a/src/icons.html +++ b/src/icons.html @@ -4,7 +4,7 @@ title: Font Awesome Icons navbar_active: icons relative_path: ../ --- -{% capture jumbotron_h1 %}<i class="fa-icon fa-icon-flag"></i> The Icons{% endcapture %} +{% capture jumbotron_h1 %}<i class="fa fa-flag"></i> The Icons{% endcapture %} {% capture jumbotron_p %}The complete set of {{ icons | size }} icons in Font Awesome {{ site.fontawesome.version }}{% endcapture %} {% include jumbotron.html %} diff --git a/src/license.html b/src/license.html index 4e64f914f..f8fc85292 100644 --- a/src/license.html +++ b/src/license.html @@ -4,7 +4,7 @@ title: Font Awesome License navbar_active: license relative_path: ../ --- -{% capture jumbotron_h1 %}<i class="fa-icon fa-icon-gavel"></i> License{% endcapture %} +{% capture jumbotron_h1 %}<i class="fa fa-gavel"></i> License{% endcapture %} {% capture jumbotron_p %}The full details of how Font Awesome is licensed{% endcapture %} {% include jumbotron.html %} @@ -21,9 +21,9 @@ relative_path: ../ <section> <div class="alert alert-success"> - <ul class="fa-icon-ul margin-bottom-none"> + <ul class="fa-ul margin-bottom-none"> <li> - <i class="fa-icon-li fa-icon fa-icon-info-circle fa-icon-lg"></i>Attribution is no longer required as of Font Awesome 3.0 but is much appreciated: + <i class="fa-li fa fa-info-circle fa-lg"></i>Attribution is no longer required as of Font Awesome 3.0 but is much appreciated: "Font Awesome by Dave Gandy - http://fontawesome.io". </li> </ul> diff --git a/src/test.html b/src/test.html index c377a480f..ce39cb3d5 100644 --- a/src/test.html +++ b/src/test.html @@ -11,67 +11,67 @@ relative_path: ../ <div class="row"> <div class="col-md-3"> <div class="well"> - <i class="fa-icon fa-icon-building"></i> Building + <i class="fa fa-building"></i> Building </div> </div> <div class="col-md-3"> <div class="well"> - <i class="fa-icon fa-icon-building fa-icon-lg"></i> Building Large + <i class="fa fa-building fa-lg"></i> Building Large </div> </div> <div class="col-md-3"> - <i class="fa-icon fa-icon-building"></i> Building + <i class="fa fa-building"></i> Building </div> <div class="col-md-3"> - <i class="fa-icon fa-icon-building fa-icon-lg"></i> Building Large + <i class="fa fa-building fa-lg"></i> Building Large </div> </div> <div class="row" style="font-size: 24px; line-height: 1.5em;"> <div class="col-md-4"> <div class="well"> - <i class="fa-icon fa-icon-building"></i> Building + <i class="fa fa-building"></i> Building </div> </div> <div class="col-md-4"> <div class="well"> - <i class="fa-icon fa-icon-building fa-icon-lg"></i> Building Large + <i class="fa fa-building fa-lg"></i> Building Large </div> </div> <div class="col-md-4"> - <i class="fa-icon fa-icon-building fa-icon-lg"></i> Building Large + <i class="fa fa-building fa-lg"></i> Building Large </div> </div> <div class="row"> <div class="col-md-3"> <div class="well"> - <i class="fa-icon fa-icon-circle"></i> Circle + <i class="fa fa-circle"></i> Circle </div> </div> <div class="col-md-3"> <div class="well"> - <i class="fa-icon fa-icon-circle fa-icon-lg"></i> Circle Large + <i class="fa fa-circle fa-lg"></i> Circle Large </div> </div> <div class="col-md-3"> - <i class="fa-icon fa-icon-circle"></i> Circle + <i class="fa fa-circle"></i> Circle </div> <div class="col-md-3"> - <i class="fa-icon fa-icon-circle fa-icon-lg"></i> Circle Large + <i class="fa fa-circle fa-lg"></i> Circle Large </div> </div> <div class="row" style="font-size: 24px; line-height: 1.5em;"> <div class="col-md-4"> <div class="well"> - <i class="fa-icon fa-icon-circle"></i> Circle + <i class="fa fa-circle"></i> Circle </div> </div> <div class="col-md-4"> <div class="well"> - <i class="fa-icon fa-icon-circle fa-icon-lg"></i> Circle Large + <i class="fa fa-circle fa-lg"></i> Circle Large </div> </div> <div class="col-md-4"> - <i class="fa-icon fa-icon-circle fa-icon-lg"></i> Circle Large + <i class="fa fa-circle fa-lg"></i> Circle Large </div> </div> @@ -79,42 +79,42 @@ relative_path: ../ <h3>Links with Icons <small>icon should activate link & NOT underline</small></h3> <div class="row lead"> <div class="col-md-2"> - <a href="#"><i class="fa-icon fa-icon-building padding-right"></i>Link Here</a> + <a href="#"><i class="fa fa-building padding-right"></i>Link Here</a> </div> <div class="col-md-2"> - <a href="#"><i class="fa-icon fa-icon-building fa-icon-lg padding-right"></i>Link Here</a> + <a href="#"><i class="fa fa-building fa-lg padding-right"></i>Link Here</a> </div> <div class="col-md-2"> - <a href="#"><i class="fa-icon fa-icon-caret-down padding-right"></i>Link Here</a> + <a href="#"><i class="fa fa-caret-down padding-right"></i>Link Here</a> </div> <div class="col-md-2"> - <a href="#">Link Here<i class="fa-icon fa-icon-double-angle-right padding-left"></i></a> + <a href="#">Link Here<i class="fa fa-double-angle-right padding-left"></i></a> </div> <div class="col-md-2"> - <a href="#">Link Here<i class="fa-icon fa-icon-double-angle-right fa-icon-lg padding-left"></i></a> + <a href="#">Link Here<i class="fa fa-double-angle-right fa-lg padding-left"></i></a> </div> <div class="col-md-2"> - <a href="#">Link Here<i class="fa-icon fa-icon-caret-down padding-left"></i></a> + <a href="#">Link Here<i class="fa fa-caret-down padding-left"></i></a> </div> </div> <div class="row"> <div class="col-md-2"> - <a href="#"><i class="fa-icon fa-icon-building padding-right-sm"></i>Link Here</a> + <a href="#"><i class="fa fa-building padding-right-sm"></i>Link Here</a> </div> <div class="col-md-2"> - <a href="#"><i class="fa-icon fa-icon-building fa-icon-lg padding-right-sm"></i>Link Here</a> + <a href="#"><i class="fa fa-building fa-lg padding-right-sm"></i>Link Here</a> </div> <div class="col-md-2"> - <a href="#"><i class="fa-icon fa-icon-caret-down padding-right-sm"></i>Link Here</a> + <a href="#"><i class="fa fa-caret-down padding-right-sm"></i>Link Here</a> </div> <div class="col-md-2"> - <a href="#">Link Here<i class="fa-icon fa-icon-double-angle-right padding-left-sm"></i></a> + <a href="#">Link Here<i class="fa fa-double-angle-right padding-left-sm"></i></a> </div> <div class="col-md-2"> - <a href="#">Link Here<i class="fa-icon fa-icon-double-angle-right fa-icon-lg padding-left-sm"></i></a> + <a href="#">Link Here<i class="fa fa-double-angle-right fa-lg padding-left-sm"></i></a> </div> <div class="col-md-2"> - <a href="#">Link Here<i class="fa-icon fa-icon-caret-down padding-left-sm"></i></a> + <a href="#">Link Here<i class="fa fa-caret-down padding-left-sm"></i></a> </div> </div> @@ -122,23 +122,23 @@ relative_path: ../ <h3>Navbar <small>should stay same height </small></h3> <div class="navbar navbar-inverse navbar-static-top"> <div class="container"> - <a class="navbar-brand" href="#"><i class="fa-icon fa-icon-flag"></i> Font Awesome</a> + <a class="navbar-brand" href="#"><i class="fa fa-flag"></i> Font Awesome</a> <ul class="nav navbar-nav"> <li style="border: solid 1px white;"><a href="#">Nav Item 1</a></li> <li class="dropdown" style="border: solid 1px white;"> <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown"> Nav Item 2 - <i class="fa-icon fa-icon-caret-down"></i> + <i class="fa fa-caret-down"></i> </a> <ul class="dropdown-menu" role="menu"> - <li><a href="#"><i class="fa-icon fa-icon-building"></i> Menu Item 1</a></li> - <li><a href="#"><i class="fa-icon fa-icon-building fa-icon-lg"></i> Menu Item 2</a></li> + <li><a href="#"><i class="fa fa-building"></i> Menu Item 1</a></li> + <li><a href="#"><i class="fa fa-building fa-lg"></i> Menu Item 2</a></li> </ul> </li> - <li style="border: solid 1px white;"><a href="#examples"><i class="fa-icon fa-icon-building fa-icon-lg"></i> Nav Item 3</a></li> - <li style="border: solid 1px white;"><a href="#examples"><i class="fa-icon fa-icon-envelope"></i> Nav Item 4</a></li> - <li style="border: solid 1px white;"><a href="#examples"><i class="fa-icon fa-icon-circle fa-icon-lg"></i> Nav Item 5</a></li> - <li style="border: solid 1px white;"><a href="#examples"><i class="fa-icon fa-icon-circle"></i> Nav Item 6</a></li> + <li style="border: solid 1px white;"><a href="#examples"><i class="fa fa-building fa-lg"></i> Nav Item 3</a></li> + <li style="border: solid 1px white;"><a href="#examples"><i class="fa fa-envelope"></i> Nav Item 4</a></li> + <li style="border: solid 1px white;"><a href="#examples"><i class="fa fa-circle fa-lg"></i> Nav Item 5</a></li> + <li style="border: solid 1px white;"><a href="#examples"><i class="fa fa-circle"></i> Nav Item 6</a></li> </ul> </div> </div> @@ -151,23 +151,23 @@ relative_path: ../ <div style="border: solid 1px #d3d3d3; text-align: center;"> <div> <button class="btn btn-default btn-xs">Button</button> - <button class="btn btn-default btn-xs"><i class="fa-icon fa-icon-building"></i> Button</button> - <button class="btn btn-default btn-xs"><i class="fa-icon fa-icon-building"></i></button> + <button class="btn btn-default btn-xs"><i class="fa fa-building"></i> Button</button> + <button class="btn btn-default btn-xs"><i class="fa fa-building"></i></button> </div> <div> <button class="btn btn-default btn-sm">Button</button> - <button class="btn btn-default btn-sm"><i class="fa-icon fa-icon-building"></i> Button</button> - <button class="btn btn-default btn-sm"><i class="fa-icon fa-icon-building"></i></button> + <button class="btn btn-default btn-sm"><i class="fa fa-building"></i> Button</button> + <button class="btn btn-default btn-sm"><i class="fa fa-building"></i></button> </div> <div> <button class="btn btn-default">Button</button> - <button class="btn btn-default"><i class="fa-icon fa-icon-building"></i> Button</button> - <button class="btn btn-default"><i class="fa-icon fa-icon-building"></i></button> + <button class="btn btn-default"><i class="fa fa-building"></i> Button</button> + <button class="btn btn-default"><i class="fa fa-building"></i></button> </div> <div> <button class="btn btn-default btn-lg">Button</button> - <button class="btn btn-default btn-lg"><i class="fa-icon fa-icon-building"></i> Button</button> - <button class="btn btn-default btn-lg"><i class="fa-icon fa-icon-building"></i></button> + <button class="btn btn-default btn-lg"><i class="fa fa-building"></i> Button</button> + <button class="btn btn-default btn-lg"><i class="fa fa-building"></i></button> </div> </div> </div> @@ -175,23 +175,23 @@ relative_path: ../ <div style="border: solid 1px #d3d3d3; text-align: center;"> <div> <button class="btn btn-default btn-xs">Button</button> - <button class="btn btn-default btn-xs"><i class="fa-icon fa-icon-building fa-icon-lg"></i> Button</button> - <button class="btn btn-default btn-xs"><i class="fa-icon fa-icon-building fa-icon-lg"></i></button> + <button class="btn btn-default btn-xs"><i class="fa fa-building fa-lg"></i> Button</button> + <button class="btn btn-default btn-xs"><i class="fa fa-building fa-lg"></i></button> </div> <div> <button class="btn btn-default btn-sm">Button</button> - <button class="btn btn-default btn-sm"><i class="fa-icon fa-icon-building fa-icon-lg"></i> Button</button> - <button class="btn btn-default btn-sm"><i class="fa-icon fa-icon-building fa-icon-lg"></i></button> + <button class="btn btn-default btn-sm"><i class="fa fa-building fa-lg"></i> Button</button> + <button class="btn btn-default btn-sm"><i class="fa fa-building fa-lg"></i></button> </div> <div> <button class="btn btn-default">Button</button> - <button class="btn btn-default"><i class="fa-icon fa-icon-building fa-icon-lg"></i> Button</button> - <button class="btn btn-default"><i class="fa-icon fa-icon-building fa-icon-lg"></i></button> + <button class="btn btn-default"><i class="fa fa-building fa-lg"></i> Button</button> + <button class="btn btn-default"><i class="fa fa-building fa-lg"></i></button> </div> <div> <button class="btn btn-default btn-lg">Button</button> - <button class="btn btn-default btn-lg"><i class="fa-icon fa-icon-building fa-icon-lg"></i> Button</button> - <button class="btn btn-default btn-lg"><i class="fa-icon fa-icon-building fa-icon-lg"></i></button> + <button class="btn btn-default btn-lg"><i class="fa fa-building fa-lg"></i> Button</button> + <button class="btn btn-default btn-lg"><i class="fa fa-building fa-lg"></i></button> </div> </div> </div> @@ -201,23 +201,23 @@ relative_path: ../ <div style="border: solid 1px #d3d3d3; text-align: center;"> <div> <button class="btn btn-default btn-xs">Button</button> - <button class="btn btn-default btn-xs"><i class="fa-icon fa-icon-circle"></i> Button</button> - <button class="btn btn-default btn-xs"><i class="fa-icon fa-icon-circle"></i></button> + <button class="btn btn-default btn-xs"><i class="fa fa-circle"></i> Button</button> + <button class="btn btn-default btn-xs"><i class="fa fa-circle"></i></button> </div> <div> <button class="btn btn-default btn-sm">Button</button> - <button class="btn btn-default btn-sm"><i class="fa-icon fa-icon-circle"></i> Button</button> - <button class="btn btn-default btn-sm"><i class="fa-icon fa-icon-circle"></i></button> + <button class="btn btn-default btn-sm"><i class="fa fa-circle"></i> Button</button> + <button class="btn btn-default btn-sm"><i class="fa fa-circle"></i></button> </div> <div> <button class="btn btn-default">Button</button> - <button class="btn btn-default"><i class="fa-icon fa-icon-circle"></i> Button</button> - <button class="btn btn-default"><i class="fa-icon fa-icon-circle"></i></button> + <button class="btn btn-default"><i class="fa fa-circle"></i> Button</button> + <button class="btn btn-default"><i class="fa fa-circle"></i></button> </div> <div> <button class="btn btn-default btn-lg">Button</button> - <button class="btn btn-default btn-lg"><i class="fa-icon fa-icon-circle"></i> Button</button> - <button class="btn btn-default btn-lg"><i class="fa-icon fa-icon-circle"></i></button> + <button class="btn btn-default btn-lg"><i class="fa fa-circle"></i> Button</button> + <button class="btn btn-default btn-lg"><i class="fa fa-circle"></i></button> </div> </div> </div> @@ -225,23 +225,23 @@ relative_path: ../ <div style="border: solid 1px #d3d3d3; text-align: center;"> <div> <button class="btn btn-default btn-xs">Button</button> - <button class="btn btn-default btn-xs"><i class="fa-icon fa-icon-circle fa-icon-lg"></i> Button</button> - <button class="btn btn-default btn-xs"><i class="fa-icon fa-icon-circle fa-icon-lg"></i></button> + <button class="btn btn-default btn-xs"><i class="fa fa-circle fa-lg"></i> Button</button> + <button class="btn btn-default btn-xs"><i class="fa fa-circle fa-lg"></i></button> </div> <div> <button class="btn btn-default btn-sm">Button</button> - <button class="btn btn-default btn-sm"><i class="fa-icon fa-icon-circle fa-icon-lg"></i> Button</button> - <button class="btn btn-default btn-sm"><i class="fa-icon fa-icon-circle fa-icon-lg"></i></button> + <button class="btn btn-default btn-sm"><i class="fa fa-circle fa-lg"></i> Button</button> + <button class="btn btn-default btn-sm"><i class="fa fa-circle fa-lg"></i></button> </div> <div> <button class="btn btn-default">Button</button> - <button class="btn btn-default"><i class="fa-icon fa-icon-circle fa-icon-lg"></i> Button</button> - <button class="btn btn-default"><i class="fa-icon fa-icon-circle fa-icon-lg"></i></button> + <button class="btn btn-default"><i class="fa fa-circle fa-lg"></i> Button</button> + <button class="btn btn-default"><i class="fa fa-circle fa-lg"></i></button> </div> <div> <button class="btn btn-default btn-lg">Button</button> - <button class="btn btn-default btn-lg"><i class="fa-icon fa-icon-circle fa-icon-lg"></i> Button</button> - <button class="btn btn-default btn-lg"><i class="fa-icon fa-icon-circle fa-icon-lg"></i></button> + <button class="btn btn-default btn-lg"><i class="fa fa-circle fa-lg"></i> Button</button> + <button class="btn btn-default btn-lg"><i class="fa fa-circle fa-lg"></i></button> </div> </div> </div> @@ -254,23 +254,23 @@ relative_path: ../ <div style="border: solid 1px #d3d3d3; text-align: center;"> <div> <a class="btn btn-default btn-xs">Button</a> - <a class="btn btn-default btn-xs"><i class="fa-icon fa-icon-building"></i> Button</a> - <a class="btn btn-default btn-xs"><i class="fa-icon fa-icon-building"></i></a> + <a class="btn btn-default btn-xs"><i class="fa fa-building"></i> Button</a> + <a class="btn btn-default btn-xs"><i class="fa fa-building"></i></a> </div> <div> <a class="btn btn-default btn-sm">Button</a> - <a class="btn btn-default btn-sm"><i class="fa-icon fa-icon-building"></i> Button</a> - <a class="btn btn-default btn-sm"><i class="fa-icon fa-icon-building"></i></a> + <a class="btn btn-default btn-sm"><i class="fa fa-building"></i> Button</a> + <a class="btn btn-default btn-sm"><i class="fa fa-building"></i></a> </div> <div> <a class="btn btn-default">Button</a> - <a class="btn btn-default"><i class="fa-icon fa-icon-building"></i> Button</a> - <a class="btn btn-default"><i class="fa-icon fa-icon-building"></i></a> + <a class="btn btn-default"><i class="fa fa-building"></i> Button</a> + <a class="btn btn-default"><i class="fa fa-building"></i></a> </div> <div> <a class="btn btn-default btn-lg">Button</a> - <a class="btn btn-default btn-lg"><i class="fa-icon fa-icon-building"></i> Button</a> - <a class="btn btn-default btn-lg"><i class="fa-icon fa-icon-building"></i></a> + <a class="btn btn-default btn-lg"><i class="fa fa-building"></i> Button</a> + <a class="btn btn-default btn-lg"><i class="fa fa-building"></i></a> </div> </div> </div> @@ -278,23 +278,23 @@ relative_path: ../ <div style="border: solid 1px #d3d3d3; text-align: center;"> <div> <a class="btn btn-default btn-xs">Button</a> - <a class="btn btn-default btn-xs"><i class="fa-icon fa-icon-building fa-icon-lg"></i> Button</a> - <a class="btn btn-default btn-xs"><i class="fa-icon fa-icon-building fa-icon-lg"></i></a> + <a class="btn btn-default btn-xs"><i class="fa fa-building fa-lg"></i> Button</a> + <a class="btn btn-default btn-xs"><i class="fa fa-building fa-lg"></i></a> </div> <div> <a class="btn btn-default btn-sm">Button</a> - <a class="btn btn-default btn-sm"><i class="fa-icon fa-icon-building fa-icon-lg"></i> Button</a> - <a class="btn btn-default btn-sm"><i class="fa-icon fa-icon-building fa-icon-lg"></i></a> + <a class="btn btn-default btn-sm"><i class="fa fa-building fa-lg"></i> Button</a> + <a class="btn btn-default btn-sm"><i class="fa fa-building fa-lg"></i></a> </div> <div> <a class="btn btn-default">Button</a> - <a class="btn btn-default"><i class="fa-icon fa-icon-building fa-icon-lg"></i> Button</a> - <a class="btn btn-default"><i class="fa-icon fa-icon-building fa-icon-lg"></i></a> + <a class="btn btn-default"><i class="fa fa-building fa-lg"></i> Button</a> + <a class="btn btn-default"><i class="fa fa-building fa-lg"></i></a> </div> <div> <a class="btn btn-default btn-lg">Button</a> - <a class="btn btn-default btn-lg"><i class="fa-icon fa-icon-building fa-icon-lg"></i> Button</a> - <a class="btn btn-default btn-lg"><i class="fa-icon fa-icon-building fa-icon-lg"></i></a> + <a class="btn btn-default btn-lg"><i class="fa fa-building fa-lg"></i> Button</a> + <a class="btn btn-default btn-lg"><i class="fa fa-building fa-lg"></i></a> </div> </div> </div> @@ -304,23 +304,23 @@ relative_path: ../ <div style="border: solid 1px #d3d3d3; text-align: center;"> <div> <a class="btn btn-default btn-xs">Button</a> - <a class="btn btn-default btn-xs"><i class="fa-icon fa-icon-circle"></i> Button</a> - <a class="btn btn-default btn-xs"><i class="fa-icon fa-icon-circle"></i></a> + <a class="btn btn-default btn-xs"><i class="fa fa-circle"></i> Button</a> + <a class="btn btn-default btn-xs"><i class="fa fa-circle"></i></a> </div> <div> <a class="btn btn-default btn-sm">Button</a> - <a class="btn btn-default btn-sm"><i class="fa-icon fa-icon-circle"></i> Button</a> - <a class="btn btn-default btn-sm"><i class="fa-icon fa-icon-circle"></i></a> + <a class="btn btn-default btn-sm"><i class="fa fa-circle"></i> Button</a> + <a class="btn btn-default btn-sm"><i class="fa fa-circle"></i></a> </div> <div> <a class="btn btn-default">Button</a> - <a class="btn btn-default"><i class="fa-icon fa-icon-circle"></i> Button</a> - <a class="btn btn-default"><i class="fa-icon fa-icon-circle"></i></a> + <a class="btn btn-default"><i class="fa fa-circle"></i> Button</a> + <a class="btn btn-default"><i class="fa fa-circle"></i></a> </div> <div> <a class="btn btn-default btn-lg">Button</a> - <a class="btn btn-default btn-lg"><i class="fa-icon fa-icon-circle"></i> Button</a> - <a class="btn btn-default btn-lg"><i class="fa-icon fa-icon-circle"></i></a> + <a class="btn btn-default btn-lg"><i class="fa fa-circle"></i> Button</a> + <a class="btn btn-default btn-lg"><i class="fa fa-circle"></i></a> </div> </div> </div> @@ -328,23 +328,23 @@ relative_path: ../ <div style="border: solid 1px #d3d3d3; text-align: center;"> <div> <a class="btn btn-default btn-xs">Button</a> - <a class="btn btn-default btn-xs"><i class="fa-icon fa-icon-circle fa-icon-lg"></i> Button</a> - <a class="btn btn-default btn-xs"><i class="fa-icon fa-icon-circle fa-icon-lg"></i></a> + <a class="btn btn-default btn-xs"><i class="fa fa-circle fa-lg"></i> Button</a> + <a class="btn btn-default btn-xs"><i class="fa fa-circle fa-lg"></i></a> </div> <div> <a class="btn btn-default btn-sm">Button</a> - <a class="btn btn-default btn-sm"><i class="fa-icon fa-icon-circle fa-icon-lg"></i> Button</a> - <a class="btn btn-default btn-sm"><i class="fa-icon fa-icon-circle fa-icon-lg"></i></a> + <a class="btn btn-default btn-sm"><i class="fa fa-circle fa-lg"></i> Button</a> + <a class="btn btn-default btn-sm"><i class="fa fa-circle fa-lg"></i></a> </div> <div> <a class="btn btn-default">Button</a> - <a class="btn btn-default"><i class="fa-icon fa-icon-circle fa-icon-lg"></i> Button</a> - <a class="btn btn-default"><i class="fa-icon fa-icon-circle fa-icon-lg"></i></a> + <a class="btn btn-default"><i class="fa fa-circle fa-lg"></i> Button</a> + <a class="btn btn-default"><i class="fa fa-circle fa-lg"></i></a> </div> <div> <a class="btn btn-default btn-lg">Button</a> - <a class="btn btn-default btn-lg"><i class="fa-icon fa-icon-circle fa-icon-lg"></i> Button</a> - <a class="btn btn-default btn-lg"><i class="fa-icon fa-icon-circle fa-icon-lg"></i></a> + <a class="btn btn-default btn-lg"><i class="fa fa-circle fa-lg"></i> Button</a> + <a class="btn btn-default btn-lg"><i class="fa fa-circle fa-lg"></i></a> </div> </div> </div> @@ -356,7 +356,7 @@ relative_path: ../ <div style="border: solid 1px #d3d3d3;"> <div class="btn-group"> <button class="btn btn-default btn-lg"> - <i class="fa-icon fa-icon-adjust"></i> + <i class="fa fa-adjust"></i> </button> <button class="btn btn-default btn-lg"> Text @@ -368,7 +368,7 @@ relative_path: ../ <div style="border: solid 1px #d3d3d3;"> <div class="btn-group"> <button class="btn btn-default"> - <i class="fa-icon fa-icon-adjust"></i> + <i class="fa fa-adjust"></i> </button> <button class="btn btn-default"> Text @@ -380,7 +380,7 @@ relative_path: ../ <div style="border: solid 1px #d3d3d3;"> <div class="btn-group"> <button class="btn btn-default btn-sm"> - <i class="fa-icon fa-icon-adjust"></i> + <i class="fa fa-adjust"></i> </button> <button class="btn btn-default btn-sm"> Text @@ -395,7 +395,7 @@ relative_path: ../ <div class="col-md-4"> <div style="border: solid 1px #d3d3d3;"> <a class="btn btn-default btn-lg" href="#"> - <i class="fa-icon fa-icon-github fa-icon-2x pull-left"></i> + <i class="fa fa-github fa-2x pull-left"></i> Longer<br>Button</a> <a class="btn btn-default btn-lg" href="#"> Longer<br>Button</a> @@ -404,7 +404,7 @@ relative_path: ../ <div class="col-md-4"> <div style="border: solid 1px #d3d3d3;"> <a class="btn btn-default" href="#"> - <i class="fa-icon fa-icon-github fa-icon-2x pull-left"></i> + <i class="fa fa-github fa-2x pull-left"></i> Longer<br>Button</a> <a class="btn btn-default" href="#"> Longer<br>Button</a> @@ -413,7 +413,7 @@ relative_path: ../ <div class="col-md-4"> <div style="border: solid 1px #d3d3d3;"> <a class="btn btn-default btn-sm" href="#"> - <i class="fa-icon fa-icon-github fa-icon-2x pull-left"></i> + <i class="fa fa-github fa-2x pull-left"></i> Longer<br>Button</a> <a class="btn btn-default btn-sm" href="#"> Longer<br>Button</a> @@ -430,63 +430,63 @@ relative_path: ../ <li class="dropdown active"> <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown"> Nav Item 2 - <i class="fa-icon fa-icon-caret-down"></i> + <i class="fa fa-caret-down"></i> </a> <ul class="dropdown-menu" role="menu"> - <li><a href="#"><i class="fa-icon fa-icon-building"></i> Menu Item 1</a></li> - <li><a href="#"><i class="fa-icon fa-icon-building fa-icon-lg"></i> Menu Item 2</a></li> + <li><a href="#"><i class="fa fa-building"></i> Menu Item 1</a></li> + <li><a href="#"><i class="fa fa-building fa-lg"></i> Menu Item 2</a></li> </ul> </li> <li class="dropdown active"> <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown"> Nav Item 3 - <i class="fa-icon fa-icon-caret-down"></i> + <i class="fa fa-caret-down"></i> </a> <ul class="dropdown-menu" role="menu"> - <li><a href="#"><i class="fa-icon fa-icon-building"></i> Menu Item 1</a></li> - <li><a href="#"><i class="fa-icon fa-icon-building fa-icon-lg"></i> Menu Item 2</a></li> + <li><a href="#"><i class="fa fa-building"></i> Menu Item 1</a></li> + <li><a href="#"><i class="fa fa-building fa-lg"></i> Menu Item 2</a></li> </ul> </li> - <li class="active"><a href="#examples"><i class="fa-icon fa-icon-building fa-icon-lg"></i> Nav Item 4</a></li> - <li class="active"><a href="#examples"><i class="fa-icon fa-icon-spinner fa-icon-spin"></i> Nav Item 5</a></li> - <li class="active"><a href="#examples"><i class="fa-icon fa-icon-circle fa-icon-lg"></i> Nav Item 6</a></li> - <li class="active"><a href="#examples"><i class="fa-icon fa-icon-circle"></i> Nav Item 7</a></li> + <li class="active"><a href="#examples"><i class="fa fa-building fa-lg"></i> Nav Item 4</a></li> + <li class="active"><a href="#examples"><i class="fa fa-spinner fa-spin"></i> Nav Item 5</a></li> + <li class="active"><a href="#examples"><i class="fa fa-circle fa-lg"></i> Nav Item 6</a></li> + <li class="active"><a href="#examples"><i class="fa fa-circle"></i> Nav Item 7</a></li> </ul> <ul class="nav nav-tabs"> <li class="active"><a href="#">Nav Item 1</a></li> <li class="dropdown active"> <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown"> Nav Item 2 - <i class="fa-icon fa-icon-caret-down"></i> + <i class="fa fa-caret-down"></i> </a> <ul class="dropdown-menu" role="menu"> - <li><a href="#"><i class="fa-icon fa-icon-building"></i> Menu Item 1</a></li> - <li><a href="#"><i class="fa-icon fa-icon-building fa-icon-lg"></i> Menu Item 2</a></li> + <li><a href="#"><i class="fa fa-building"></i> Menu Item 1</a></li> + <li><a href="#"><i class="fa fa-building fa-lg"></i> Menu Item 2</a></li> </ul> </li> <li class="dropdown active"> <a href="#" role="button" class="dropdown-toggle" data-toggle="dropdown"> Nav Item 3 - <i class="fa-icon fa-icon-caret-down"></i> + <i class="fa fa-caret-down"></i> </a> <ul class="dropdown-menu" role="menu"> - <li><a href="#"><i class="fa-icon fa-icon-building"></i> Menu Item 1</a></li> - <li><a href="#"><i class="fa-icon fa-icon-building fa-icon-lg"></i> Menu Item 2</a></li> + <li><a href="#"><i class="fa fa-building"></i> Menu Item 1</a></li> + <li><a href="#"><i class="fa fa-building fa-lg"></i> Menu Item 2</a></li> </ul> </li> - <li class="active"><a href="#examples"><i class="fa-icon fa-icon-building fa-icon-lg"></i> Nav Item 4</a></li> - <li class="active"><a href="#examples"><i class="fa-icon fa-icon-spinner fa-icon-spin"></i> Nav Item 5</a></li> - <li class="active"><a href="#examples"><i class="fa-icon fa-icon-circle fa-icon-lg"></i> Nav Item 6</a></li> - <li class="active"><a href="#examples"><i class="fa-icon fa-icon-circle"></i> Nav Item 7</a></li> + <li class="active"><a href="#examples"><i class="fa fa-building fa-lg"></i> Nav Item 4</a></li> + <li class="active"><a href="#examples"><i class="fa fa-spinner fa-spin"></i> Nav Item 5</a></li> + <li class="active"><a href="#examples"><i class="fa fa-circle fa-lg"></i> Nav Item 6</a></li> + <li class="active"><a href="#examples"><i class="fa fa-circle"></i> Nav Item 7</a></li> </ul> </div> <div class="col-md-3"> <div class="list-group"> <a href="#" class="list-group-item active"> - Overview<i class="fa-icon fa-icon-chevron-right fa-icon-fixed-width pull-right"></i> + Overview<i class="fa fa-chevron-right fa-fixed-width pull-right"></i> </a> <a href="#" class="list-group-item"> - Overview<i class="fa-icon fa-icon-chevron-right fa-icon-fixed-width pull-right"></i> + Overview<i class="fa fa-chevron-right fa-fixed-width pull-right"></i> </a> </div> </div> @@ -496,11 +496,11 @@ relative_path: ../ <div class="row"> <div class="col-md-6"> <div class="well"> - <i class="hide fa-icon fa-icon-circle"></i> Icon should be hidden + <i class="hide fa fa-circle"></i> Icon should be hidden </div> </div> <div class="col-md-6"> - <i class="hide fa-icon fa-icon-circle"></i> Icon should be hidden + <i class="hide fa fa-circle"></i> Icon should be hidden </div> </div> @@ -509,28 +509,28 @@ relative_path: ../ <div class="row"> <div class="col-md-6"> <p class="lead"> - <i class="fa-icon fa-icon-stethoscope fa-icon-3x pull-left fa-icon-border"></i> + <i class="fa fa-stethoscope fa-3x pull-left fa-border"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus. </p> </div> <div class="col-md-6"> <p class="lead"> - <i class="fa-icon fa-icon-ambulance fa-icon-4x pull-right fa-icon-border"></i> + <i class="fa fa-ambulance fa-4x pull-right fa-border"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus. </p> </div> </div> <div class="row"> <div class="col-md-4"> - <i class="fa-icon fa-icon-building fa-icon-2x pull-left fa-icon-border"></i> + <i class="fa fa-building fa-2x pull-left fa-border"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus. </div> <div class="col-md-4"> - <i class="fa-icon fa-icon-stethoscope fa-icon-3x pull-right fa-icon-border"></i> + <i class="fa fa-stethoscope fa-3x pull-right fa-border"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus. </div> <div class="col-md-4"> - <i class="fa-icon fa-icon-ambulance fa-icon-4x pull-left"></i> + <i class="fa fa-ambulance fa-4x pull-left"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus. </div> </div> @@ -540,11 +540,11 @@ relative_path: ../ <div class="row"> <div class="col-md-6"> <div style="border: solid 1px #d3d3d3;"> - <ul class="fa-icon-ul"> - <li><i class="fa-icon-li fa-icon fa-icon-double-angle-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> - <li><i class="fa-icon-li fa-icon fa-icon-arrow-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li> - <li><i class="fa-icon-li fa-icon fa-icon-building"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. - <i class="fa-icon fa-icon-building"></i> + <ul class="fa-ul"> + <li><i class="fa-li fa fa-double-angle-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> + <li><i class="fa-li fa fa-arrow-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li> + <li><i class="fa-li fa fa-building"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. + <i class="fa fa-building"></i> <span class="label label-default">foo</span> <a class="btn btn-default btn-xs">foo</a> </li> @@ -553,10 +553,10 @@ relative_path: ../ </div> <div class="col-md-6"> <div style="border: solid 1px #d3d3d3;"> - <ul class="fa-icon-ul"> - <li><i class="fa-icon-li fa-icon fa-icon-double-angle-right fa-icon-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> - <li><i class="fa-icon-li fa-icon fa-icon-arrow-right fa-icon-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li> - <li><i class="fa-icon-li fa-icon fa-icon-building fa-icon-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> + <ul class="fa-ul"> + <li><i class="fa-li fa fa-double-angle-right fa-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> + <li><i class="fa-li fa fa-arrow-right fa-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li> + <li><i class="fa-li fa fa-building fa-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> </ul> </div> </div> @@ -564,19 +564,19 @@ relative_path: ../ <div class="row"> <div class="col-md-6"> <div style="border: solid 1px #d3d3d3;"> - <ul class="fa-icon-ul lead"> - <li><i class="fa-icon-li fa-icon fa-icon-double-angle-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> - <li><i class="fa-icon-li fa-icon fa-icon-arrow-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li> - <li><i class="fa-icon-li fa-icon fa-icon-building"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> + <ul class="fa-ul lead"> + <li><i class="fa-li fa fa-double-angle-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> + <li><i class="fa-li fa fa-arrow-right"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li> + <li><i class="fa-li fa fa-building"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> </ul> </div> </div> <div class="col-md-6"> <div style="border: solid 1px #d3d3d3;"> - <ul class="fa-icon-ul lead"> - <li><i class="fa-icon-li fa-icon fa-icon-double-angle-right fa-icon-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> - <li><i class="fa-icon-li fa-icon fa-icon-arrow-right fa-icon-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li> - <li><i class="fa-icon-li fa-icon fa-icon-building fa-icon-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> + <ul class="fa-ul lead"> + <li><i class="fa-li fa fa-double-angle-right fa-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> + <li><i class="fa-li fa fa-arrow-right fa-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li> + <li><i class="fa-li fa fa-building fa-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> </ul> </div> </div> @@ -584,19 +584,19 @@ relative_path: ../ <div class="row"> <div class="col-md-6"> <div style="border: solid 1px #d3d3d3;"> - <ul class="fa-icon-ul"> - <li><a href="#"><i class="fa-icon-li fa-icon fa-icon-double-angle-right"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> - <li><a href="#"><i class="fa-icon-li fa-icon fa-icon-arrow-right"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li> - <li><a href="#"><i class="fa-icon-li fa-icon fa-icon-building"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> + <ul class="fa-ul"> + <li><a href="#"><i class="fa-li fa fa-double-angle-right"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> + <li><a href="#"><i class="fa-li fa fa-arrow-right"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li> + <li><a href="#"><i class="fa-li fa fa-building"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> </ul> </div> </div> <div class="col-md-6"> <div style="border: solid 1px #d3d3d3;"> - <ul class="fa-icon-ul"> - <li><a href="#"><i class="fa-icon-li fa-icon fa-icon-double-angle-right fa-icon-lg"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> - <li><a href="#"><i class="fa-icon-li fa-icon fa-icon-arrow-right fa-icon-lg"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li> - <li><a href="#"><i class="fa-icon-li fa-icon fa-icon-building fa-icon-lg"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> + <ul class="fa-ul"> + <li><a href="#"><i class="fa-li fa fa-double-angle-right fa-lg"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> + <li><a href="#"><i class="fa-li fa fa-arrow-right fa-lg"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li> + <li><a href="#"><i class="fa-li fa fa-building fa-lg"></i></a>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> </ul> </div> </div> @@ -604,11 +604,11 @@ relative_path: ../ <div class="row"> <div class="col-md-6"> <div style="border: solid 1px #d3d3d3;"> - <ul class="fa-icon-ul"> - <li><i class="fa-icon-li fa-icon fa-icon-refresh fa-icon-spin"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> - <li><i class="fa-icon-li fa-icon fa-icon-spinner fa-icon-spin"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li> - <li><i class="fa-icon-li fa-icon fa-icon-spinner fa-icon-spin"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. - <i class="fa-icon fa-icon-building"></i> + <ul class="fa-ul"> + <li><i class="fa-li fa fa-refresh fa-spin"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> + <li><i class="fa-li fa fa-spinner fa-spin"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li> + <li><i class="fa-li fa fa-spinner fa-spin"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. + <i class="fa fa-building"></i> <span class="label label-default">foo</span> <a class="btn btn-default btn-xs">foo</a> </li> @@ -617,11 +617,11 @@ relative_path: ../ </div> <div class="col-md-6"> <div style="border: solid 1px #d3d3d3;"> - <ul class="fa-icon-ul"> - <li><i class="fa-icon-li fa-icon fa-icon-refresh fa-icon-spin fa-icon-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> - <li><i class="fa-icon-li fa-icon fa-icon-spinner fa-icon-spin fa-icon-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li> - <li><i class="fa-icon-li fa-icon fa-icon-spinner fa-icon-spin fa-icon-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. - <i class="fa-icon fa-icon-building"></i> + <ul class="fa-ul"> + <li><i class="fa-li fa fa-refresh fa-spin fa-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li> + <li><i class="fa-li fa fa-spinner fa-spin fa-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et lectus id nisl hendrerit varius. Aliquam erat volutpat. Suspendisse potenti. Aliquam erat volutpat. Aliquam ut dolor lectus.</li> + <li><i class="fa-li fa fa-spinner fa-spin fa-lg"></i>Lorem ipsum dolor sit amet, consectetur adipiscing elit. + <i class="fa fa-building"></i> <span class="label label-default">foo</span> <a class="btn btn-default btn-xs">foo</a> </li> @@ -655,61 +655,61 @@ relative_path: ../ <h3>Spinning icons <small>icons should be aligned well and on center, buttons should be same height, won't work in ie7</small></h3> <div style="border: solid 1px #d3d3d3;"> - <i class="fa-icon fa-icon-refresh fa-icon-spin"></i> Loading... - <button class="btn btn-default btn-sm"><i class="fa-icon fa-icon-refresh fa-icon-spin"></i> Loading...</button> + <i class="fa fa-refresh fa-spin"></i> Loading... + <button class="btn btn-default btn-sm"><i class="fa fa-refresh fa-spin"></i> Loading...</button> <button class="btn btn-default btn-sm">Loading...</button> - <i class="fa-icon fa-icon-circle-blank fa-icon-spin"></i> Loading... - <button class="btn btn-default btn-sm"><i class="fa-icon fa-icon-circle-blank fa-icon-spin"></i> Loading...</button> - <a href="#"><i class="fa-icon fa-icon-refresh fa-icon-spin"></i> Loading...</a> + <i class="fa fa-circle-blank fa-spin"></i> Loading... + <button class="btn btn-default btn-sm"><i class="fa fa-circle-blank fa-spin"></i> Loading...</button> + <a href="#"><i class="fa fa-refresh fa-spin"></i> Loading...</a> </div> <div style="border: solid 1px #d3d3d3;"> - <i class="fa-icon fa-icon-refresh fa-icon-spin"></i> Loading... - <button class="btn btn-default"><i class="fa-icon fa-icon-refresh fa-icon-spin"></i> Loading...</button> + <i class="fa fa-refresh fa-spin"></i> Loading... + <button class="btn btn-default"><i class="fa fa-refresh fa-spin"></i> Loading...</button> <button class="btn btn-default">Loading...</button> - <i class="fa-icon fa-icon-circle-blank fa-icon-spin"></i> Loading... - <button class="btn btn-default"><i class="fa-icon fa-icon-circle-blank fa-icon-spin"></i> Loading...</button> + <i class="fa fa-circle-blank fa-spin"></i> Loading... + <button class="btn btn-default"><i class="fa fa-circle-blank fa-spin"></i> Loading...</button> </div> <div style="border: solid 1px #d3d3d3;"> - <i class="fa-icon fa-icon-spinner fa-icon-spin"></i> Loading... - <button class="btn btn-default btn-lg"><i class="fa-icon fa-icon-spinner fa-icon-spin"></i> Loading...</button> + <i class="fa fa-spinner fa-spin"></i> Loading... + <button class="btn btn-default btn-lg"><i class="fa fa-spinner fa-spin"></i> Loading...</button> <button class="btn btn-default btn-lg">Loading...</button> - <i class="fa-icon fa-icon-circle-blank fa-icon-spin"></i> Loading... - <button class="btn btn-default btn-lg"><i class="fa-icon fa-icon-circle-blank fa-icon-spin"></i> Loading...</button> + <i class="fa fa-circle-blank fa-spin"></i> Loading... + <button class="btn btn-default btn-lg"><i class="fa fa-circle-blank fa-spin"></i> Loading...</button> </div> - <h4>fa-icon-lg</h4> + <h4>fa-lg</h4> <div style="border: solid 1px #d3d3d3;"> - <i class="fa-icon fa-icon-refresh fa-icon-lg fa-icon-spin"></i> Loading... - <button class="btn btn-default btn-sm"><i class="fa-icon fa-icon-refresh fa-icon-lg fa-icon-spin"></i> Loading...</button> + <i class="fa fa-refresh fa-lg fa-spin"></i> Loading... + <button class="btn btn-default btn-sm"><i class="fa fa-refresh fa-lg fa-spin"></i> Loading...</button> <button class="btn btn-default btn-sm">Loading...</button> - <i class="fa-icon fa-icon-circle-blank fa-icon-lg fa-icon-spin"></i> Loading... - <button class="btn btn-default btn-sm"><i class="fa-icon fa-icon-circle-blank fa-icon-lg fa-icon-spin"></i> Loading...</button> + <i class="fa fa-circle-blank fa-lg fa-spin"></i> Loading... + <button class="btn btn-default btn-sm"><i class="fa fa-circle-blank fa-lg fa-spin"></i> Loading...</button> </div> <div style="border: solid 1px #d3d3d3;"> - <i class="fa-icon fa-icon-refresh fa-icon-lg fa-icon-spin"></i> Loading... - <button class="btn btn-default"><i class="fa-icon fa-icon-refresh fa-icon-lg fa-icon-spin"></i> Loading...</button> + <i class="fa fa-refresh fa-lg fa-spin"></i> Loading... + <button class="btn btn-default"><i class="fa fa-refresh fa-lg fa-spin"></i> Loading...</button> <button class="btn btn-default">Loading...</button> - <i class="fa-icon fa-icon-circle-blank fa-icon-lg fa-icon-spin"></i> Loading... - <button class="btn btn-default"><i class="fa-icon fa-icon-circle-blank fa-icon-lg fa-icon-spin"></i> Loading...</button> + <i class="fa fa-circle-blank fa-lg fa-spin"></i> Loading... + <button class="btn btn-default"><i class="fa fa-circle-blank fa-lg fa-spin"></i> Loading...</button> </div> <div style="border: solid 1px #d3d3d3;"> - <i class="fa-icon fa-icon-spinner fa-icon-lg fa-icon-spin"></i> Loading... - <button class="btn btn-default btn-lg"><i class="fa-icon fa-icon-spinner fa-icon-lg fa-icon-spin"></i> Loading...</button> + <i class="fa fa-spinner fa-lg fa-spin"></i> Loading... + <button class="btn btn-default btn-lg"><i class="fa fa-spinner fa-lg fa-spin"></i> Loading...</button> <button class="btn btn-default btn-lg">Loading...</button> - <i class="fa-icon fa-icon-circle-blank fa-icon-lg fa-icon-spin"></i> Loading... - <button class="btn btn-default btn-lg"><i class="fa-icon fa-icon-circle-blank fa-icon-lg fa-icon-spin"></i> Loading...</button> + <i class="fa fa-circle-blank fa-lg fa-spin"></i> Loading... + <button class="btn btn-default btn-lg"><i class="fa fa-circle-blank fa-lg fa-spin"></i> Loading...</button> </div> <h4>Bootstrap Prepend and Append</h4> <div class="row"> <div class="col-md-4"> <div class="input-group"> - <span class="input-group-addon"><i class="fa-icon fa-icon-spinner fa-icon-spin"></i></span> + <span class="input-group-addon"><i class="fa fa-spinner fa-spin"></i></span> <input type="text" class="form-control" placeholder="Username"> </div> </div> <div class="col-md-4"> <div class="input-group"> <input type="text" class="form-control"> - <span class="input-group-addon"><i class="fa-icon fa-icon-spinner fa-icon-spin"></i></span> + <span class="input-group-addon"><i class="fa fa-spinner fa-spin"></i></span> </div> </div> </div> diff --git a/src/whats-new.html b/src/whats-new.html index b9af0edb1..d24486614 100644 --- a/src/whats-new.html +++ b/src/whats-new.html @@ -4,7 +4,7 @@ title: What's New navbar_active: whats-new relative_path: ../ --- -{% capture jumbotron_h1 %}<i class="fa-icon fa-icon-lightbulb-alt"></i> What's New{% endcapture %} +{% capture jumbotron_h1 %}<i class="fa fa-lightbulb-alt"></i> What's New{% endcapture %} {% capture jumbotron_p %}What's New in the latest version — Font Awesome {{ site.fontawesome.minor_version }}{% endcapture %} {% include jumbotron.html %} |