diff options
48 files changed, 295 insertions, 298 deletions
diff --git a/css/font-awesome.css b/css/font-awesome.css index c4e6729fa..6c28be32b 100644 --- a/css/font-awesome.css +++ b/css/font-awesome.css @@ -50,7 +50,7 @@ speak: none; } /* makes the font 33% larger relative to the icon container */ -.fa-large:before { +.fa-lg:before { font-size: 1.3333333333333333em; vertical-align: -10%; } @@ -58,14 +58,14 @@ a .fa { display: inline; } -/* increased font size for icon-large */ +/* increased font size for icon-lg */ .fa.fa-fixed-width { display: inline-block; width: 1.1428571428571428em; padding-right: 0.2857142857142857em; text-align: right; } -.fa.fa-fixed-width.fa-large { +.fa.fa-fixed-width.fa-lg { width: 1.4285714285714286em; } .fa-ul { @@ -165,8 +165,8 @@ a .fa { background-repeat: repeat; } /* keeps Bootstrap styles with and without icons the same */ -.btn .fa.fa-large, -.nav .fa.fa-large { +.btn .fa.fa-lg, +.nav .fa.fa-lg { line-height: .9em; } .btn .fa.fa-spin, @@ -175,15 +175,15 @@ a .fa { } .nav-tabs .fa, .nav-pills .fa, -.nav-tabs .fa.fa-large, -.nav-pills .fa.fa-large { +.nav-tabs .fa.fa-lg, +.nav-pills .fa.fa-lg { line-height: .9em; } .btn .fa.pull-left.fa-2x, .btn .fa.pull-right.fa-2x { margin-top: .18em; } -.btn .fa.fa-spin.fa-large { +.btn .fa.fa-spin.fa-lg { line-height: .8em; } .btn.btn-small .fa.pull-left.fa-2x, @@ -218,8 +218,7 @@ a .fa { line-height: 2em; vertical-align: -35%; } -.fa-stack [class^="fa-"], -.fa-stack [class*=" fa-"] { +.fa-stack .fa { position: absolute; display: block; width: 100%; diff --git a/css/font-awesome.min.css b/css/font-awesome.min.css index 0bb2e997e..fb34722fd 100644 --- a/css/font-awesome.min.css +++ b/css/font-awesome.min.css @@ -1,8 +1,8 @@ @font-face{font-family:'FontAwesome';src:url('../font/fontawesome-webfont.eot?v=4.0.0');src:url('../font/fontawesome-webfont.eot?#iefix&v=4.0.0') format('embedded-opentype'),url('../font/fontawesome-webfont.woff?v=4.0.0') format('woff'),url('../font/fontawesome-webfont.ttf?v=4.0.0') format('truetype'),url('../font/fontawesome-webfont.svg?v=4.0.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal;}.fa{*margin-right:.3em;font-family:FontAwesome;-webkit-font-smoothing:antialiased;font-style:normal;font-weight:normal;text-decoration:inherit;text-rendering:auto;-moz-osx-font-smoothing:grayscale;} .fa:before{display:inline-block;text-decoration:inherit;speak:none;} -.fa-large:before{font-size:1.3333333333333333em;vertical-align:-10%;} +.fa-lg:before{font-size:1.3333333333333333em;vertical-align:-10%;} a .fa{display:inline;} -.fa.fa-fixed-width{display:inline-block;width:1.1428571428571428em;padding-right:0.2857142857142857em;text-align:right;}.fa.fa-fixed-width.fa-large{width:1.4285714285714286em;} +.fa.fa-fixed-width{display:inline-block;width:1.1428571428571428em;padding-right:0.2857142857142857em;text-align:right;}.fa.fa-fixed-width.fa-lg{width:1.4285714285714286em;} .fa-ul{padding-left:0;margin-left:2.142857142857143em;list-style-type:none;}.fa-ul>li{position:relative;} .fa-ul .fa-li{position:absolute;left:-2.142857142857143em;width:2.142857142857143em;line-height:inherit;text-align:center;} .fa.hide{display:none;} @@ -19,17 +19,17 @@ a .fa{display:inline;} .fa.pull-left{margin-right:.3em;} .fa.pull-right{margin-left:.3em;} .fa{display:inline;width:auto;height:auto;margin-top:0;line-height:normal;vertical-align:baseline;background-image:none;background-position:0 0;background-repeat:repeat;} -.btn .fa.fa-large,.nav .fa.fa-large{line-height:.9em;} +.btn .fa.fa-lg,.nav .fa.fa-lg{line-height:.9em;} .btn .fa.fa-spin,.nav .fa.fa-spin{display:inline-block;} -.nav-tabs .fa,.nav-pills .fa,.nav-tabs .fa.fa-large,.nav-pills .fa.fa-large{line-height:.9em;} +.nav-tabs .fa,.nav-pills .fa,.nav-tabs .fa.fa-lg,.nav-pills .fa.fa-lg{line-height:.9em;} .btn .fa.pull-left.fa-2x,.btn .fa.pull-right.fa-2x{margin-top:.18em;} -.btn .fa.fa-spin.fa-large{line-height:.8em;} +.btn .fa.fa-spin.fa-lg{line-height:.8em;} .btn.btn-small .fa.pull-left.fa-2x,.btn.btn-small .fa.pull-right.fa-2x{margin-top:.25em;} .btn.btn-large .fa{margin-top:0;}.btn.btn-large .fa.pull-left.fa-2x,.btn.btn-large .fa.pull-right.fa-2x{margin-top:.05em;} .btn.btn-large .fa.pull-left.fa-2x{margin-right:.2em;} .btn.btn-large .fa.pull-right.fa-2x{margin-left:.2em;} .nav-list .fa{line-height:inherit;} -.fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:-35%;}.fa-stack [class^="fa-"],.fa-stack [class*=" fa-"]{position:absolute;display:block;width:100%;height:100%;font-size:1em;line-height:inherit;*line-height:2em;text-align:center;} +.fa-stack{position:relative;display:inline-block;width:2em;height:2em;line-height:2em;vertical-align:-35%;}.fa-stack .fa{position:absolute;display:block;width:100%;height:100%;font-size:1em;line-height:inherit;*line-height:2em;text-align:center;} .fa-stack .fa-stack-base{font-size:2em;*line-height:1em;} .fa-spin{display:inline-block;-webkit-animation:spin 2s infinite linear;-moz-animation:spin 2s infinite linear;-o-animation:spin 2s infinite linear;animation:spin 2s infinite linear;} a .fa-stack,a .fa-spin{display:inline-block;text-decoration:none;} diff --git a/less/bootstrap.less b/less/bootstrap.less index 6115cda97..0099620c1 100644 --- a/less/bootstrap.less +++ b/less/bootstrap.less @@ -19,13 +19,13 @@ .btn, .nav { .fa { // display: inline; - &.fa-large { line-height: .9em; } + &.fa-lg { line-height: .9em; } &.fa-spin { display: inline-block; } } } .nav-tabs, .nav-pills { .fa { - &, &.fa-large { line-height: .9em; } + &, &.fa-lg { line-height: .9em; } } } .btn { @@ -33,7 +33,7 @@ &.pull-left, &.pull-right { &.fa-2x { margin-top: .18em; } } - &.fa-spin.fa-large { line-height: .8em; } + &.fa-spin.fa-lg { line-height: .8em; } } } .btn.btn-small { diff --git a/less/core.less b/less/core.less index e43a54a6d..15b0f2f1a 100644 --- a/less/core.less +++ b/less/core.less @@ -12,7 +12,7 @@ } /* makes the font 33% larger relative to the icon container */ -.fa-large:before { +.fa-lg:before { font-size: (4em / 3); vertical-align: -10%; } @@ -24,14 +24,14 @@ a { } } -/* increased font size for icon-large */ +/* increased font size for icon-lg */ .fa { &.fa-fixed-width { display: inline-block; width: (16em / 14); padding-right: (4em / 14); text-align: right; - &.fa-large { + &.fa-lg { width: (20em / 14); } } diff --git a/less/mixins.less b/less/mixins.less index 099aa3080..a20f4bd60 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -31,8 +31,7 @@ height: @height; line-height: @width; vertical-align: -35%; - [class^="fa-"], - [class*=" fa-"] { + .fa { position: absolute; display: block; width: 100%; diff --git a/src/_includes/community/requesting-new-icons.html b/src/_includes/community/requesting-new-icons.html index d710e2bb1..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="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 eee013a11..0102e9b75 100644 --- a/src/_includes/examples/animated-spinner.html +++ b/src/_includes/examples/animated-spinner.html @@ -2,18 +2,18 @@ <h2 class="page-header">Animated Spinner</h2> <div class="row"> <div class="span3"> - Use the <code>icon-spin</code> class to get any icon to rotate. Works well with <code>icon-spinner</code> and - <code>icon-refresh</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>. </div> <div class="span9"> <div class="well well-large well-transparent lead"> - <i class="icon-spinner icon-spin icon-large"></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="icon-spinner icon-spin icon-large"></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-info"> - <i class="icon-info-sign"></i> CSS3 animations aren't supported in IE7 - IE9. + <i class="fa fa-info-sign"></i> CSS3 animations aren't supported in IE7 - IE9. </p> </div> </div> diff --git a/src/_includes/examples/bordered-pulled.html b/src/_includes/examples/bordered-pulled.html index b5aa2bf17..e393b63b6 100644 --- a/src/_includes/examples/bordered-pulled.html +++ b/src/_includes/examples/bordered-pulled.html @@ -3,29 +3,29 @@ <div class="row"> <div class="span3"> <p> - Use <code>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="span9"> <div class="well well-large well-transparent"> - <i class="icon-quote-left icon-4x pull-left 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="icon-quote-left icon-4x pull-left 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="icon-flag icon-4x pull-left 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="icon-flag icon-4x pull-left 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/bulleted-lists.html b/src/_includes/examples/bulleted-lists.html index 73db34e47..1f048e478 100644 --- a/src/_includes/examples/bulleted-lists.html +++ b/src/_includes/examples/bulleted-lists.html @@ -4,28 +4,28 @@ <div class="span12"> </div> <div class="span3"> - <ul class="icons-ul"> - <li><i class="icon-li icon-ok"></i>Bulleted lists (like this one)</li> - <li><i class="icon-li icon-ok"></i>Buttons</li> - <li><i class="icon-li icon-ok"></i>Button groups</li> - <li><i class="icon-li icon-ok"></i>Navigation</li> - <li><i class="icon-li icon-ok"></i>Prepended form inputs</li> - <li><i class="icon-li icon-ok"></i>…and many more with custom CSS</li> + <ul class="fa-ul"> + <li><i class="fa-li fa fa-ok"></i>Bulleted lists (like this one)</li> + <li><i class="fa-li fa fa-ok"></i>Buttons</li> + <li><i class="fa-li fa fa-ok"></i>Button groups</li> + <li><i class="fa-li fa fa-ok"></i>Navigation</li> + <li><i class="fa-li fa fa-ok"></i>Prepended form inputs</li> + <li><i class="fa-li fa fa-ok"></i>…and many more with custom CSS</li> </ul> </div> <div class="span9"> <p>Easily replace individual bullets.</p> {% highlight html %} -<ul class="icons-ul"> - <li><i class="icon-li icon-ok"></i>Bulleted lists (like this one)</li> - <li><i class="icon-li icon-ok"></i>Buttons</li> - <li><i class="icon-li icon-ok"></i>Button groups</li> - <li><i class="icon-li icon-ok"></i>Navigation</li> - <li><i class="icon-li icon-ok"></i>Prepended form inputs</li> - <li><i class="icon-li icon-ok"></i>…and many more with custom CSS</li> +<ul class="fa-ul"> + <li><i class="fa-li fa fa-ok"></i>Bulleted lists (like this one)</li> + <li><i class="fa-li fa fa-ok"></i>Buttons</li> + <li><i class="fa-li fa fa-ok"></i>Button groups</li> + <li><i class="fa-li fa fa-ok"></i>Navigation</li> + <li><i class="fa-li fa fa-ok"></i>Prepended form inputs</li> + <li><i class="fa-li fa fa-ok"></i>…and many more with custom CSS</li> </ul> {% endhighlight %} - <div class="alert alert-info"><i class="icon-info-sign"></i> Make sure to NOT include any whitespace after the icon declaration.</div> + <div class="alert alert-info"><i class="fa fa-info-sign"></i> Make sure to NOT include any whitespace after the icon declaration.</div> </div> </div> </section> diff --git a/src/_includes/examples/button-dropdowns.html b/src/_includes/examples/button-dropdowns.html index 201eb1cd4..808fee30c 100644 --- a/src/_includes/examples/button-dropdowns.html +++ b/src/_includes/examples/button-dropdowns.html @@ -3,13 +3,13 @@ <div class="row"> <div class="span3"> <div class="btn-group open"> - <a class="btn btn-primary" href="#"><i class="icon-user"></i> User</a> + <a class="btn btn-primary" href="#"><i class="fa fa-user"></i> User</a> <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"> - <span class="icon-caret-down"></span></a> + <span class="fa fa-caret-down"></span></a> <ul class="dropdown-menu"> - <li><a href="#"><i class="icon-fixed-width icon-pencil"></i> Edit</a></li> - <li><a href="#"><i class="icon-fixed-width icon-trash"></i> Delete</a></li> - <li><a href="#"><i class="icon-fixed-width icon-ban-circle"></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-circle 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="span9"> {% highlight html %} <div class="btn-group open"> - <a class="btn btn-primary" href="#"><i class="icon-user"></i> User</a> + <a class="btn btn-primary" href="#"><i class="fa fa-user"></i> User</a> <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"> - <span class="icon-caret-down"></span></a> + <span class="fa fa-caret-down"></span></a> <ul class="dropdown-menu"> - <li><a href="#"><i class="icon-fixed-width icon-pencil"></i> Edit</a></li> - <li><a href="#"><i class="icon-fixed-width icon-trash"></i> Delete</a></li> - <li><a href="#"><i class="icon-fixed-width icon-ban-circle"></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-circle 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-info"><i class="icon-info-sign"></i> Don't forget to add the appropriate JavaScript to enable button dropdowns.</div> + <div class="alert alert-info"><i class="fa fa-info-sign"></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 ce4892309..b425746bd 100644 --- a/src/_includes/examples/button-groups.html +++ b/src/_includes/examples/button-groups.html @@ -4,20 +4,20 @@ <div class="span3"> <p> <div class="btn-group"> - <a class="btn" href="#"><i class="icon-align-left"></i></a> - <a class="btn" href="#"><i class="icon-align-center"></i></a> - <a class="btn" href="#"><i class="icon-align-right"></i></a> - <a class="btn" href="#"><i class="icon-align-justify"></i></a> + <a class="btn" href="#"><i class="fa fa-align-left"></i></a> + <a class="btn" href="#"><i class="fa fa-align-center"></i></a> + <a class="btn" href="#"><i class="fa fa-align-right"></i></a> + <a class="btn" href="#"><i class="fa fa-align-justify"></i></a> </div> </p> </div> <div class="span9"> {% highlight html %} <div class="btn-group"> - <a class="btn" href="#"><i class="icon-align-left"></i></a> - <a class="btn" href="#"><i class="icon-align-center"></i></a> - <a class="btn" href="#"><i class="icon-align-right"></i></a> - <a class="btn" href="#"><i class="icon-align-justify"></i></a> + <a class="btn" href="#"><i class="fa fa-align-left"></i></a> + <a class="btn" href="#"><i class="fa fa-align-center"></i></a> + <a class="btn" href="#"><i class="fa fa-align-right"></i></a> + <a class="btn" 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 b8d147c07..bd1ea4ca7 100644 --- a/src/_includes/examples/buttons.html +++ b/src/_includes/examples/buttons.html @@ -4,53 +4,53 @@ <div class="span3"> <p> <a class="btn" href="#"> - <i class="icon-repeat"></i> Reload</a> + <i class="fa fa-repeat"></i> Reload</a> <a class="btn btn-success" href="#"> - <i class="icon-shopping-cart icon-large"></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="icon-comment"></i> Comment</a> + <i class="fa fa-comment"></i> Comment</a> <a class="btn btn-small btn-info" href="#"> - <i class="icon-info-sign"></i> Info</a> + <i class="fa fa-info-sign"></i> Info</a> </p> <p> <a class="btn btn-danger" href="#"> - <i class="icon-trash icon-large"></i> Delete</a> + <i class="fa fa-trash fa-lg"></i> Delete</a> <a class="btn btn-small" href="#"> - <i class="icon-cog"></i> Settings</a> + <i class="fa fa-cog"></i> Settings</a> </p> <p> <a class="btn btn-large btn-danger" href="#"> - <i class="icon-flag 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-primary" href="#"> - <i class="icon-refresh icon-spin"></i> Synchronizing Content...</a> + <i class="fa fa-refresh fa-spin"></i> Synchronizing Content...</a> </p> </div> <div class="span9"> <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>icon-spin</code>. + <code>pull-right</code> and <code>pull-left</code>, and <code>fa-spin</code>. </p> {% highlight html %} <a class="btn" href="#"> - <i class="icon-repeat"></i> Reload</a> + <i class="fa fa-repeat"></i> Reload</a> <a class="btn btn-success" href="#"> - <i class="icon-shopping-cart icon-large"></i> Checkout</a> + <i class="fa fa-shopping-cart fa-lg"></i> Checkout</a> <a class="btn btn-large btn-primary" href="#"> - <i class="icon-comment"></i> Comment</a> + <i class="fa fa-comment"></i> Comment</a> <a class="btn btn-small btn-info" href="#"> - <i class="icon-info-sign"></i> Info</a> + <i class="fa fa-info-sign"></i> Info</a> <a class="btn btn-danger" href="#"> - <i class="icon-trash icon-large"></i> Delete</a> + <i class="fa fa-trash fa-lg"></i> Delete</a> <a class="btn btn-small" href="#"> - <i class="icon-cog"></i> Settings</a> + <i class="fa fa-cog"></i> Settings</a> <a class="btn btn-large btn-danger" href="#"> - <i class="icon-flag 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-primary" href="#"> - <i class="icon-refresh 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 dcb39a8f2..95a88b90a 100644 --- a/src/_includes/examples/form-inputs.html +++ b/src/_includes/examples/form-inputs.html @@ -4,11 +4,11 @@ <div class="span3"> <form> <div class="input-prepend"> - <span class="add-on"><i class="icon-envelope"></i></span> + <span class="add-on"><i class="fa fa-envelope"></i></span> <input class="span2" type="text" placeholder="Email address"> </div> <div class="input-prepend"> - <span class="add-on"><i class="icon-key"></i></span> + <span class="add-on"><i class="fa fa-key"></i></span> <input class="span2" type="password" placeholder="Password"> </div> </form> @@ -17,11 +17,11 @@ {% highlight html %} <form> <div class="input-prepend"> - <span class="add-on"><i class="icon-envelope"></i></span> + <span class="add-on"><i class="fa fa-envelope"></i></span> <input class="span2" type="text" placeholder="Email address"> </div> <div class="input-prepend"> - <span class="add-on"><i class="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 3965e7c2a..4aa9f519d 100644 --- a/src/_includes/examples/inline-icons.html +++ b/src/_includes/examples/inline-icons.html @@ -7,13 +7,13 @@ <div class="span9"> <div class="well well-transparent"> <div style="font-size: 24px; line-height: 1.5em;"> - <i class="icon-camera-retro"></i> icon-camera-retro + <i class="fa fa-camera-retro"></i> icon-camera-retro </div> </div> {% highlight html %} -<i class="icon-camera-retro"></i> icon-camera-retro +<i class="fa fa-camera-retro"></i> icon-camera-retro {% endhighlight %} - <div class="alert alert-info"><i class="icon-info-sign"></i> Icon classes are echoed via CSS :before.</div> + <div class="alert alert-info"><i class="fa fa-info-sign"></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 95f1ee13b..7338bce64 100644 --- a/src/_includes/examples/larger-icons.html +++ b/src/_includes/examples/larger-icons.html @@ -3,31 +3,31 @@ <div class="row"> <div class="span3"> <p> - To increase the size of icons relative to its container, use <code>icon-large</code>, <code>icon-2x</code>, - <code>icon-3x</code>, or <code>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="span9"> <p> - Increase the icon size by using the <code>icon-large</code> (33% increase), <code>icon-2x</code>, - <code>icon-3x</code>, or <code>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="icon-camera-retro icon-large"></i> icon-camera-retro</p> - <p><i class="icon-camera-retro icon-2x"></i> icon-camera-retro</p> - <p><i class="icon-camera-retro icon-3x"></i> icon-camera-retro</p> - <p><i class="icon-camera-retro icon-4x"></i> 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="icon-camera-retro icon-large"></i> icon-camera-retro</p> -<p><i class="icon-camera-retro icon-2x"></i> icon-camera-retro</p> -<p><i class="icon-camera-retro icon-3x"></i> icon-camera-retro</p> -<p><i class="icon-camera-retro icon-4x"></i> 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-info"> - <i class="icon-info-sign"></i> If your icons are getting chopped off on top and bottom, make sure you have + <i class="fa fa-info-sign"></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/navigation.html b/src/_includes/examples/navigation.html index 850e64442..118564938 100644 --- a/src/_includes/examples/navigation.html +++ b/src/_includes/examples/navigation.html @@ -4,10 +4,10 @@ <div class="span3"> <div class="well" style="padding: 8px 0;"> <ul class="nav nav-list"> - <li class="active"><a href="#"><i class="icon-fixed-width icon-home"></i> Home</a></li> - <li><a href="#"><i class="icon-fixed-width icon-book"></i> Library</a></li> - <li><a href="#"><i class="icon-fixed-width icon-pencil"></i> Applications</a></li> - <li><a href="#"><i class="icon-fixed-width icon-cogs"></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> @@ -15,10 +15,10 @@ <p>Use Font Awesome icons in navigation to provide helpful visual cues.</p> {% highlight html %} <ul class="nav nav-list"> - <li class="active"><a href="#"><i class="icon-fixed-width icon-home"></i> Home</a></li> - <li><a href="#"><i class="icon-fixed-width icon-book"></i> Library</a></li> - <li><a href="#"><i class="icon-fixed-width icon-pencil"></i> Applications</a></li> - <li><a href="#"><i class="icon-fixed-width icon-cogs"></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 8393f7d36..06201c599 100644 --- a/src/_includes/examples/new.html +++ b/src/_includes/examples/new.html @@ -4,42 +4,42 @@ <div class="span4"> <h4><a href="#rotated-flipped">Rotated and Flipped Icons</a></h4> <div class="well well-transparent"> - <i class="icon-shield"></i> normal<br> - <i class="icon-shield icon-rotate-90"></i> icon-rotate-90<br> - <i class="icon-shield icon-rotate-180"></i> icon-rotate-180<br> - <i class="icon-shield icon-rotate-270"></i> icon-rotate-270<br> - <i class="icon-shield icon-flip-horizontal"></i> icon-flip-horizontal<br> - <i class="icon-shield icon-flip-vertical"></i> icon-flip-vertical + <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="span4"> <h4><a href="#stacked">Stacked Icons</a></h4> <div class="well well-transparent stacked"> - <span class="icon-stack"> - <i class="icon-check-empty icon-stack-base"></i> - <i class="icon-twitter"></i> + <span class="fa-stack"> + <i class="fa fa-unchecked fa-stack-base"></i> + <i class="fa fa-twitter"></i> </span> - icon-twitter on icon-check-empty<br> - <span class="icon-stack"> - <i class="icon-circle icon-stack-base"></i> - <i class="icon-flag icon-light"></i> + fa-twitter on fa-check-empty<br> + <span class="fa-stack"> + <i class="fa fa-circle fa-stack-base"></i> + <i class="fa fa-flag fa-light"></i> </span> - icon-flag on icon-circle<br> - <span class="icon-stack"> - <i class="icon-sign-blank icon-stack-base"></i> - <i class="icon-terminal icon-light"></i> + 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> - icon-terminal on icon-sign-blank + fa-terminal on fa-sign-blank </div> </div> <div class="span4"> <h4><a href="#bulleted-lists">Better Bulleted Lists</a></h4> <div class="well well-transparent"> - <ul class="icons-ul"> - <li><i class="icon-li icon-chevron-sign-right"></i>New bulleted lists</li> - <li><i class="icon-li icon-bullseye"></i>Fix some old bugs</li> - <li><i class="icon-li icon-play-sign"></i>And deal with arbitrary</li> - <li><i class="icon-li icon-ok-sign"></i>Font sizes better</li> + <ul class="fa-ul"> + <li><i class="fa fa-li fa-chevron-sign-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-sign"></i>And deal with arbitrary</li> + <li><i class="fa fa-li fa-ok-sign"></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 cf061cd59..9eb051432 100644 --- a/src/_includes/examples/rotated-flipped.html +++ b/src/_includes/examples/rotated-flipped.html @@ -6,23 +6,23 @@ </div> <div class="span9"> <div class="well well-large well-transparent lead"> - <i class="icon-shield"></i> normal<br> - <i class="icon-shield icon-rotate-90"></i> icon-rotate-90<br> - <i class="icon-shield icon-rotate-180"></i> icon-rotate-180<br> - <i class="icon-shield icon-rotate-270"></i> icon-rotate-270<br> - <i class="icon-shield icon-flip-horizontal"></i> icon-flip-horizontal<br> - <i class="icon-shield icon-flip-vertical"></i> icon-flip-vertical + <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="icon-shield"></i> normal<br> -<i class="icon-shield icon-rotate-90"></i> icon-rotate-90<br> -<i class="icon-shield icon-rotate-180"></i> icon-rotate-180<br> -<i class="icon-shield icon-rotate-270"></i> icon-rotate-270<br> -<i class="icon-shield icon-flip-horizontal"></i> icon-flip-horizontal<br> -<i class="icon-shield icon-flip-vertical"></i> icon-flip-vertical +<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-info"> - <i class="icon-info-sign"></i> Rotating and flipping icons aren't yet supported in IE7. + <i class="fa fa-info-sign"></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 3e7240c12..758384116 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="span3"> - A method for easily stacking multiple icons. Use the <code>icon-stack</code> class on the parent and - <code>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="span9"> <div class="well well-large well-transparent lead"> - <span class="icon-stack"> - <i class="icon-check-empty icon-stack-base"></i> - <i class="icon-twitter"></i> + <span class="fa-stack"> + <i class="fa fa-check-empty fa-stack-base"></i> + <i class="fa fa-twitter"></i> </span> - icon-twitter on icon-check-empty<br> - <span class="icon-stack"> - <i class="icon-circle icon-stack-base"></i> - <i class="icon-flag icon-light"></i> + fa-twitter on fa-check-empty<br> + <span class="fa-stack"> + <i class="fa fa-circle fa-stack-base"></i> + <i class="fa fa-flag fa-light"></i> </span> - icon-flag on icon-circle<br> - <span class="icon-stack"> - <i class="icon-sign-blank icon-stack-base"></i> - <i class="icon-terminal icon-light"></i> + 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> - icon-terminal on icon-sign-blank<br> - <span class="icon-stack"> - <i class="icon-camera"></i> - <i class="icon-ban-circle icon-stack-base text-error"></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-error"></i> </span> - icon-camera on icon-ban-circle + fa-camera on fa-ban-circle </div> {% highlight html %} -<span class="icon-stack"> - <i class="icon-check-empty icon-stack-base"></i> - <i class="icon-twitter"></i> +<span class="fa-stack"> + <i class="fa fa-check-empty fa-stack-base"></i> + <i class="fa fa-twitter"></i> </span> -icon-twitter on icon-check-empty<br> -<span class="icon-stack"> - <i class="icon-circle icon-stack-base"></i> - <i class="icon-flag icon-light"></i> +fa-twitter on fa-check-empty<br> +<span class="fa-stack"> + <i class="fa fa-circle fa-stack-base"></i> + <i class="fa fa-flag fa-light"></i> </span> -icon-flag on icon-circle<br> -<span class="icon-stack"> - <i class="icon-sign-blank icon-stack-base"></i> - <i class="icon-terminal icon-light"></i> +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> -icon-terminal on icon-sign-blank<br> -<span class="icon-stack"> - <i class="icon-camera"></i> - <i class="icon-ban-circle icon-stack-base text-error"></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-error"></i> </span> -icon-camera on 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 186b1524d..e8d44bd77 100644 --- a/src/_includes/footer.html +++ b/src/_includes/footer.html @@ -1,7 +1,7 @@ <footer class="footer hidden-print"> <div class="container text-center"> <div> - <i class="icon-flag"></i> Font Awesome {{ site.fontawesome.version }} + <i class="fa fa-flag"></i> Font Awesome {{ site.fontawesome.version }} <span class="hidden-phone">·</span><br class="visible-phone"> 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="icon-maxcdn"></i> MaxCDN</a> for providing the excellent <a href="http://www.bootstrapcdn.com/#tab_fontawesome">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/#tab_fontawesome">BootstrapCDN for Font Awesome</a> </div> <div class="project"> <a href="{{ site.fontawesome.github.url }}">GitHub Project</a> · diff --git a/src/_includes/get-started.html b/src/_includes/get-started.html index 443ba9483..24053d97d 100644 --- a/src/_includes/get-started.html +++ b/src/_includes/get-started.html @@ -18,7 +18,7 @@ <link href="//netdna.bootstrapcdn.com/font-awesome/{{ site.fontawesome.version }}/css/font-awesome.css" rel="stylesheet"> {% endhighlight %} <div class="alert alert-info margin-top"> - <i class="icon-info-sign"></i> Want to use Font Awesome by itself without Bootstrap? Just don't include the first line. + <i class="fa fa-info-sign"></i> Want to use Font Awesome by itself without Bootstrap? Just don't include the first line. </div> </li> <li> @@ -66,7 +66,7 @@ {% highlight html %} @FontAwesomePath: "../font"; {% endhighlight %} - <p class="alert alert-info"><i class="icon-info-sign"></i> The font path is relative from your compiled CSS directory.</p> + <p class="alert alert-info"><i class="fa fa-info-sign"></i> The font path is relative from your compiled CSS directory.</p> </li> <li>Re-compile your LESS 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/_includes/icons/brand.html b/src/_includes/icons/brand.html index feb6032e8..a4848e99c 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="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="icon-{{ icon.class }}"></i> icon-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div> + <div class="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> icon-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div> {% endfor %} </div> </section> diff --git a/src/_includes/icons/currency.html b/src/_includes/icons/currency.html index c451d5211..d820f66a4 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="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="icon-{{ icon.class }}"></i> icon-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div> + <div class="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> icon-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div> {% endfor %} </div> diff --git a/src/_includes/icons/directional.html b/src/_includes/icons/directional.html index 6b4170a1b..2939dbeb4 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="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="icon-{{ icon.class }}"></i> icon-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div> + <div class="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> icon-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div> {% endfor %} </div> diff --git a/src/_includes/icons/medical.html b/src/_includes/icons/medical.html index 7d4cd7f97..116180262 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="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="icon-{{ icon.class }}"></i> icon-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div> + <div class="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> icon-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div> {% endfor %} </div> diff --git a/src/_includes/icons/new.html b/src/_includes/icons/new.html index 52c5e3fa6..2addfd5e3 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="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="icon-{{ icon.class }}"></i> icon-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div> + <div class="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> icon-{{ icon.class }}{% if icon.alias_of %} <span class="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 2c2d4955c..ddc6b057b 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="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="icon-{{ icon.class }}"></i> icon-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div> + <div class="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> icon-{{ icon.class }}{% if icon.alias_of %} <span class="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 5fcbe133b..e41005599 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="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="icon-{{ icon.class }}"></i> icon-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div> + <div class="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> icon-{{ icon.class }}{% if icon.alias_of %} <span class="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 f70d727f7..c23853a40 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="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="icon-{{ icon.class }}"></i> icon-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div> + <div class="span3"><a href="{{ page.relative_path }}icon/{{ icon.id }}"><i class="fa fa-{{ icon.class }}"></i> icon-{{ icon.class }}{% if icon.alias_of %} <span class="muted">(alias)</span>{% endif %}</a></div> {% endfor %} </div> diff --git a/src/_includes/jumbotron-slider.html b/src/_includes/jumbotron-slider.html index 362eeac70..e33be31c5 100644 --- a/src/_includes/jumbotron-slider.html +++ b/src/_includes/jumbotron-slider.html @@ -8,7 +8,7 @@ <div class="actions"> <a class="btn btn-primary btn-large" href="{{ page.relative_path }}assets/font-awesome.zip" onClick="_gaq.push(['_trackEvent', 'Outbound Link', 'Download on GitHub']);"> - <i class="icon-download-alt icon-large"></i> + <i class="fa fa-download-alt fa-lg"></i> Download </a> </div> @@ -25,26 +25,26 @@ <div id="iconCarousel" class="carousel slide"> <!-- Carousel items --> <div class="carousel-inner"> - <div class="active item"><div><i class="icon-flag"></i></div></div> - <div class="item"><div><i class="icon-compass"></i></div></div> - <div class="item"><div><i class="icon-rocket"></i></div></div> - <div class="item"><div><i class="icon-shield"></i></div></div> - <div class="item"><div><i class="icon-star-half-empty"></i></div></div> - <div class="item"><div><i class="icon-envelope-alt"></i></div></div> - <div class="item"><div><i class="icon-medkit"></i></div></div> - <div class="item"><div><i class="icon-book"></i></div></div> - <div class="item"><div><i class="icon-fighter-jet"></i></div></div> - <div class="item"><div><i class="icon-beer"></i></div></div> - <div class="item"><div><i class="icon-heart-empty"></i></div></div> - <div class="item"><div><i class="icon-thumbs-up"></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-empty"></i></div></div> + <div class="item"><div><i class="fa fa-thumbs-up"></i></div></div> </div> <!-- Carousel nav --> <a class="carousel-control left" href="#iconCarousel" data-slide="prev" onClick="_gaq.push(['_trackEvent', 'iconCarousel', 'Prev']);"> - <i class="icon-circle-arrow-left"></i></a> + <i class="fa fa-circle-arrow-left"></i></a> <a class="carousel-control right" href="#iconCarousel" data-slide="next" onClick="_gaq.push(['_trackEvent', 'iconCarousel', 'Next']);"> - <i class="icon-circle-arrow-right"></i></a> + <i class="fa fa-circle-arrow-right"></i></a> </div> </div> </div> diff --git a/src/_includes/license.html b/src/_includes/license.html index 8b2948095..3dd4a7519 100644 --- a/src/_includes/license.html +++ b/src/_includes/license.html @@ -8,9 +8,9 @@ <div> <div class="alert alert-info"> - <ul class="icons-ul margin-bottom-none"> + <ul class="fa-ul margin-bottom-none"> <li> - <i class="icon-li icon-info-sign icon-large"></i>Attribution is no longer required as of Font Awesome 3.0 but is much appreciated: + <i class="fa-li fa fa-info-sign 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/_includes/navbar.html b/src/_includes/navbar.html index 99e1f5819..37a5ee387 100644 --- a/src/_includes/navbar.html +++ b/src/_includes/navbar.html @@ -7,7 +7,7 @@ <span class="icon-bar"></span> </a> - <a class="brand" href="{{ page.relative_path }}"><i class="icon-flag"></i> Font Awesome</a> + <a class="brand" href="{{ page.relative_path }}"><i class="fa fa-flag"></i> Font Awesome</a> <div class="nav-collapse collapse"> <ul class="nav"> <li class="hidden-tablet {% if page.navbar_active == "home" %} active{% endif %}"><a href="{{ page.relative_path }}">Home</a></li> @@ -15,25 +15,25 @@ <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-phone{% if page.navbar_active == "icons" %} active{% endif %}"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> - <i class="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="icon-flag 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="icon-shield icon-fixed-width"></i> New Icons in {{ site.fontawesome.version }}</a></li> - <li><a href="{{ page.relative_path }}icons/#web-application"><i class="icon-camera-retro icon-fixed-width"></i> Web Application Icons</a></li> - <li><a href="{{ page.relative_path }}icons/#currency"><i class="icon-won icon-fixed-width"></i> Currency Icons</a></li> - <li><a href="{{ page.relative_path }}icons/#text-editor"><i class="icon-file-text-alt icon-fixed-width"></i> Text Editor Icons</a></li> - <li><a href="{{ page.relative_path }}icons/#directional"><i class="icon-hand-right icon-fixed-width"></i> Directional Icons</a></li> - <li><a href="{{ page.relative_path }}icons/#video-player"><i class="icon-play-sign icon-fixed-width"></i> Video Player Icons</a></li> - <li><a href="{{ page.relative_path }}icons/#brand"><i class="icon-github icon-fixed-width"></i> Brand Icons</a></li> - <li><a href="{{ page.relative_path }}icons/#medical"><i class="icon-medkit icon-fixed-width"></i> Medical Icons</a></li> + <li><a href="{{ page.relative_path }}icons/#new"><i class="fa fa-shield fa-fixed-width"></i> New Icons in {{ site.fontawesome.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-right fa-fixed-width"></i> Directional Icons</a></li> + <li><a href="{{ page.relative_path }}icons/#video-player"><i class="fa fa-play-sign 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-phone{% if page.navbar_active == "examples" %} active{% endif %}"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"> - <i class="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> diff --git a/src/_includes/tell-me-thanks.html b/src/_includes/tell-me-thanks.html index 94be6b209..85313f15e 100644 --- a/src/_includes/tell-me-thanks.html +++ b/src/_includes/tell-me-thanks.html @@ -6,7 +6,7 @@ </p> <div class="row"> <div class="span6"> - <h3><a href="https://www.gittip.com/davegandy/"><i class="icon-gittip"></i> Tip me on Gittip</a></h3> + <h3><a href="https://www.gittip.com/davegandy/"><i class="fa fa-gittip"></i> Tip me on Gittip</a></h3> <p> Gittip is a great way to let developers know you appreciate their work. </p> diff --git a/src/_includes/thanks-to.html b/src/_includes/thanks-to.html index 8a2d15208..91632e39c 100644 --- a/src/_includes/thanks-to.html +++ b/src/_includes/thanks-to.html @@ -17,7 +17,7 @@ </div> <div class="span4"> <p> - Thanks to <a href="http://maxcdn.com"><i class="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/whats-new.html b/src/_includes/whats-new.html index d413d0dec..377621d73 100644 --- a/src/_includes/whats-new.html +++ b/src/_includes/whats-new.html @@ -10,27 +10,27 @@ <div id="whats-new"> <div class="row"> <div class="span4"> - <h4><i class="icon-compass"></i> {{ icons | version:site.fontawesome.minor_version | size }} New Icons in {{ site.fontawesome.minor_version }}</h4> + <h4><i class="fa fa-compass"></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 class="span4"> - <h4><i class="icon-terminal"></i> SCSS Support</h4> + <h4><i class="fa fa-terminal"></i> SCSS Support</h4> A long term solution is now in place for SCSS support. Need SASS? Try <a href="http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#syntax">sass-convert</a>. </div> <div class="span4"> - <h4><i class="icon-legal"></i> <a href="{{ page.relative_path }}license/">Better & Simpler License</a></h4> + <h4><i class="fa fa-legal"></i> <a href="{{ page.relative_path }}license/">Better & Simpler License</a></h4> SIL OFL 1.1 for font, MIT license for code. No more attribution required, but much appreciated. </div> <div class="span4 margin-bottom-large"> - <h4><i class="icon-magic"></i> Pixel Perfection at 14px</h4> + <h4><i class="fa fa-magic"></i> Pixel Perfection at 14px</h4> Version 3 was re-created from the ground up to be razor sharp at Bootstrap's default 14px. </div> <div class="span4"> - <h4><i class="icon-th-large"></i> <a href="http://icnfnt.com/">Font Subsetting</a></h4> + <h4><i class="fa fa-th-large"></i> <a href="http://icnfnt.com/">Font Subsetting</a></h4> Thanks to <a href="https://twitter.com/grantgordon">@grantgordon</a> and <a href="https://twitter.com/johnsmclay">@johnsmclay</a>, you can <a href="http://icnfnt.com/">subset</a> to get just the icons you need. </div> <div class="span4"> - <h4><i class="icon-question-sign"></i> Want More Details?</h4> + <h4><i class="fa fa-question-sign"></i> Want More Details?</h4> Check out the <a href="{{ site.fontawesome.github.url }}#changelog">CHANGELOG on the GitHub project</a> to see what's new and changed. </div> diff --git a/src/_includes/why.html b/src/_includes/why.html index ce3b87d13..e68666a3a 100644 --- a/src/_includes/why.html +++ b/src/_includes/why.html @@ -1,40 +1,40 @@ <div id="why"> <div class="row"> <div class="span4"> - <h4><i class="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="span4"> - <h4><i class="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="span4"> - <h4><i class="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="span4"> - <h4><i class="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="span4"> - <h4><i class="icon-ok"></i> IE7 Support</h4> + <h4><i class="fa fa-ok"></i> IE7 Support</h4> Font Awesome supports IE7. If you need it, you have my condolences. </div> <div class="span4"> - <h4><i class="icon-eye-open"></i> Perfect on Retina Displays</h4> + <h4><i class="fa fa-eye-open"></i> Perfect on Retina Displays</h4> Font Awesome icons are vectors, which mean they're gorgeous on high-resolution displays. </div> <div class="span4"> - <h4><i class="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="span4"> - <h4><i class="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="span4"> - <h4><i class="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 28d263b98..b0e4f6df6 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="icon-{{ page.icon.id }} icon-6"></i> + <i class="fa fa-{{ page.icon.id }} fa-6"></i> <span class="hidden-phone"> - <i class="icon-{{ page.icon.id }} icon-5"></i> - <span class="hidden-tablet"><i class="icon-{{ page.icon.id }} icon-4"></i> </span> - <i class="icon-{{ page.icon.id }} icon-3"></i> - <i class="icon-{{ page.icon.id }} icon-2"></i> + <i class="fa fa-{{ page.icon.id }} fa-5"></i> + <span class="hidden-tablet"><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="icon-{{ page.icon.id }} icon-1"></i> + <i class="fa fa-{{ page.icon.id }} fa-1"></i> </div> <h1 class="info-class"> - icon-{{ page.icon.id }} + fa-{{ page.icon.id }} <small> - <i class="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 %} - 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="icon-{{ page.icon.id }}"></i> icon-{{ page.icon.id }} + <i class="fa fa-{{ page.icon.id }}"></i> fa-{{ page.icon.id }} </div> </div> {% highlight html %} -<i class="icon-{{ page.icon.id }}"></i> icon-{{ page.icon.id }} +<i class="fa fa-{{ page.icon.id }}"></i> fa-{{ page.icon.id }} {% endhighlight %} <br> - <div class="lead"><i class="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="span3"> <div class="info-ad">{% include ads/carbon-light-vertical.html %}</div> diff --git a/src/assets/font-awesome/less/bootstrap.less b/src/assets/font-awesome/less/bootstrap.less index 90ddc1b73..6ffc24733 100644 --- a/src/assets/font-awesome/less/bootstrap.less +++ b/src/assets/font-awesome/less/bootstrap.less @@ -21,13 +21,13 @@ .btn, .nav { .{{ site.fontawesome.css_prefix }} { // display: inline; - &.{{ site.fontawesome.css_prefix }}-large { line-height: .9em; } + &.{{ site.fontawesome.css_prefix }}-lg { line-height: .9em; } &.{{ site.fontawesome.css_prefix }}-spin { display: inline-block; } } } .nav-tabs, .nav-pills { .{{ site.fontawesome.css_prefix }} { - &, &.{{ site.fontawesome.css_prefix }}-large { line-height: .9em; } + &, &.{{ site.fontawesome.css_prefix }}-lg { line-height: .9em; } } } .btn { @@ -35,7 +35,7 @@ &.pull-left, &.pull-right { &.{{ site.fontawesome.css_prefix }}-2x { margin-top: .18em; } } - &.{{ site.fontawesome.css_prefix }}-spin.{{ site.fontawesome.css_prefix }}-large { line-height: .8em; } + &.{{ site.fontawesome.css_prefix }}-spin.{{ site.fontawesome.css_prefix }}-lg { line-height: .8em; } } } .btn.btn-small { diff --git a/src/assets/font-awesome/less/core.less b/src/assets/font-awesome/less/core.less index 30a3709d2..b05388412 100644 --- a/src/assets/font-awesome/less/core.less +++ b/src/assets/font-awesome/less/core.less @@ -14,7 +14,7 @@ } /* makes the font 33% larger relative to the icon container */ -.{{ site.fontawesome.css_prefix }}-large:before { +.{{ site.fontawesome.css_prefix }}-lg:before { font-size: (4em / 3); vertical-align: -10%; } @@ -26,14 +26,14 @@ a { } } -/* increased font size for icon-large */ +/* increased font size for icon-lg */ .{{ site.fontawesome.css_prefix }} { &.{{ site.fontawesome.css_prefix }}-fixed-width { display: inline-block; width: (16em / 14); padding-right: (4em / 14); text-align: right; - &.{{ site.fontawesome.css_prefix }}-large { + &.{{ site.fontawesome.css_prefix }}-lg { width: (20em / 14); } } diff --git a/src/assets/font-awesome/less/mixins.less b/src/assets/font-awesome/less/mixins.less index 099aa3080..0994f0634 100644 --- a/src/assets/font-awesome/less/mixins.less +++ b/src/assets/font-awesome/less/mixins.less @@ -1,3 +1,5 @@ +--- +--- // Mixins // -------------------------- @@ -24,15 +26,14 @@ } .icon-stack(@width: 2em, @height: 2em, @top-font-size: 1em, @base-font-size: 2em) { - .fa-stack { + .{{ site.fontawesome.css_prefix }}-stack { position: relative; display: inline-block; width: @width; height: @height; line-height: @width; vertical-align: -35%; - [class^="fa-"], - [class*=" fa-"] { + .{{ site.fontawesome.css_prefix }} { position: absolute; display: block; width: 100%; @@ -42,7 +43,7 @@ *line-height: @height; text-align: center; } - .fa-stack-base { + .{{ site.fontawesome.css_prefix }}-stack-base { font-size: @base-font-size; *line-height: (@height / @base-font-size); } diff --git a/src/assets/less/responsive-767px-max.less b/src/assets/less/responsive-767px-max.less index 38484c786..a83e063f6 100755 --- a/src/assets/less/responsive-767px-max.less +++ b/src/assets/less/responsive-767px-max.less @@ -46,8 +46,8 @@ } .jumbotron-icon { - .icon-1, .icon-2, .icon-3, .icon-4, .icon-5, .icon-6 { margin-right: 0; } - .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/assets/less/site.less b/src/assets/less/site.less index 04b0beaa3..d2f8f4d99 100644 --- a/src/assets/less/site.less +++ b/src/assets/less/site.less @@ -10,7 +10,7 @@ .navbar .brand { font-family: @serifFontFamily; - .icon-flag { padding-right: 3px; } + .fa-flag { padding-right: 3px; } } .navbar .nav > li > a { padding: 12px 10px 9px; } @@ -74,18 +74,19 @@ h1, h2, h3, h4, h5, h6 { font-family: @serifFontFamily; } } .actions { margin-top: 25px;} text-shadow: 2px 2px 2px @grayDark; - ul { - margin-left: 50px; - li { - &.icon-large:before { - text-indent: -2em; - vertical-align: baseline; - } - font-size: 15px; - line-height: 30px; - text-shadow: 1px 1px 1px @grayDark; - } - } + // unsure if block below still in use +// ul { +// margin-left: 50px; +// li { +// &.icon-large:before { +// text-indent: -2em; +// vertical-align: baseline; +// } +// font-size: 15px; +// line-height: 30px; +// text-shadow: 1px 1px 1px @grayDark; +// } +// } .btn-large { font-family: @serifFontFamily; font-weight: 500; @@ -157,13 +158,13 @@ h1, h2, h3, h4, h5, h6 { font-family: @serifFontFamily; } dd { margin-left: @horizontalComponentOffset - 85; } } } - .icon-2 { font-size: 2em; } - .icon-3 { font-size: 4em; } - .icon-4 { font-size: 7em; } - .icon-5 { font-size: 12em; } - .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; } - .icon-1, .icon-2, .icon-3, .icon-4, .icon-5, .icon-6 { margin-right: 1/14em; } + .fa-1, .fa-2, .fa-3, .fa-4, .fa-5, .fa-6 { margin-right: 1/14em; } } //.info-ad { @@ -232,8 +233,7 @@ section { margin-top: 40px; } padding-left: 10px; .border-radius(6px); - [class^="icon-"], - [class*=" icon-"] { + .fa { width: 32px; font-size: 14px; display: inline-block; @@ -244,13 +244,12 @@ section { margin-top: 40px; } &:hover { background-color: @errorBackground; text-decoration: none; - [class^="icon-"], [class*=" icon-"] { + .fa { *font-size: 28px; *vertical-align: middle; } - [class^="icon-"]:before, - [class*=" icon-"]:before { + .fa:before { font-size: 28px; vertical-align: -5px; } @@ -262,8 +261,7 @@ section { margin-top: 40px; } #why, #whats-new { .span4 { margin-bottom: 20px; } h4 { - [class^="icon-"]:before, - [class*=" icon-"]:before { + .fa:before { vertical-align: -10%; font-size: 28px; display: inline-block; diff --git a/src/community.html b/src/community.html index c3c466e47..e53a67bac 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="icon-thumbs-up-alt icon-large"></i> Community{% endcapture %} +{% capture jumbotron_h1 %}<i class="fa fa-thumbs-up-alt fa-lg"></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 07253b267..ae854d8fa 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="icon-magic icon-large"></i> Examples{% endcapture %} +{% capture jumbotron_h1 %}<i class="fa fa-magic fa-large"></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 31e204932..5336e70c1 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="icon-cogs icon-large"></i> Get Started{% endcapture %} +{% capture jumbotron_h1 %}<i class="fa fa-cogs fa-lg"></i> Get Started{% endcapture %} {% capture jumbotron_p %}Easy ways to get Font Awesome {{ site.fontawesome.version }} onto your website{% endcapture %} {% include jumbotron.html %} diff --git a/src/icons.html b/src/icons.html index 6dc589d8c..193b82d1b 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="icon-flag icon-large"></i> The Icons{% endcapture %} +{% capture jumbotron_h1 %}<i class="fa fa-flag fa-lg"></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 990071460..2286985a8 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="icon-legal icon-large"></i> License{% endcapture %} +{% capture jumbotron_h1 %}<i class="fa fa-legal fa-lg"></i> License{% endcapture %} {% capture jumbotron_p %}The full details of how Font Awesome is licensed{% endcapture %} {% include jumbotron.html %} diff --git a/src/whats-new.html b/src/whats-new.html index f6c1da17e..95dcf3aff 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="icon-lightbulb icon-large"></i> What's New{% endcapture %} +{% capture jumbotron_h1 %}<i class="fa fa-lightbulb fa-lg"></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 %} |