updating download modal

This commit is contained in:
Dave Gandy 2017-05-23 16:47:25 -04:00
parent 0751e276a8
commit ca6c0e595d
7 changed files with 113 additions and 69 deletions

Binary file not shown.

View File

@ -1,5 +0,0 @@
@media print {
.col-print-4 {
.make-xs-column(4);
}
}

Binary file not shown.

View File

@ -5,7 +5,7 @@ $(function () {
{ {
quote: "Pre-order and get Font Awesome 5 Pro and <strong>ALL</strong> stretch goals for just $40!", quote: "Pre-order and get Font Awesome 5 Pro and <strong>ALL</strong> stretch goals for just $40!",
class: "fa5", class: "fa5",
url: "http://five.fontawesome.com", url: "https://fontawesome.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=banner&utm_campaign=promo_4.7_update",
btn_text: "Pre-order FA Pro! &nbsp;<i class='fa fa-external-link'></i>", btn_text: "Pre-order FA Pro! &nbsp;<i class='fa fa-external-link'></i>",
}, },
]; ];

View File

@ -268,7 +268,7 @@
<div class="download-preprocessors" id="download-preprocessors"> <div class="download-preprocessors" id="download-preprocessors">
<h3>Using Sass or Less</h3> <h3>Using Sass or Less</h3>
<p>Use this method to customize Font Awesome 4.7.0 using LESS or SASS.</p> <p>Use this method to customize Font Awesome 4.7.0 using Less or Sass.</p>
<ol> <ol>
<li>Copy the <code>font-awesome/</code> directory into your project.</li> <li>Copy the <code>font-awesome/</code> directory into your project.</li>
<li> <li>
@ -278,7 +278,7 @@
</code></pre></div> </code></pre></div>
<p class="alert alert-success"><i class="fa fa-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>
<li>Re-compile your LESS or SASS if using a static compiler. Otherwise, you should be good to go.</li> <li>Re-compile your Less or Sass if using a static compiler. Otherwise, you should be good to go.</li>
<li>Check out the <a href="../examples/">examples</a> to start using Font Awesome!</li> <li>Check out the <a href="../examples/">examples</a> to start using Font Awesome!</li>
</ol> </ol>
</div> </div>
@ -295,10 +295,10 @@
</h2> </h2>
<div class="ruby-gem-less margin-bottom-xl" id="ruby-gem-less"> <div class="ruby-gem-less margin-bottom-xl" id="ruby-gem-less">
<h3><a href="https://github.com/FortAwesome/font-awesome-less">LESS Ruby Gem</a></h3> <h3><a href="https://github.com/FortAwesome/font-awesome-less">Less Ruby Gem</a></h3>
<p> <p>
Use the <a href="https://github.com/FortAwesome/font-awesome-less">Official Font Awesome LESS Ruby Gem</a> to easily get Font Use the <a href="https://github.com/FortAwesome/font-awesome-less">Official Font Awesome Less Ruby Gem</a> to easily get Font
Awesome LESS into a Rails project. Generously maintained by <a href="https://twitter.com/supercodepoet/">@supercodepoet</a>. Awesome Less into a Rails project. Generously maintained by <a href="https://twitter.com/supercodepoet/">@supercodepoet</a>.
</p> </p>
<ol> <ol>
<li> <li>
@ -325,10 +325,10 @@
</div> </div>
<div class="ruby-gem-sass" id="ruby-gem-sass"> <div class="ruby-gem-sass" id="ruby-gem-sass">
<h3><a href="https://github.com/FortAwesome/font-awesome-sass">SASS Ruby Gem</a></h3> <h3><a href="https://github.com/FortAwesome/font-awesome-sass">Sass Ruby Gem</a></h3>
<p> <p>
Use the <a href="https://github.com/FortAwesome/font-awesome-sass">Official Font Awesome SASS Ruby Gem</a> to easily get Font Use the <a href="https://github.com/FortAwesome/font-awesome-sass">Official Font Awesome Sass Ruby Gem</a> to easily get Font
Awesome SASS into a Rails or Compass project. Generously maintained by <a href="https://twitter.com/supercodepoet/">@supercodepoet</a>. Awesome Sass into a Rails or Compass project. Generously maintained by <a href="https://twitter.com/supercodepoet/">@supercodepoet</a>.
</p> </p>
<ol> <ol>
<li> <li>
@ -409,46 +409,56 @@
</h2> </h2>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<div class="text-lg margin-bottom-lg"> <div class="text-lg margin-bottom-lg padding-bottom">
Before you download, check out our latest project: Fort Awesome&mdash; Before you download, check out <b>Font Awesome Pro&mdash;</b>
</div> </div>
<div class="row"> <div class="row margin-bottom-lg">
<div class="col-md-6 col-sm-6 margin-bottom-lg"> <div class="col-md-2 col-sm-2 col-xs-2 text-right padding-right-sm">
<h4 class="page-header margin-top-none padding-bottom-sm margin-bottom-sm">More Sets</h4> <i class="fas fas-money fas-3x fas-fw text-muted hidden-xs"></i>
Font Awesome not the right look? We've got the perfect icon set for your website! <i class="fas fas-money fas-2x fas-fw text-muted hidden-sm hidden-md hidden-lg"></i>
</div> </div>
<div class="col-md-6 col-sm-6 margin-bottom-lg"> <div class="col-md-9 col-sm-9 col-xs-10">
<h4 class="page-header margin-top-none padding-bottom-sm margin-bottom-sm">Your Icons</h4> <h4 class="page-header margin-top-none padding-bottom-sm margin-bottom-sm">Super Low Price</h4>
Copy &amp; paste your own logo and icons directly into Fort Awesome. Easy peasy. <p>
For a limited time, get Pro, all 46 icon packs ($460 value), &amp; ALL Kickstarter stretch goals!
</p>
</div> </div>
<div class="col-md-6 col-sm-6 margin-bottom-lg">
<h4 class="page-header margin-top-none padding-bottom-sm margin-bottom-sm">Fonts Too!</h4>
Subset and serve your typefaces too! We've got some great ones to start with.
</div> </div>
<div class="col-md-6 col-sm-6 margin-bottom-lg"> <div class="row margin-bottom-lg">
<h4 class="page-header margin-top-none padding-bottom-sm margin-bottom-sm">Optimized</h4> <div class="col-md-2 col-sm-2 col-xs-2 text-right padding-right-sm">
Subsetting your icons and typefaces often shrinks them by 95% or more! <i class="fas fas-trophy-alt fas-3x fas-fw text-muted hidden-xs"></i>
<i class="fas fas-trophy-alt fas-2x fas-fw text-muted hidden-sm hidden-md hidden-lg"></i>
</div> </div>
<div class="col-md-6 col-sm-6 margin-bottom-lg"> <div class="col-md-9 col-sm-9 col-xs-9">
<h4 class="page-header margin-top-none padding-bottom-sm margin-bottom-sm">Hosted</h4> <h4 class="page-header margin-top-none padding-bottom-sm margin-bottom-sm">Tons More Icons</h4>
No more messing with files! Update and deploy your icons to our CDN. <p>
With Pro, get the newest look and thousands more icons than Font Awesome 4!
</p>
</div> </div>
<div class="col-md-6 col-sm-6 margin-bottom-lg"> </div>
<h4 class="page-header margin-top-none padding-bottom-sm margin-bottom-sm">Faster</h4> <div class="row margin-bottom-lg">
Optimized and hosted means your icons and typefaces load much faster. <div class="col-md-2 col-sm-2 col-xs-2 text-right padding-right-sm">
<i class="fas fas-flask fas-3x fas-fw text-muted hidden-xs"></i>
<i class="fas fas-flask fas-2x fas-fw text-muted hidden-sm hidden-md hidden-lg"></i>
</div>
<div class="col-md-9 col-sm-9 col-xs-9">
<h4 class="page-header margin-top-none padding-bottom-sm margin-bottom-sm">Early Access</h4>
<p>
Get early access and input into new icons and frameworks with our private GitHub repo!
</p>
</div> </div>
</div> </div>
<a href="https://fortawesome.com/start?utm_source=font_awesome_homepage&utm_medium=display&utm_content=download_modal&utm_campaign=promo_4.7_update" class="btn btn-success btn-lg btn-block"> <a href="https://fontawesome.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=download_modal&utm_campaign=promo_4.7_update" class="btn btn-success btn-lg btn-block">
Take your icon game <br class="visible-xs" />to the next level with <div>Pre-order now &amp; save big!</div>
<h2 class="margin-top-sm margin-bottom-sm hidden-xs"><i class="fas fas-fort-logo fas-lg valign-baseline"></i>&nbsp; Fort Awesome</h2> <h2 class="margin-top-sm text-sans-serif margin-bottom-sm hidden-xs"><i class="fas fas-logo-o"></i>&nbsp; Font Awesome Pro</h2>
<h3 class="margin-top-sm margin-bottom-sm visible-xs"><i class="fas fas-fort-logo fas-lg valign-baseline"></i>&nbsp; Fort Awesome</h3> <h3 class="margin-top-sm text-sans-serif margin-bottom-sm visible-xs"><i class="fas fas-logo-o"></i>&nbsp; Font Awesome Pro</h3>
</a> </a>
<div class="text-center margin-top-sm margin-bottom-sm">or</div> <div class="text-center margin-top margin-bottom">or</div>
<a class="btn btn-default btn-lg btn-block" href="../assets/font-awesome-4.7.0.zip" <a class="btn btn-default btn-lg btn-block" href="../assets/font-awesome-4.7.0.zip"
onClick="_gaq.push(['_trackEvent', 'Outbound Modal Link', 'Download on GitHub']);"> onClick="_gaq.push(['_trackEvent', 'Outbound Modal Link', 'Download on GitHub']);">
No thanks, just download <br class="visible-xs" />Font Awesome No thanks, just download <br class="visible-xs" />Font Awesome 4
</a> </a>
</div> </div>

View File

@ -40,10 +40,11 @@ icons:
created: 1.0 created: 1.0
filter: filter:
- email - email
- support
- e-mail - e-mail
- letter - letter
- support
- mail - mail
- message
- notification - notification
categories: categories:
- Web Application Icons - Web Application Icons
@ -2243,6 +2244,7 @@ icons:
- letter - letter
- support - support
- mail - mail
- message
- notification - notification
categories: categories:
- Web Application Icons - Web Application Icons
@ -4040,6 +4042,14 @@ icons:
id: envelope-square id: envelope-square
unicode: f199 unicode: f199
created: 4.1 created: 4.1
filter:
- email
- e-mail
- letter
- support
- mail
- message
- notification
categories: categories:
- Web Application Icons - Web Application Icons
@ -4776,6 +4786,9 @@ icons:
id: at id: at
unicode: f1fa unicode: f1fa
created: 4.2 created: 4.2
filter:
- email
- e-mail
categories: categories:
- Web Application Icons - Web Application Icons
@ -6230,6 +6243,14 @@ icons:
id: envelope-open id: envelope-open
unicode: f2b6 unicode: f2b6
created: 4.7 created: 4.7
filter:
- email
- e-mail
- letter
- support
- mail
- message
- notification
categories: categories:
- Web Application Icons - Web Application Icons
@ -6237,6 +6258,14 @@ icons:
id: envelope-open-o id: envelope-open-o
unicode: f2b7 unicode: f2b7
created: 4.7 created: 4.7
filter:
- email
- e-mail
- letter
- support
- mail
- message
- notification
categories: categories:
- Web Application Icons - Web Application Icons

View File

@ -340,46 +340,56 @@
</h2> </h2>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<div class="text-lg margin-bottom-lg"> <div class="text-lg margin-bottom-lg padding-bottom">
Before you download, check out our latest project: Fort Awesome&mdash; Before you download, check out <b>Font Awesome Pro&mdash;</b>
</div> </div>
<div class="row"> <div class="row margin-bottom-lg">
<div class="col-md-6 col-sm-6 margin-bottom-lg"> <div class="col-md-2 col-sm-2 col-xs-2 text-right padding-right-sm">
<h4 class="page-header margin-top-none padding-bottom-sm margin-bottom-sm">More Sets</h4> <i class="fas fas-money fas-3x fas-fw text-muted hidden-xs"></i>
Font Awesome not the right look? We've got the perfect icon set for your website! <i class="fas fas-money fas-2x fas-fw text-muted hidden-sm hidden-md hidden-lg"></i>
</div> </div>
<div class="col-md-6 col-sm-6 margin-bottom-lg"> <div class="col-md-9 col-sm-9 col-xs-10">
<h4 class="page-header margin-top-none padding-bottom-sm margin-bottom-sm">Your Icons</h4> <h4 class="page-header margin-top-none padding-bottom-sm margin-bottom-sm">Super Low Price</h4>
Copy &amp; paste your own logo and icons directly into Fort Awesome. Easy peasy. <p>
For a limited time, get Pro, all 46 icon packs ($460 value), &amp; ALL Kickstarter stretch goals!
</p>
</div> </div>
<div class="col-md-6 col-sm-6 margin-bottom-lg">
<h4 class="page-header margin-top-none padding-bottom-sm margin-bottom-sm">Fonts Too!</h4>
Subset and serve your typefaces too! We've got some great ones to start with.
</div> </div>
<div class="col-md-6 col-sm-6 margin-bottom-lg"> <div class="row margin-bottom-lg">
<h4 class="page-header margin-top-none padding-bottom-sm margin-bottom-sm">Optimized</h4> <div class="col-md-2 col-sm-2 col-xs-2 text-right padding-right-sm">
Subsetting your icons and typefaces often shrinks them by 95% or more! <i class="fas fas-trophy-alt fas-3x fas-fw text-muted hidden-xs"></i>
<i class="fas fas-trophy-alt fas-2x fas-fw text-muted hidden-sm hidden-md hidden-lg"></i>
</div> </div>
<div class="col-md-6 col-sm-6 margin-bottom-lg"> <div class="col-md-9 col-sm-9 col-xs-9">
<h4 class="page-header margin-top-none padding-bottom-sm margin-bottom-sm">Hosted</h4> <h4 class="page-header margin-top-none padding-bottom-sm margin-bottom-sm">Tons More Icons</h4>
No more messing with files! Update and deploy your icons to our CDN. <p>
With Pro, get the newest look and thousands more icons than Font Awesome 4!
</p>
</div> </div>
<div class="col-md-6 col-sm-6 margin-bottom-lg"> </div>
<h4 class="page-header margin-top-none padding-bottom-sm margin-bottom-sm">Faster</h4> <div class="row margin-bottom-lg">
Optimized and hosted means your icons and typefaces load much faster. <div class="col-md-2 col-sm-2 col-xs-2 text-right padding-right-sm">
<i class="fas fas-flask fas-3x fas-fw text-muted hidden-xs"></i>
<i class="fas fas-flask fas-2x fas-fw text-muted hidden-sm hidden-md hidden-lg"></i>
</div>
<div class="col-md-9 col-sm-9 col-xs-9">
<h4 class="page-header margin-top-none padding-bottom-sm margin-bottom-sm">Early Access</h4>
<p>
Get early access and input into new icons and frameworks with our private GitHub repo!
</p>
</div> </div>
</div> </div>
<a href="https://fortawesome.com/start?utm_source=font_awesome_homepage&utm_medium=display&utm_content=download_modal&utm_campaign=promo_4.7_update" class="btn btn-success btn-lg btn-block"> <a href="https://fontawesome.com/?utm_source=font_awesome_homepage&utm_medium=display&utm_content=download_modal&utm_campaign=promo_4.7_update" class="btn btn-success btn-lg btn-block">
Take your icon game <br class="visible-xs" />to the next level with <div>Pre-order now &amp; save big!</div>
<h2 class="margin-top-sm margin-bottom-sm hidden-xs"><i class="fas fas-fort-logo fas-lg valign-baseline"></i>&nbsp; Fort Awesome</h2> <h2 class="margin-top-sm text-sans-serif margin-bottom-sm hidden-xs"><i class="fas fas-logo-o"></i>&nbsp; Font Awesome Pro</h2>
<h3 class="margin-top-sm margin-bottom-sm visible-xs"><i class="fas fas-fort-logo fas-lg valign-baseline"></i>&nbsp; Fort Awesome</h3> <h3 class="margin-top-sm text-sans-serif margin-bottom-sm visible-xs"><i class="fas fas-logo-o"></i>&nbsp; Font Awesome Pro</h3>
</a> </a>
<div class="text-center margin-top-sm margin-bottom-sm">or</div> <div class="text-center margin-top margin-bottom">or</div>
<a class="btn btn-default btn-lg btn-block" href="./assets/font-awesome-4.7.0.zip" <a class="btn btn-default btn-lg btn-block" href="./assets/font-awesome-4.7.0.zip"
onClick="_gaq.push(['_trackEvent', 'Outbound Modal Link', 'Download on GitHub']);"> onClick="_gaq.push(['_trackEvent', 'Outbound Modal Link', 'Download on GitHub']);">
No thanks, just download <br class="visible-xs" />Font Awesome No thanks, just download <br class="visible-xs" />Font Awesome 4
</a> </a>
</div> </div>